"use client";

import { useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { PageLayout } from "@/components/design-system/page-layout";
import { AiAssistPanel } from "@/components/email-templates/ai-assist-panel";
import { AiEmailWriterPanel } from "@/components/ai/ai-email-writer-panel";
import { AiTemplateGeneratorPanel } from "@/components/ai/ai-template-generator-panel";
import { CtaManager } from "@/components/email-templates/cta-manager";
import {
  RichTextEditor,
  type RichTextEditorHandle,
} from "@/components/email-templates/rich-text-editor";
import { LocalhostAppUrlWarning } from "@/components/email-templates/localhost-app-url-warning";
import { TemplatePreview } from "@/components/email-templates/template-preview";
import { VariableToolbar } from "@/components/email-templates/variable-toolbar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import {
  buildDesignSettingsSavePayload,
  createDefaultCta,
  designSettingsForNewTemplate,
  designSettingsFromStored,
  normalizeDesignSettings,
  toPlainDesignSettings,
} from "@/lib/email-builder/design-settings";
import { directionFromLanguage } from "@/lib/email-builder/email-direction";
import { LAYOUT_THEME_META } from "@/lib/email-builder/layout-meta";
import { renderEmailTemplateClient } from "@/lib/email-builder/render-email-template-client";
import { CATEGORY_LABELS, getStartersByCategory } from "@/lib/email-builder/starters";
import {
  DEFAULT_SAMPLE_DATA,
  type EmailDesignSettings,
  type LayoutTheme,
} from "@/lib/email-builder/types";
import type { EmailStarterTemplate } from "@/lib/email-builder/types";
import { useBrand } from "@/components/providers/brand-provider";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";
import { Loader2 } from "lucide-react";

type TemplateLanguage = "ar" | "en" | "mixed";
type TemplateStatus = "draft" | "active" | "archived";

const CATEGORIES = [
  "general",
  "hr",
  "recruitment",
  "operations",
  "digital_transformation",
  "consulting",
  "follow_up",
  "event",
  "custom",
] as const;

