import { Layers3, Type } from "lucide-react";

import { AppCard } from "@/components/ui/app-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";

type UiKitShowcaseProps = {
  localeKey: "de" | "en";
};

function UiKitSection({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: React.ReactNode;
}) {
  return (
    <AppCard>
      <CardHeader>
        <CardTitle className="text-xl">{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>{children}</CardContent>
    </AppCard>
  );
}

export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
  const copy =
    localeKey === "de"
      ? {
          title: "UI Kit",
          intro:
            "Zentrale Referenz fuer globale Oberflaechen, Steuerelemente und verschachtelte Ebenen.",
          cards: "Cards",
          buttons: "Buttons",
          inputs: "Inputs",
          badges: "Badges",
          tabs: "Tabs",
          surfaces: "Surfaces",
          typography: "Typography",
          headers: "Headers",
          cardsDesc:
            "Aussenflaechen, innere Karten und verschachtelte Ebenen mit einheitlicher Hierarchie.",
          buttonsDesc:
            "Globale Button Varianten und Groessen aus einer zentralen Quelle.",
          inputsDesc:
            "Gemeinsame Feldzustande mit derselben inneren Radius- und Oberflaechenlogik.",
          badgesDesc:
            "Kleine Statusmarken mit minimaler, konsistenter Formensprache.",
          surfacesDesc:
            "Die gesamte Oberflaechenhierarchie basiert auf Level 1 bis 3 und einer inversen Ebene.",
          typographyDesc:
            "Typografische Grundstufen fuer Seiten, Sektionen und Metainformationen.",
          headersDesc:
            "Header Muster fuer Seiten und Sektionen innerhalb des Systems.",
          tabsDesc:
            "Tabs bleiben in einer Route und verwenden dieselbe verschachtelte Steuerlogik.",
          outerCard: "Aeussere Card",
          surfaceLevel: "Surface Level 1",
          innerCard: "Innere Card",
          nestedContent: "Verschachtelte Inhalte nutzen den zweiten Radius und eine weichere Oberflaeche.",
          nestedSurface: "Verschachtelte Ebene",
          nestedSurfaceText: "Mehr Tiefe ohne einen neuen Component Stil zu erfinden.",
          interactiveOuterCard: "Interaktive aeussere Card",
          hoverText: "Das Hover Verhalten bleibt an dieselbe Oberflaechenebene gebunden.",
          inverseOuterCard: "Inverse aeussere Card",
          inverseOuterCardText: "Nur verwenden, wenn ein starker Kontrastblock wirklich noetig ist.",
          default: "Standard",
          secondary: "Sekundaer",
          outline: "Outline",
          ghost: "Ghost",
          destructive: "Destruktiv",
          linkButton: "Link Button",
          small: "Klein",
          large: "Gross",
          iconButton: "Icon Button",
          disabled: "Deaktiviert",
          defaultInput: "Standard Input",
          placeholderText: "Platzhaltertext",
          filledInput: "Gefuellter Input",
          filledValue: "Gefuellter Wert",
          disabledInput: "Deaktivierter Input",
          disabledState: "Deaktivierter Zustand",
          focusPreview: "Focus Vorschau",
          focusedLook: "Fokussierte Ansicht",
          errorPreview: "Fehler Vorschau",
          invalidValue: "Ungueltiger Wert",
          textarea: "Textarea",
          textareaValue: "Laengerer Feldzustand fuer mehrzeilige Inhalte.",
          success: "Erfolg",
          warning: "Warnung",
          first: "Erste",
          second: "Zweite",
          third: "Dritte",
          firstTabText: "Inhalt des ersten Tabs innerhalb einer Level 1 Oberflaeche.",
          secondTabText: "Inhalt des zweiten Tabs mit derselben globalen Hierarchie.",
          thirdTabText: "Inhalt des dritten Tabs ohne lokale Sonderstile.",
          surfaceOne: "Surface 1",
          surfaceOneText: "Aeussere und primaere Container.",
          surfaceTwo: "Surface 2",
          surfaceTwoText: "Innere und unterstuetzende Panels.",
          surfaceThree: "Surface 3",
          surfaceThreeText: "Mehr Betonung ohne neue Styling-Zweige.",
          inverse: "Inverse",
          inverseText: "Reserviert fuer bewusst eingesetzte Kontrastbloecke.",
          eyebrow: "Eyebrow",
          pageHeading: "Seitenueberschrift",
          pageHeadingText: "Begleitender Absatz fuer primaere Seiteneinfuehrungen und Zusammenfassungen.",
          sectionHeading: "Abschnittsueberschrift",
          sectionHeadingText: "Fuer gruppierte Bereiche innerhalb einer aeusseren Seitenoberflaeche.",
          strongSupportingText: "Betonter Begleittext",
          pageHeader: "Seitenheader",
          outerSurfaceHeader: "Header der aeusseren Oberflaeche",
          outerSurfaceHeaderText: "Dieses Muster wird fuer Seitensektionen mit staerkerer Hierarchie genutzt.",
          sectionHeader: "Abschnittsheader",
          nestedBlockHeading: "Ueberschrift des verschachtelten Blocks",
          nestedBlockHeadingText: "Innerhalb einer aeusseren Card verwenden, wenn Inhalte bereits gruppiert sind."
        }
      : {
          title: "UI Kit",
          intro:
            "Central reference for global surfaces, controls, and nested interface levels.",
          cards: "Cards",
          buttons: "Buttons",
          inputs: "Inputs",
          badges: "Badges",
          tabs: "Tabs",
          surfaces: "Surfaces",
          typography: "Typography",
          headers: "Headers",
          cardsDesc:
            "Outer surfaces, inner cards, and nested levels with one consistent hierarchy.",
          buttonsDesc:
            "Global button variants and sizes from one shared source of truth.",
          inputsDesc:
            "Shared field states using the same inner radius and surface logic.",
          badgesDesc:
            "Small status markers with a minimal and consistent shape language.",
          surfacesDesc:
            "The full surface hierarchy is built on level 1 through 3 and one inverse layer.",
          typographyDesc:
            "Typography foundations for pages, sections, and supporting copy.",
          headersDesc:
            "Header patterns for pages and sections inside the system.",
          tabsDesc:
            "Tabs stay within one route and use the same nested control logic.",
          outerCard: "Outer card",
          surfaceLevel: "Surface level 1",
          innerCard: "Inner card",
          nestedContent: "Nested content uses the secondary radius and a softer surface.",
          nestedSurface: "Nested surface",
          nestedSurfaceText: "Deeper emphasis without inventing a new component style.",
          interactiveOuterCard: "Interactive outer card",
          hoverText: "Hover behavior stays attached to the same surface level.",
          inverseOuterCard: "Inverse outer card",
          inverseOuterCardText: "Use only when a strong contrast block is truly needed.",
          default: "Default",
          secondary: "Secondary",
          outline: "Outline",
          ghost: "Ghost",
          destructive: "Destructive",
          linkButton: "Link button",
          small: "Small",
          large: "Large",
          iconButton: "Icon button",
          disabled: "Disabled",
          defaultInput: "Default input",
          placeholderText: "Placeholder text",
          filledInput: "Filled input",
          filledValue: "Filled value",
          disabledInput: "Disabled input",
          disabledState: "Disabled state",
          focusPreview: "Focus-style preview",
          focusedLook: "Focused look",
          errorPreview: "Error-style preview",
          invalidValue: "Invalid value",
          textarea: "Textarea",
          textareaValue: "Longer field state for multiline content.",
          success: "Success",
          warning: "Warning",
          first: "First",
          second: "Second",
          third: "Third",
          firstTabText: "First tab content inside a level 1 surface.",
          secondTabText: "Second tab content using the same global hierarchy.",
          thirdTabText: "Third tab content without local custom styling.",
          surfaceOne: "Surface 1",
          surfaceOneText: "Outer and primary containers.",
          surfaceTwo: "Surface 2",
          surfaceTwoText: "Inner and supporting panels.",
          surfaceThree: "Surface 3",
          surfaceThreeText: "Raised emphasis without new styling branches.",
          inverse: "Inverse",
          inverseText: "Reserved for deliberate high-contrast blocks.",
          eyebrow: "Eyebrow",
          pageHeading: "Page heading",
          pageHeadingText: "Supporting paragraph text for primary page introductions and summaries.",
          sectionHeading: "Section heading",
          sectionHeadingText: "Use this for grouped blocks inside an outer page surface.",
          strongSupportingText: "Strong supporting text",
          pageHeader: "Page header",
          outerSurfaceHeader: "Outer surface header",
          outerSurfaceHeaderText: "This pattern is used for page-level sections that need stronger hierarchy.",
          sectionHeader: "Section header",
          nestedBlockHeading: "Nested block heading",
          nestedBlockHeadingText: "Use inside an outer card when content is already grouped."
        };

  return (
    <div className="flex flex-col gap-section">
      <AppCard level={3}>
        <CardContent className="flex flex-col gap-4 p-6 lg:p-10">
          <div className="inline-flex w-fit items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
            <Layers3 className="h-3.5 w-3.5 text-brand-secondary" />
            {copy.title}
          </div>
          <div className="space-y-3">
            <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-5xl">
              {copy.title}
            </h1>
            <p className="max-w-3xl text-base text-muted-foreground sm:text-lg">
              {copy.intro}
            </p>
          </div>
        </CardContent>
      </AppCard>

      <Tabs defaultValue="cards">
        <TabsList>
          <TabsTrigger value="cards">{copy.cards}</TabsTrigger>
          <TabsTrigger value="buttons">{copy.buttons}</TabsTrigger>
          <TabsTrigger value="inputs">{copy.inputs}</TabsTrigger>
          <TabsTrigger value="badges">{copy.badges}</TabsTrigger>
          <TabsTrigger value="tabs">{copy.tabs}</TabsTrigger>
          <TabsTrigger value="surfaces">{copy.surfaces}</TabsTrigger>
          <TabsTrigger value="typography">{copy.typography}</TabsTrigger>
          <TabsTrigger value="headers">{copy.headers}</TabsTrigger>
        </TabsList>

        <TabsContent value="cards">
          <UiKitSection title={copy.cards} description={copy.cardsDesc}>
            <div className="grid gap-6">
              <AppCard level={1}>
                <CardContent className="space-y-4 p-6">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">{copy.outerCard}</p>
                    <h3 className="mt-1 text-lg font-semibold text-foreground">{copy.surfaceLevel}</h3>
                  </div>
                  <AppCard level={2}>
                    <CardContent className="space-y-3 p-5">
                      <div>
                        <p className="text-sm font-medium text-muted-foreground">{copy.innerCard}</p>
                        <p className="mt-1 text-sm text-muted-foreground">
                          {copy.nestedContent}
                        </p>
                      </div>
                      <AppCard level={3}>
                        <CardContent className="space-y-2 p-4">
                          <p className="text-sm font-medium text-foreground">{copy.nestedSurface}</p>
                          <p className="text-sm text-muted-foreground">
                            {copy.nestedSurfaceText}
                          </p>
                        </CardContent>
                      </AppCard>
                    </CardContent>
                  </AppCard>
                </CardContent>
              </AppCard>

              <div className="grid gap-4">
                <AppCard level={1} interactive>
                  <CardContent className="p-5">
                    <p className="text-sm font-medium text-muted-foreground">{copy.interactiveOuterCard}</p>
                    <p className="mt-2 text-sm text-muted-foreground">
                      {copy.hoverText}
                    </p>
                  </CardContent>
                </AppCard>
                <AppCard level="inverse">
                  <CardContent className="p-5">
                    <p className="text-sm font-medium text-surface-inverse-foreground/80">
                      {copy.inverseOuterCard}
                    </p>
                    <p className="mt-2 text-sm text-surface-inverse-foreground/88">
                      {copy.inverseOuterCardText}
                    </p>
                  </CardContent>
                </AppCard>
              </div>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="buttons">
          <UiKitSection title={copy.buttons} description={copy.buttonsDesc}>
            <div className="grid gap-6">
              <AppCard level={2}>
                <CardContent className="flex flex-wrap gap-3 p-5">
                  <Button>{copy.default}</Button>
                  <Button variant="secondary">{copy.secondary}</Button>
                  <Button variant="outline">{copy.outline}</Button>
                  <Button variant="ghost">{copy.ghost}</Button>
                  <Button variant="destructive">{copy.destructive}</Button>
                  <Button variant="link">{copy.linkButton}</Button>
                </CardContent>
              </AppCard>
              <AppCard level={2}>
                <CardContent className="flex flex-wrap items-center gap-3 p-5">
                  <Button size="sm">{copy.small}</Button>
                  <Button>{copy.default}</Button>
                  <Button size="lg">{copy.large}</Button>
                  <Button size="icon" aria-label={copy.iconButton}>
                    <Layers3 className="h-4 w-4" />
                  </Button>
                  <Button disabled>{copy.disabled}</Button>
                </CardContent>
              </AppCard>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="inputs">
          <UiKitSection title={copy.inputs} description={copy.inputsDesc}>
            <div className="grid gap-6">
              <AppCard level={2}>
                <CardContent className="grid gap-4 p-5">
                  <Label className="grid gap-2">
                    {copy.defaultInput}
                    <Input placeholder={copy.placeholderText} />
                  </Label>
                  <Label className="grid gap-2">
                    {copy.filledInput}
                    <Input defaultValue={copy.filledValue} />
                  </Label>
                  <Label className="grid gap-2">
                    {copy.disabledInput}
                    <Input disabled defaultValue={copy.disabledState} />
                  </Label>
                </CardContent>
              </AppCard>
              <AppCard level={2}>
                <CardContent className="grid gap-4 p-5">
                  <Label className="grid gap-2">
                    {copy.focusPreview}
                    <Input
                      defaultValue={copy.focusedLook}
                      className="ring-2 ring-ring ring-offset-2"
                      readOnly
                    />
                  </Label>
                  <Label className="grid gap-2">
                    {copy.errorPreview}
                    <Input
                      defaultValue={copy.invalidValue}
                      className="border-destructive text-destructive focus-visible:ring-destructive"
                      readOnly
                    />
                  </Label>
                  <Label className="grid gap-2">
                    {copy.textarea}
                    <Textarea defaultValue={copy.textareaValue} />
                  </Label>
                </CardContent>
              </AppCard>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="badges">
          <UiKitSection title={copy.badges} description={copy.badgesDesc}>
            <div className="flex flex-wrap gap-3">
              <Badge>{copy.default}</Badge>
              <Badge variant="secondary">{copy.secondary}</Badge>
              <Badge variant="outline">{copy.outline}</Badge>
              <Badge variant="success">{copy.success}</Badge>
              <Badge variant="warning">{copy.warning}</Badge>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="tabs">
          <UiKitSection title={copy.tabs} description={copy.tabsDesc}>
            <AppCard level={2}>
              <CardContent className="space-y-4 p-5">
                <Tabs defaultValue="first">
                  <TabsList>
                    <TabsTrigger value="first">{copy.first}</TabsTrigger>
                    <TabsTrigger value="second">{copy.second}</TabsTrigger>
                    <TabsTrigger value="third">{copy.third}</TabsTrigger>
                  </TabsList>
                  <TabsContent value="first">
                    <AppCard level={1}>
                      <CardContent className="p-4 text-sm text-muted-foreground">
                        {copy.firstTabText}
                      </CardContent>
                    </AppCard>
                  </TabsContent>
                  <TabsContent value="second">
                    <AppCard level={1}>
                      <CardContent className="p-4 text-sm text-muted-foreground">
                        {copy.secondTabText}
                      </CardContent>
                    </AppCard>
                  </TabsContent>
                  <TabsContent value="third">
                    <AppCard level={1}>
                      <CardContent className="p-4 text-sm text-muted-foreground">
                        {copy.thirdTabText}
                      </CardContent>
                    </AppCard>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </AppCard>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="surfaces">
          <UiKitSection title={copy.surfaces} description={copy.surfacesDesc}>
            <div className="grid gap-4">
              <AppCard level={1}>
                <CardContent className="p-5">
                  <p className="font-medium">{copy.surfaceOne}</p>
                  <p className="mt-2 text-sm text-muted-foreground">{copy.surfaceOneText}</p>
                </CardContent>
              </AppCard>
              <AppCard level={2}>
                <CardContent className="p-5">
                  <p className="font-medium">{copy.surfaceTwo}</p>
                  <p className="mt-2 text-sm text-muted-foreground">{copy.surfaceTwoText}</p>
                </CardContent>
              </AppCard>
              <AppCard level={3}>
                <CardContent className="p-5">
                  <p className="font-medium">{copy.surfaceThree}</p>
                  <p className="mt-2 text-sm text-muted-foreground">{copy.surfaceThreeText}</p>
                </CardContent>
              </AppCard>
              <AppCard level="inverse">
                <CardContent className="p-5">
                  <p className="font-medium text-surface-inverse-foreground">{copy.inverse}</p>
                  <p className="mt-2 text-sm text-surface-inverse-foreground/88">{copy.inverseText}</p>
                </CardContent>
              </AppCard>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="typography">
          <UiKitSection title={copy.typography} description={copy.typographyDesc}>
            <div className="space-y-6">
              <div className="space-y-2">
                <p className="text-sm font-medium uppercase tracking-[0.14em] text-muted-foreground">
                  {copy.eyebrow}
                </p>
                <h1 className="text-4xl font-semibold tracking-tight text-foreground">
                  {copy.pageHeading}
                </h1>
                <p className="max-w-2xl text-base text-muted-foreground">
                  {copy.pageHeadingText}
                </p>
              </div>
              <AppCard level={2}>
                <CardContent className="space-y-3 p-5">
                  <h2 className="text-2xl font-semibold text-foreground">{copy.sectionHeading}</h2>
                  <p className="text-sm text-muted-foreground">
                    {copy.sectionHeadingText}
                  </p>
                  <p className="text-sm font-medium text-foreground/82">{copy.strongSupportingText}</p>
                </CardContent>
              </AppCard>
            </div>
          </UiKitSection>
        </TabsContent>

        <TabsContent value="headers">
          <UiKitSection title={copy.headers} description={copy.headersDesc}>
            <div className="grid gap-6">
              <AppCard level={3}>
                <CardContent className="space-y-3 p-6">
                  <div className="inline-flex w-fit items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
                    <Type className="h-3.5 w-3.5 text-brand-primary" />
                    {copy.pageHeader}
                  </div>
                  <h2 className="text-3xl font-semibold tracking-tight text-foreground">
                    {copy.outerSurfaceHeader}
                  </h2>
                  <p className="text-base text-muted-foreground">
                    {copy.outerSurfaceHeaderText}
                  </p>
                </CardContent>
              </AppCard>
              <AppCard level={2}>
                <CardContent className="space-y-3 p-5">
                  <p className="text-sm font-medium text-muted-foreground">{copy.sectionHeader}</p>
                  <h3 className="text-xl font-semibold text-foreground">{copy.nestedBlockHeading}</h3>
                  <p className="text-sm text-muted-foreground">
                    {copy.nestedBlockHeadingText}
                  </p>
                </CardContent>
              </AppCard>
            </div>
          </UiKitSection>
        </TabsContent>
      </Tabs>
    </div>
  );
}