"use client"

import { ExternalLinkIcon } from "lucide-react"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { AI_DEMO_SLUGS, AI_DEMOS } from "../../../ai/demos"
import type { AiSettings } from "../../../lib/types"
import { Toggle } from "./toggle"

const demoText = {
    telefon: "Sprach-Demo im Browser: Anrufen, Fragen stellen, Termin anfragen.",
    assistent: "Kundenanfrage rein, Antwort-E-Mail oder Angebotsentwurf raus.",
    content: "Posts und Anzeigen im Ton des Kunden, als echte Vorschau.",
}

function Heading({ title, text }: { title: string; text?: string }) {
    return (
        <div className="mb-3">
            <h3 className="text-sm font-medium">{title}</h3>
            {text && <p className="mt-0.5 text-xs text-muted-foreground">{text}</p>}
        </div>
    )
}

export function AiPanel({ variantId, ai, onChange }: { variantId: string; ai: AiSettings; onChange: (patch: Partial<AiSettings>) => void }) {
    return (
        <div className="flex flex-col gap-8">
            <p className="rounded-lg bg-surface px-3 py-2.5 text-xs text-muted-foreground">
                Die KI kennt alle Inhalte dieser Variante. Über den geteilten Link sind höchstens 150 KI-Anfragen pro Tag möglich.
                Änderungen hier greifen nach dem Speichern.
            </p>

            <section>
                <Heading title="Chat-Assistent" text="Chat-Fenster unten rechts auf der Webseite." />
                <div className="rounded-lg border">
                    <Toggle checked={ai.chat} onChange={(chat) => onChange({ chat })}>Auf der Webseite anzeigen</Toggle>
                </div>
                <div className="mt-4 flex flex-col gap-4">
                    <Field>
                        <FieldLabel htmlFor="ai-name">Name des Assistenten</FieldLabel>
                        <Input id="ai-name" value={ai.name} placeholder="z. B. Mia" maxLength={60} onChange={(event) => onChange({ name: event.target.value })} />
                    </Field>
                    <Field>
                        <FieldLabel htmlFor="ai-greeting">Begrüßung</FieldLabel>
                        <Textarea id="ai-greeting" rows={2} value={ai.greeting} placeholder="Leer = automatische Begrüßung mit Firmennamen" onChange={(event) => onChange({ greeting: event.target.value })} />
                    </Field>
                </div>
            </section>

            <section>
                <Heading title="Zusatzwissen" text="Was nicht auf der Webseite steht: Preise, FAQ, Parken, Zahlungsarten, Regeln." />
                <Field>
                    <Textarea
                        rows={6}
                        value={ai.knowledge}
                        aria-label="Zusatzwissen"
                        placeholder={"Parkplätze im Hof\nKartenzahlung möglich\nHunde willkommen"}
                        onChange={(event) => onChange({ knowledge: event.target.value })}
                    />
                    <FieldDescription>Stichpunkte reichen. Die KI erfindet nichts dazu.</FieldDescription>
                </Field>
            </section>

            <section>
                <Heading title="KI-Demos" text="Freigeschaltete Demos erscheinen im geteilten Link im Entwurfs-Badge unten links." />
                <div className="flex flex-col divide-y rounded-lg border">
                    {AI_DEMO_SLUGS.map((slug) => {
                        const feature = AI_DEMOS[slug].feature
                        return (
                            <div key={slug}>
                                <Toggle checked={ai[feature]} onChange={(checked) => onChange({ [feature]: checked })}>
                                    <span className="block">{AI_DEMOS[slug].label}</span>
                                    <span className="block text-xs text-muted-foreground">{demoText[slug]}</span>
                                </Toggle>
                                <a
                                    href={`/ki/${variantId}/${slug}`}
                                    target="_blank"
                                    rel="noreferrer"
                                    className="mx-3 mb-2.5 inline-flex items-center gap-1 text-xs text-primary hover:underline"
                                >
                                    <ExternalLinkIcon className="size-3" /> Intern testen
                                </a>
                            </div>
                        )
                    })}
                </div>
            </section>
        </div>
    )
}