import { ExternalLink, FileCode2, Map as MapIcon, Bot, CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
import Link from "next/link";

import { StatsCard } from "@/components/dashboard/stats-card";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import type { SeoCheck } from "@/lib/seo-report";
import { summarizeSeoChecklist } from "@/lib/seo-report";
import type { SeoSettings } from "@/lib/seo-settings";
import { cn } from "@/lib/utils";

type SeoSettingsFormProps = {
  action: (formData: FormData) => Promise<void>;
  settings: SeoSettings;
  checks: SeoCheck[];
  links: {
    sitemap: string;
    robots: string;
    manifest: string;
  };
  sitemapEntryCount: number;
};

const localeKeywordFields = [
  { key: "de", name: "keywordsDe", label: "Keywords (Deutsch)" },
  { key: "en", name: "keywordsEn", label: "Keywords (English)" },
  { key: "ar", name: "keywordsAr", label: "Keywords (Arabic)" },
] as const;

function StatusIcon({ status }: { status: SeoCheck["status"] }) {
  if (status === "ok") {
    return <CheckCircle2 className="h-4 w-4 text-status-success" aria-label="OK" />;
  }

  if (status === "warn") {
    return <AlertTriangle className="h-4 w-4 text-status-warning" aria-label="Hinweis" />;
  }

  return <XCircle className="h-4 w-4 text-destructive" aria-label="Fehler" />;
}

function FileLink({
  href,
  label,
  description,
  icon: Icon,
}: {
  href: string;
  label: string;
  description: string;
  icon: typeof MapIcon;
}) {
  return (
    <AppCard level={2} padding="sm" contentClassName="flex items-center justify-between gap-3">
      <div className="flex min-w-0 items-center gap-3">
        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
          <Icon className="h-4 w-4" />
        </div>
        <div className="min-w-0">
          <p className="text-sm font-medium text-foreground">{label}</p>
          <p className="truncate text-xs text-muted-foreground">{description}</p>
        </div>
      </div>
      <Button asChild variant="outline" size="sm">
        <Link href={href} target="_blank" rel="noreferrer">
          Oeffnen
          <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
        </Link>
      </Button>
    </AppCard>
  );
}

export function SeoSettingsForm({ action, settings, checks, links, sitemapEntryCount }: SeoSettingsFormProps) {
  const summary = summarizeSeoChecklist(checks);

  return (
    <div className="space-y-6">
      <div className="grid gap-3 sm:grid-cols-3">
        <StatsCard title="Bereit" value={String(summary.ok)} description="Checks bestanden" />
        <StatsCard title="Hinweise" value={String(summary.warn)} description="Empfohlen zu pruefen" />
        <StatsCard title="Fehler" value={String(summary.error)} description="Blockiert Sichtbarkeit" />
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <form id="seo-settings-form" action={action} className="space-y-6">
          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Sichtbarkeit</h2>
              <p className="text-sm text-muted-foreground">
                Steuert robots.txt, die Sitemap und das robots Meta Tag aller oeffentlichen Seiten.
              </p>
            </div>
            <AppCard level={2} padding="sm" contentClassName="space-y-4">
              <label className="flex items-start gap-3">
                <input
                  type="checkbox"
                  name="allowIndexing"
                  value="on"
                  defaultChecked={settings.allowIndexing}
                  className="mt-1 h-4 w-4 rounded border-border accent-primary"
                />
                <span>
                  <span className="block text-sm font-medium text-foreground">Indexierung erlauben</span>
                  <span className="block text-xs text-muted-foreground">
                    Aus = noindex auf allen Seiten, robots.txt sperrt alles, Sitemap wird leer. Der Wartungsmodus
                    sperrt zusaetzlich automatisch.
                  </span>
                </span>
              </label>
            </AppCard>
          </section>

          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Verifizierung & Social</h2>
              <p className="text-sm text-muted-foreground">
                Codes aus Google Search Console / Bing Webmaster und das X-Handle fuer Twitter Cards.
              </p>
            </div>
            <AppCard level={2} padding="sm" contentClassName="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="googleSiteVerification">Google Verification</Label>
                <Input
                  id="googleSiteVerification"
                  name="googleSiteVerification"
                  defaultValue={settings.googleSiteVerification}
                  placeholder="google-site-verification Wert"
                  className="font-mono"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="bingSiteVerification">Bing Verification</Label>
                <Input
                  id="bingSiteVerification"
                  name="bingSiteVerification"
                  defaultValue={settings.bingSiteVerification}
                  placeholder="msvalidate.01 Wert"
                  className="font-mono"
                />
              </div>
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="twitterHandle">X / Twitter Handle</Label>
                <Input
                  id="twitterHandle"
                  name="twitterHandle"
                  defaultValue={settings.twitterHandle}
                  placeholder="@handle"
                />
              </div>
            </AppCard>
          </section>

          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Strukturierte Daten</h2>
              <p className="text-sm text-muted-foreground">
                JSON-LD fuer Google: Wer steht hinter der Seite? Gilt fuer alle Seiten und jede Projekt-Ansicht.
              </p>
            </div>
            <AppCard level={2} padding="sm" contentClassName="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="structuredDataType">Typ</Label>
                <select
                  id="structuredDataType"
                  name="structuredDataType"
                  defaultValue={settings.structuredDataType}
                  className="flex h-10 w-full rounded-nested border border-input bg-background px-3 py-2 text-sm"
                >
                  <option value="Person">Person (Freelancer / Portfolio)</option>
                  <option value="Organization">Organization (Studio / Firma)</option>
                </select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="structuredDataName">Name</Label>
                <Input
                  id="structuredDataName"
                  name="structuredDataName"
                  defaultValue={settings.structuredDataName}
                  placeholder="Leer = Site Name"
                />
              </div>
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="structuredDataJobTitle">Job Title / Slogan</Label>
                <Input
                  id="structuredDataJobTitle"
                  name="structuredDataJobTitle"
                  defaultValue={settings.structuredDataJobTitle}
                  placeholder="z.B. Brand & Motion Designer"
                />
              </div>
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="sameAs">Social Profile (eine https-URL pro Zeile)</Label>
                <Textarea
                  id="sameAs"
                  name="sameAs"
                  rows={4}
                  defaultValue={settings.sameAs.join("\n")}
                  placeholder={"https://www.behance.net/...\nhttps://www.linkedin.com/in/..."}
                  className="font-mono text-xs"
                />
              </div>
            </AppCard>
          </section>

          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Keywords</h2>
              <p className="text-sm text-muted-foreground">
                Kommagetrennt, pro Sprache. Geringe Gewichtung bei Google, aber nuetzlich fuer Bing und Struktur.
              </p>
            </div>
            <AppCard level={2} padding="sm" contentClassName="grid gap-4">
              {localeKeywordFields.map((field) => (
                <div key={field.key} className="space-y-2">
                  <Label htmlFor={field.name}>{field.label}</Label>
                  <Input
                    id={field.name}
                    name={field.name}
                    defaultValue={settings.locales[field.key].keywords}
                    dir={field.key === "ar" ? "rtl" : "ltr"}
                    placeholder="branding, motion design, berlin"
                  />
                </div>
              ))}
            </AppCard>
          </section>

          <div className="flex justify-end">
            <Button type="submit">Save SEO Settings</Button>
          </div>
        </form>

        <aside className="space-y-6">
          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Dateien</h2>
              <p className="text-sm text-muted-foreground">Werden live aus den Einstellungen generiert.</p>
            </div>
            <div className="space-y-2">
              <FileLink
                href={links.sitemap}
                label="sitemap.xml"
                description={`${sitemapEntryCount} URLs, hreflang fuer DE/EN/AR`}
                icon={MapIcon}
              />
              <FileLink href={links.robots} label="robots.txt" description="Crawler-Regeln + Sitemap-Verweis" icon={Bot} />
              <FileLink href={links.manifest} label="manifest.webmanifest" description="PWA / Icons" icon={FileCode2} />
            </div>
          </section>

          <section className="space-y-3">
            <div>
              <h2 className="text-lg font-semibold text-foreground">Checkliste</h2>
              <p className="text-sm text-muted-foreground">Status der wichtigsten SEO-Bausteine.</p>
            </div>
            <AppCard level={2} padding="sm" contentClassName="divide-y divide-border/60">
              {checks.map((check) => (
                <div key={check.id} className={cn("flex items-start gap-3 py-2.5 first:pt-0 last:pb-0")}>
                  <span className="mt-0.5 shrink-0">
                    <StatusIcon status={check.status} />
                  </span>
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-foreground">{check.label}</p>
                    <p className="text-xs text-muted-foreground">{check.detail}</p>
                  </div>
                </div>
              ))}
            </AppCard>
          </section>
        </aside>
      </div>
    </div>
  );
}