'use client';

import { FileText, Wand2, CheckCircle2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { Mode, Language } from './BriefingPanel';

/**
 * Mode-Switcher für den Briefing-Tab: ersetzt den alten `IntentPicker` + `ModeLanguageBlock`.
 *
 * Eine einzige UX-Entscheidung oben in zwei großen Karten:
 *  - "Ich habe einen fertigen Text" → mode=preserve (Mailtext steht im Editor, KI formatiert nur)
 *  - "KI soll für mich schreiben"   → mode=rewrite (Briefing-Felder oder URL-Scrape, KI generiert)
 *
 * Side-Effects: Wenn der User in `preserve` wechselt UND `briefText` länger als 100 Zeichen ist UND
 * offer/painPoint leer sind, ruft `onAutoSuggest` den existierenden Suggest-Flow auf, um die
 * Kontext-Felder aus dem Editor-Text zu extrahieren.
 *
 * Sprache (auto/de/en) rendert kompakt rechts auf derselben Zeile.
 */
export function ModeSwitcher({
  mode,
  language,
  onModeChange,
  onLangChange,
}: {
  mode: Mode;
  language: Language;
  onModeChange: (next: Mode) => void;
  onLangChange: (next: Language) => void;
}) {
  const options: Array<{
    v: Mode;
    icon: typeof FileText;
    title: string;
    subtitle: string;
  }> = [
    {
      v: 'preserve',
      icon: FileText,
      title: 'Ich habe einen fertigen Text',
      subtitle: 'Mailtext steht im Editor — KI formatiert nur und ergänzt Anrede, P.S. und Footer',
    },
    {
      v: 'rewrite',
      icon: Wand2,
      title: 'KI soll für mich schreiben',
      subtitle: 'Aus Brief, URL-Scrape oder Briefing-Feldern generiert die KI einen kompletten Marketing-Text',
    },
  ];

  return (
    <div>
      <div className="mb-2 flex items-center justify-between gap-3">
        <div className="text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
          Wie soll die Mail entstehen?
        </div>
        <LanguagePills language={language} onChange={onLangChange} />
      </div>
      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
        {options.map((o) => {
          const Icon = o.icon;
          const active = mode === o.v;
          return (
            <button
              key={o.v}
              type="button"
              onClick={() => onModeChange(o.v)}
              aria-pressed={active}
              className={cn(
                'flex flex-col items-start gap-1 rounded-md border p-3 text-left transition',
                active
                  ? 'border-[#ff006a] bg-pink-50 ring-2 ring-[#ff006a]/30 dark:border-[#ff006a] dark:bg-pink-950/30'
                  : 'border-zinc-200 bg-white hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700',
              )}
            >
              <div className="flex w-full items-center justify-between gap-2">
                <Icon className={cn('h-4 w-4 shrink-0', active ? 'text-[#ff006a]' : 'text-zinc-500')} />
                {active && <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-[#ff006a]" />}
              </div>
              <div className={cn('text-sm font-semibold leading-tight', active ? 'text-[#ff006a]' : 'text-zinc-900 dark:text-zinc-100')}>
                {o.title}
              </div>
              <div className="text-[11px] leading-snug text-zinc-500 dark:text-zinc-400">
                {o.subtitle}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function LanguagePills({
  language,
  onChange,
}: {
  language: Language;
  onChange: (next: Language) => void;
}) {
  const langs: Language[] = ['auto', 'de', 'en'];
  return (
    <div className="flex items-center gap-1.5">
      <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Sprache</span>
      <div className="flex overflow-hidden rounded-md border border-zinc-300 dark:border-zinc-700">
        {langs.map((l) => {
          const active = language === l;
          return (
            <button
              key={l}
              type="button"
              onClick={() => onChange(l)}
              className={cn(
                'px-2.5 py-1 text-[11px] font-medium transition',
                active
                  ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                  : 'bg-white text-zinc-600 hover:bg-zinc-100 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700',
              )}
            >
              {l.toUpperCase()}
            </button>
          );
        })}
      </div>
    </div>
  );
}
