"use client";

import { useEffect, useState } from "react";
import { Loader2, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { AiLanguageField } from "@/components/ai/ai-language-field";
import { useLocale } from "@/components/providers/locale-provider";
import { useAiGenerationLanguageState } from "@/hooks/use-ai-generation-defaults";
import type { AiEmailWriterAction } from "@/lib/ai-content-enums";
import type { AiGenerationLanguage } from "@/lib/ai-brand-voice";
import { generationLanguageDirection } from "@/lib/ai-brand-voice";

const ACTIONS: Array<{ action: AiEmailWriterAction; ar: string; en: string }> = [
  { action: "generate", ar: "إنشاء بالذكاء الاصطناعي", en: "AI generate" },
  { action: "improve", ar: "تحسين النص", en: "Improve" },
  { action: "rewrite", ar: "إعادة الصياغة", en: "Rewrite" },
  { action: "shorten", ar: "اختصار", en: "Shorten" },
  { action: "expand", ar: "توسيع", en: "Expand" },
  { action: "more_professional", ar: "اجعله أكثر احترافية", en: "More professional" },
  { action: "more_friendly", ar: "اجعله أكثر ودية", en: "More friendly" },
  { action: "more_direct", ar: "اجعله أكثر مباشرة", en: "More direct" },
];

export type AiEmailWriterApplyResult = {
  subject: string;
  body: string;
  cta?: string;
  language: AiGenerationLanguage;
};

export function AiEmailWriterPanel({
  subject,
  body,
  onApply,
}: {
  subject: string;
  body: string;
  onApply: (result: AiEmailWriterApplyResult) => void;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const { language, setLanguage } = useAiGenerationLanguageState();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [guardError, setGuardError] = useState<string | null>(null);
  const [goal, setGoal] = useState("");
  const [service, setService] = useState("");
  const [customerType, setCustomerType] = useState("");
  const [sector, setSector] = useState("");
  const [tone, setTone] = useState("professional");
  const [length, setLength] = useState("medium");
  const [preview, setPreview] = useState<{ subject: string; body: string; suggestedCta: string } | null>(
    null
  );

  useEffect(() => {
    void fetch("/api/ai/guard")
      .then((r) => r.json())
      .then((j) => {
        if (!j.ok) setGuardError(j.messageAr ?? j.messageEn);
        else if (j.messageAr) setGuardError(j.messageAr);
      })
      .catch(() => undefined);
  }, []);

  async function run(action: AiEmailWriterAction) {
    setLoading(true);
    setGuardError(null);
    const res = await fetch("/api/ai/email-writer", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        action,
        goal,
        service,
        customerType,
        sector,
        language,
        tone,
        length,
        subject,
        body,
      }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setGuardError(json.error ?? "فشل");
      return;
    }
    if (json.error) setGuardError(json.error);
    setPreview({
      subject: json.subject,
      body: json.body,
      suggestedCta: json.suggestedCta,
    });
  }

  function applyPreview() {
    if (!preview) return;
    onApply({
      subject: preview.subject,
      body: preview.body,
      cta: preview.suggestedCta,
      language,
    });
    setPreview(null);
  }

  if (!open) {
    return (
      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
        <Sparkles className="h-4 w-4" />
        {isAr ? "كاتب البريد بالذكاء" : "AI Email Writer"}
      </Button>
    );
  }

  const previewDir = generationLanguageDirection(language);

  return (
    <div className="space-y-3 rounded-lg border border-border bg-card p-4">
      <div className="flex items-center justify-between gap-2">
        <h3 className="flex items-center gap-2 font-semibold">
          <Sparkles className="h-4 w-4 text-primary" />
          {isAr ? "كاتب البريد بالذكاء الاصطناعي" : "AI Email Writer"}
        </h3>
        <Button type="button" variant="ghost" size="sm" onClick={() => setOpen(false)}>
          {isAr ? "إغلاق" : "Close"}
        </Button>
      </div>
      {guardError ? (
        <p className="text-sm text-amber-700">{guardError}</p>
      ) : null}
      <div className="grid gap-2 sm:grid-cols-2">
        <AiLanguageField value={language} onChange={setLanguage} />
        <Input placeholder={isAr ? "الهدف" : "Goal"} value={goal} onChange={(e) => setGoal(e.target.value)} />
        <Input placeholder={isAr ? "الخدمة" : "Service"} value={service} onChange={(e) => setService(e.target.value)} />
        <Input placeholder={isAr ? "نوع العميل" : "Customer type"} value={customerType} onChange={(e) => setCustomerType(e.target.value)} />
        <Input placeholder={isAr ? "القطاع" : "Sector"} value={sector} onChange={(e) => setSector(e.target.value)} />
        <Input placeholder={isAr ? "النبرة" : "Tone"} value={tone} onChange={(e) => setTone(e.target.value)} />
        <Input placeholder={isAr ? "الطول (short/medium/long)" : "Length"} value={length} onChange={(e) => setLength(e.target.value)} />
      </div>
      <div className="flex flex-wrap gap-1">
        {ACTIONS.map((a) => (
          <Button key={a.action} type="button" size="sm" variant="outline" disabled={loading} onClick={() => void run(a.action)}>
            {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
            {isAr ? a.ar : a.en}
          </Button>
        ))}
      </div>
      {preview ? (
        <div className="space-y-2 rounded bg-muted/30 p-3 text-sm" dir={previewDir}>
          <p className="font-medium">{preview.subject}</p>
          <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: preview.body }} />
          <p className="text-xs text-muted-foreground">CTA: {preview.suggestedCta}</p>
          <p className="text-xs text-muted-foreground">
            {isAr ? "راجع المحتوى قبل الحفظ — لا يتم الحفظ تلقائياً." : "Review before saving."}
          </p>
          <Button type="button" size="sm" onClick={applyPreview}>
            {isAr ? "تطبيق على المحرر" : "Apply to editor"}
          </Button>
        </div>
      ) : null}
    </div>
  );
}