export function EmailTemplateBuilder({
  mode,
  initial,
}: {
  mode: "create" | "edit";
  initial?: {
    id?: string;
    name?: string;
    description?: string;
    category?: string;
    subject?: string;
    htmlContent?: string;
    textContent?: string;
    editorContent?: string;
    plainTextFallback?: string;
    layoutTheme?: LayoutTheme;
    designSettings?: Partial<EmailDesignSettings>;
    language?: TemplateLanguage;
    status?: TemplateStatus;
  };
}) {
  const router = useRouter();
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const editorRef = useRef<RichTextEditorHandle>(null);
  const [editorKey, setEditorKey] = useState(0);
  const defaultCreateContent =
    "<p>السلام عليكم {{person_name}}،</p><p>يسعدنا التواصل مع <strong>{{company_name}}</strong> في قطاع {{sector}}.</p><p>نقترح {{recommended_service}} لدعم أهدافكم في {{city}}.</p><p>مع التحية،<br/>{{sender_name}}</p>";

  const [name, setName] = useState(initial?.name ?? "");
  const [description, setDescription] = useState(initial?.description ?? "");
  const [category, setCategory] = useState(initial?.category ?? "general");
  const [subject, setSubject] = useState(
    initial?.subject ?? "فرصة لتحسين كفاءة {{company_name}}"
  );
  const [language, setLanguage] = useState<TemplateLanguage>(initial?.language ?? "ar");
  const [status, setStatus] = useState<TemplateStatus>(initial?.status ?? "draft");
  const [layoutTheme, setLayoutTheme] = useState<LayoutTheme>(
    initial?.layoutTheme ?? "clean_business"
  );
  const { brand } = useBrand();
  const [designSettings, setDesignSettings] = useState<EmailDesignSettings>(() =>
    mode === "create" && !initial?.designSettings
      ? designSettingsForNewTemplate(initial?.language ?? "ar", brand)
      : designSettingsFromStored(
          toPlainDesignSettings(initial?.designSettings) as Partial<EmailDesignSettings>,
          initial?.language ?? "ar"
        )
  );
  const [editorContent, setEditorContent] = useState(
    initial?.editorContent ?? (mode === "create" ? defaultCreateContent : "")
  );
  const [plainTextFallback, setPlainTextFallback] = useState(
    initial?.plainTextFallback ?? initial?.textContent ?? ""
  );
  const [htmlSource, setHtmlSource] = useState(initial?.htmlContent ?? "");
  const [editorTab, setEditorTab] = useState<"visual" | "html">("visual");
  const [serverPreview, setServerPreview] = useState<{
    subject: string;
    htmlContent: string;
    textContent: string;
  } | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [previewing, setPreviewing] = useState(false);
  const [saving, setSaving] = useState(false);

  const debouncedSettings = useDebouncedValue(designSettings, 200);

  function getCurrentEditorHtml(): string {
    if (editorTab === "html") {
      return (htmlSource || editorContent).trim();
    }
    const fromEditor = editorRef.current?.getHtml()?.trim();
    if (fromEditor) return fromEditor;
    return editorContent.trim();
  }

  const starters = useMemo(() => getStartersByCategory(category), [category]);

  const livePreview = useMemo(() => {
    const settings = normalizeDesignSettings(debouncedSettings, language, {
      brandingDefaults: mode === "create" && !initial?.designSettings,
    });
    const bodyHtml =
      editorTab === "html" ? (htmlSource || editorContent) : editorContent;
    return renderEmailTemplateClient({
      subject,
      editorContent: bodyHtml,
      layoutTheme,
      designSettings: settings,
      language,
      direction: settings.direction,
      sampleData: DEFAULT_SAMPLE_DATA,
    });
  }, [
    editorContent,
    editorTab,
    htmlSource,
    layoutTheme,
    debouncedSettings,
    language,
    subject,
    mode,
    initial?.designSettings,
  ]);

  const previewData = serverPreview ?? livePreview;

  function applyStarter(starter: EmailStarterTemplate) {
    const starterLang = starter.language ?? language;
    const ctas =
      starter.suggestedCtas?.map((c) =>
        createDefaultCta({
          text: c.text,
          url: c.url,
          style: c.style ?? "primary",
        })
      ) ??
      (starter.suggestedCtaText && starter.suggestedCtaUrl
        ? [
            createDefaultCta({
              text: starter.suggestedCtaText,
              url: starter.suggestedCtaUrl,
            }),
          ]
        : []);

    setName(starter.name);
    setSubject(starter.subject);
    setEditorContent(starter.editorContent);
    setHtmlSource(starter.editorContent);
    setPlainTextFallback(starter.textFallback ?? "");
    setLayoutTheme(starter.layoutTheme);
    setLanguage(starterLang);
    setDesignSettings(
      normalizeDesignSettings(
        {
          ...designSettings,
          ctas,
          ctaText: "",
          ctaUrl: "",
          direction: directionFromLanguage(starterLang),
        },
        starterLang
      )
    );
    setEditorKey((k) => k + 1);
    setServerPreview(null);
  }

  const canSave = useMemo(
    () => Boolean(name.trim() && subject.trim() && editorContent.trim()),
    [name, subject, editorContent]
  );

  async function runServerPreview() {
    setPreviewing(true);
    setPreviewError(null);
    const currentHtml = getCurrentEditorHtml();
    const res = await fetch("/api/email-templates/preview", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        subject,
        editorContent: currentHtml,
        layoutTheme,
        designSettings: buildDesignSettingsSavePayload(designSettings, { direction: dir }),
        language,
        direction: dir,
        sampleData: DEFAULT_SAMPLE_DATA,
      }),
    });
    const json = await res.json();
    setPreviewing(false);
    if (!res.ok) {
      setServerPreview(null);
      setPreviewError(json.error ?? "Preview failed");
      return;
    }
    setServerPreview({
      subject: json.subject ?? subject,
      htmlContent: json.htmlContent ?? "",
      textContent: json.textContent ?? "",
    });
  }

  async function save() {
    if (saving) return;
    const currentHtml = getCurrentEditorHtml();
    if (!currentHtml.trim()) {
      setPreviewError(isAr ? "محتوى الرسالة مطلوب" : "Email body is required");
      return;
    }
    setSaving(true);

    if (process.env.NODE_ENV === "development") {
      console.info("[template-save]", {
        editorGetHtmlLength: editorRef.current?.getHtml()?.length ?? 0,
        payloadEditorContentLength: currentHtml.length,
        stateEditorContentLength: editorContent.length,
      });
    }

    const payload = {
      name,
      description,
      category,
      subject,
      editorContent: currentHtml,
      plainTextFallback: plainTextFallback || undefined,
      layoutTheme,
      designSettings: buildDesignSettingsSavePayload(designSettings, { direction: dir }),
      language,
      direction: dir,
      status,
    };

    const endpoint =
      mode === "create" ? "/api/email-templates" : `/api/email-templates/${initial?.id}`;
    const method = mode === "create" ? "POST" : "PATCH";
    const res = await fetch(endpoint, {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    const json = await res.json();
    setSaving(false);
    if (!res.ok) {
      setPreviewError(json.error ?? "Save failed");
      return;
    }
    const id = json?.data?._id ?? initial?.id;
    router.push(id ? `/email-templates/${id}` : "/email-templates");
    router.refresh();
  }

  const insertVariable = (key: string) => {
    if (editorRef.current) {
      editorRef.current.insertVariable(key);
      setEditorContent(editorRef.current.getHtml());
    } else {
      setEditorContent((c) => `${c}{{${key}}}`);
    }
  };

  const dir =
    designSettings.direction ?? (language === "en" ? "ltr" : "rtl");

  return (
    <PageLayout
      title={
        mode === "create"
          ? isAr
            ? "منشئ قوالب البريد"
            : "Email template builder"
          : isAr
            ? "تعديل القالب"
            : "Edit template"
      }
      description={
        isAr
          ? "صمّم قالباً احترافياً مع معاينة مباشرة"
          : "Design a professional template with live preview"
      }
      actions={
        <div className="flex flex-wrap gap-2">
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={previewing}
            onClick={() => void runServerPreview()}
          >
            {previewing ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            {isAr ? "معاينة نهائية" : "Final preview"}
          </Button>
          <Button
            type="button"
            size="sm"
            disabled={saving || !canSave}
            onClick={() => void save()}
          >
            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            {saving ? "..." : isAr ? "حفظ" : "Save"}
          </Button>
        </div>
      }
      maxWidth={false}
    >
      {previewError ? (
        <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
          {previewError}
        </p>
      ) : null}

      <LocalhostAppUrlWarning />

      <div className="grid gap-6 xl:grid-cols-[1fr_400px]">
        <div className="space-y-5">
          <section className="surface-elevated p-4">
            <h3 className="mb-3 text-sm font-semibold">
              {isAr ? "١. معلومات القالب" : "1. Template info"}
            </h3>
            <div className="grid gap-3 sm:grid-cols-2">
              <Input
                placeholder={isAr ? "اسم القالب" : "Template name"}
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="sm:col-span-2"
              />
              <Input
                placeholder={isAr ? "وصف" : "Description"}
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="sm:col-span-2"
              />
              <select
                className="flex h-10 rounded-lg border border-border bg-card px-3 text-sm"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                {CATEGORIES.map((c) => (
                  <option key={c} value={c}>
                    {isAr ? CATEGORY_LABELS[c]?.ar ?? c : CATEGORY_LABELS[c]?.en ?? c}
                  </option>
                ))}
              </select>
              <select
                className="flex h-10 rounded-lg border border-border bg-card px-3 text-sm"
                value={language}
                onChange={(e) => {
                  const lang = e.target.value as TemplateLanguage;
                  setLanguage(lang);
                  setDesignSettings((d) => ({
                    ...d,
                    direction: directionFromLanguage(lang),
                  }));
                }}
              >
                <option value="ar">العربية</option>
                <option value="en">English</option>
                <option value="mixed">Mixed</option>
              </select>
              <select
                className="flex h-10 rounded-lg border border-border bg-card px-3 text-sm sm:col-span-2"
                value={status}
                onChange={(e) => setStatus(e.target.value as TemplateStatus)}
              >
                <option value="draft">draft</option>
                <option value="active">active</option>
                <option value="archived">archived</option>
              </select>
            </div>
          </section>

          <section className="surface-elevated p-4">
            <h3 className="mb-3 text-sm font-semibold">
              {isAr ? "٢. قوالب جاهزة" : "2. Starter templates"}
            </h3>
            <div className="grid gap-2 sm:grid-cols-2">
              {starters.map((s) => (
                <div
                  key={s.id}
                  className="flex flex-col rounded-xl border border-border p-3 text-start text-sm"
                >
                  <p className="font-semibold">{isAr ? s.name : s.nameEn ?? s.name}</p>
                  <p className="mt-1 line-clamp-2 flex-1 text-xs text-muted-foreground">
                    {s.subject}
                  </p>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="mt-3 w-full"
                    onClick={() => applyStarter(s)}
                  >
                    {isAr ? "استخدام هذا القالب" : "Use this template"}
                  </Button>
                </div>
              ))}
            </div>
          </section>

          <section className="surface-elevated p-4">
            <h3 className="mb-3 text-sm font-semibold">
              {isAr ? "٣. تصميم القالب" : "3. Layout design"}
            </h3>
            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
              {LAYOUT_THEME_META.map((meta) => (
                <button
                  key={meta.id}
                  type="button"
                  onClick={() => setLayoutTheme(meta.id)}
                  className={cn(
                    "overflow-hidden rounded-xl border text-start transition-colors",
                    layoutTheme === meta.id
                      ? "border-primary ring-2 ring-primary"
                      : "border-border hover:border-primary/50"
                  )}
                >
                  <div
                    className="h-14 px-3 py-2"
                    style={{ background: meta.headerColor }}
                  >
                    <div
                      className="mt-2 h-2 w-16 rounded"
                      style={{ background: meta.accentColor }}
                    />
                  </div>
                  <div className="p-2" style={{ background: meta.bodyBg }}>
                    <p className="text-xs font-semibold">
                      {isAr ? meta.ar : meta.en}
                    </p>
                    <p className="line-clamp-1 text-[10px] text-muted-foreground">
                      {meta.description}
                    </p>
                  </div>
                </button>
              ))}
            </div>
          </section>

          <section className="surface-elevated space-y-3 p-4">
            <h3 className="text-sm font-semibold">
              {isAr ? "٤. العنوان والمحتوى" : "4. Subject & content"}
            </h3>
            <Input
              placeholder={isAr ? "عنوان الرسالة (Subject)" : "Email subject"}
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
            />
            <VariableToolbar onInsert={insertVariable} />
            <Tabs
              value={editorTab}
              onValueChange={(v) => {
                const tab = v as "visual" | "html";
                if (tab === "html" && editorRef.current) {
                  const html = editorRef.current.getHtml();
                  setHtmlSource(html);
                  setEditorContent(html);
                }
                if (tab === "visual" && editorTab === "html") {
                  const html = (htmlSource || editorContent).trim();
                  setEditorContent(html);
                  setEditorKey((k) => k + 1);
                }
                setEditorTab(tab);
              }}
            >
              <TabsList>
                <TabsTrigger value="visual">{isAr ? "محرر مرئي" : "Visual"}</TabsTrigger>
                <TabsTrigger value="html">{isAr ? "مصدر HTML" : "HTML"}</TabsTrigger>
              </TabsList>
              <TabsContent value="visual" className="mt-3">
                <RichTextEditor
                  key={editorKey}
                  ref={editorRef}
                  content={editorContent}
                  onChange={setEditorContent}
                  dir={dir}
                />
              </TabsContent>
              <TabsContent value="html" className="mt-3">
                <textarea
                  className="min-h-[220px] w-full rounded-lg border border-border bg-muted/20 p-3 font-mono text-xs"
                  dir="ltr"
                  value={htmlSource || editorContent}
                  onChange={(e) => {
                    setHtmlSource(e.target.value);
                    setEditorContent(e.target.value);
                  }}
                />
              </TabsContent>
            </Tabs>
          </section>

          <section>
            <h3 className="mb-2 px-1 text-sm font-semibold">
              {isAr ? "٥. أزرار CTA" : "5. CTA buttons"}
            </h3>
            <CtaManager designSettings={designSettings} onChange={setDesignSettings} />
          </section>
        </div>

        <div className="space-y-4 xl:sticky xl:top-24 xl:self-start">
          <section className="surface-elevated space-y-3 p-4">
            <h3 className="text-sm font-semibold">
              {isAr ? "هوية القالب" : "Template branding"}
            </h3>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={designSettings.showLogo}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, showLogo: e.target.checked }))
                }
              />
              {isAr ? "إظهار الشعار" : "Show logo"}
            </label>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "رابط الشعار" : "Logo URL"}
              </label>
              <Input
                value={designSettings.logoUrl ?? ""}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, logoUrl: e.target.value }))
                }
                placeholder="/api/branding/assets/logo-light.png"
                dir="ltr"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "النص أسفل الشعار بالعربية" : "Header text (Arabic)"}
              </label>
              <Input
                value={designSettings.headerTextAr ?? ""}
                onChange={(e) =>
                  setDesignSettings((d) => ({
                    ...d,
                    headerTextAr: e.target.value,
                  }))
                }
                dir="rtl"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "النص أسفل الشعار بالإنجليزية" : "Header text (English)"}
              </label>
              <Input
                value={designSettings.headerTextEn ?? ""}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, headerTextEn: e.target.value }))
                }
                dir="ltr"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "نص الفوتر بالعربية" : "Footer text (Arabic)"}
              </label>
              <textarea
                className="min-h-16 w-full rounded-lg border border-border bg-card p-2 text-sm"
                value={designSettings.footerTextAr ?? ""}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, footerTextAr: e.target.value }))
                }
                dir="rtl"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "نص الفوتر بالإنجليزية" : "Footer text (English)"}
              </label>
              <textarea
                className="min-h-16 w-full rounded-lg border border-border bg-card p-2 text-sm"
                value={designSettings.footerTextEn ?? ""}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, footerTextEn: e.target.value }))
                }
                dir="ltr"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "اللون الأساسي" : "Primary color"}
              </label>
              <Input
                type="color"
                value={designSettings.primaryColor}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, primaryColor: e.target.value }))
                }
                className="h-10"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">
                {isAr ? "اللون المساعد" : "Accent color"}
              </label>
              <Input
                type="color"
                value={designSettings.accentColor}
                onChange={(e) =>
                  setDesignSettings((d) => ({ ...d, accentColor: e.target.value }))
                }
                className="h-10"
              />
            </div>
          </section>

          <div>
            <p className="mb-2 text-xs font-medium text-primary">
              {isAr ? "معاينة مباشرة" : "Live preview"}
            </p>
            <TemplatePreview
              subject={previewData.subject}
              htmlContent={previewData.htmlContent}
              textContent={previewData.textContent}
            />
          </div>

          <AiTemplateGeneratorPanel
            onApply={({ subject, body, cta, category, language: aiLang }) => {
              const templateLang = aiLang === "en" ? "en" : "ar";
              setSubject(subject);
              setEditorContent(body);
              editorRef.current?.setHtml(body);
              setCategory(category);
              setLanguage(templateLang);
              setDesignSettings((d) =>
                normalizeDesignSettings(
                  {
                    ...d,
                    direction: aiLang === "en" ? "ltr" : "rtl",
                    ctas:
                      (normalizeDesignSettings(d, templateLang).ctas ?? []).length > 0
                        ? (normalizeDesignSettings(d, templateLang).ctas ?? []).map((c, i) =>
                            i === 0 ? { ...c, text: cta } : c
                          )
                        : [createDefaultCta({ text: cta })],
                  },
                  templateLang
                )
              );
              setEditorKey((k) => k + 1);
              setServerPreview(null);
            }}
          />

          <AiEmailWriterPanel
            subject={subject}
            body={editorContent}
            onApply={({ subject: s, body, cta, language: aiLang }) => {
              const templateLang = aiLang === "en" ? "en" : "ar";
              setSubject(s);
              setEditorContent(body);
              editorRef.current?.setHtml(body);
              setLanguage(templateLang);
              if (cta) {
                setDesignSettings((d) =>
                  normalizeDesignSettings(
                    {
                      ...d,
                      direction: aiLang === "en" ? "ltr" : "rtl",
                      ctas: [createDefaultCta({ text: cta })],
                    },
                    templateLang
                  )
                );
              } else {
                setDesignSettings((d) =>
                  normalizeDesignSettings(
                    { ...d, direction: aiLang === "en" ? "ltr" : "rtl" },
                    templateLang
                  )
                );
              }
              setEditorKey((k) => k + 1);
              setServerPreview(null);
            }}
          />

          <AiAssistPanel
            subject={subject}
            content={editorContent}
            category={category}
            language={language}
            onApplySubject={setSubject}
            onApplyContent={(html) => {
              setEditorContent(html);
              editorRef.current?.setHtml(html);
            }}
            onApplyCta={(text) => {
              const ctas = normalizeDesignSettings(designSettings).ctas ?? [];
              if (ctas.length === 0) {
                setDesignSettings((d) =>
                  normalizeDesignSettings({
                    ...d,
                    ctas: [createDefaultCta({ text })],
                  })
                );
              } else {
                setDesignSettings((d) => ({
                  ...d,
                  ctas: ctas.map((c, i) => (i === 0 ? { ...c, text } : c)),
                }));
              }
            }}
          />
        </div>
      </div>
    </PageLayout>
  );
}