"use client";

import { 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 { generationLanguageDirection } from "@/lib/ai-brand-voice";

export type AiSequenceStepDraft = {
  stepNumber: number;
  delayDays: number;
  subject: string;
  body: string;
};

export function AiSequenceGeneratorPanel({
  onApply,
}: {
  onApply: (data: { name: string; steps: AiSequenceStepDraft[] }) => void;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const { language, setLanguage } = useAiGenerationLanguageState();
  const [goal, setGoal] = useState("");
  const [service, setService] = useState("");
  const [targetSegment, setTargetSegment] = useState("");
  const [cta, setCta] = useState("");
  const [numberOfEmails, setNumberOfEmails] = useState(3);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [preview, setPreview] = useState<{ name: string; steps: AiSequenceStepDraft[] } | null>(
    null
  );

  async function generate() {
    setLoading(true);
    setError(null);
    const res = await fetch("/api/ai/sequence-generator", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ goal, service, targetSegment, cta, numberOfEmails, language }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setError(json.error ?? "فشل");
      return;
    }
    if (json.error) setError(json.error);
    setPreview({ name: json.name, steps: json.steps ?? [] });
  }

  const previewDir = generationLanguageDirection(language);

  return (
    <div className="space-y-3 rounded-lg border border-dashed border-primary/30 p-4">
      <h3 className="flex items-center gap-2 font-semibold">
        <Sparkles className="h-4 w-4" />
        {isAr ? "إنشاء سلسلة بالذكاء الاصطناعي" : "AI sequence generator"}
      </h3>
      <AiLanguageField value={language} onChange={setLanguage} />
      <div className="grid gap-2 sm:grid-cols-2">
        <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 ? "الشريحة المستهدفة" : "Target segment"} value={targetSegment} onChange={(e) => setTargetSegment(e.target.value)} />
        <Input placeholder={isAr ? "دعوة للإجراء" : "CTA"} value={cta} onChange={(e) => setCta(e.target.value)} />
        <Input
          type="number"
          min={2}
          max={7}
          placeholder={isAr ? "عدد الرسائل" : "Emails count"}
          value={numberOfEmails}
          onChange={(e) => setNumberOfEmails(Number(e.target.value) || 3)}
        />
      </div>
      <Button type="button" disabled={loading} onClick={() => void generate()}>
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
        {isAr ? "توليد السلسلة" : "Generate sequence"}
      </Button>
      {error ? <p className="text-sm text-amber-700">{error}</p> : null}
      {preview ? (
        <div className="space-y-3 text-sm" dir={previewDir}>
          <p className="font-medium">{preview.name}</p>
          {preview.steps.map((s) => (
            <div key={s.stepNumber} className="rounded border p-2">
              <p>
                {isAr ? "الخطوة" : "Step"} {s.stepNumber} — Day {s.delayDays}
              </p>
              <p className="font-medium">{s.subject}</p>
            </div>
          ))}
          <Button
            type="button"
            size="sm"
            onClick={() => {
              onApply(preview);
              setPreview(null);
            }}
          >
            {isAr ? "تطبيق على النموذج" : "Apply to form"}
          </Button>
        </div>
      ) : null}
    </div>
  );
}