"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { useBrand } from "@/components/providers/brand-provider";
import { brandSampleVariables } from "@/lib/brand-settings";
import { VariablesHelper } from "@/components/email-templates/variables-helper";
import { TemplatePreview } from "@/components/email-templates/template-preview";

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

const BASE_SAMPLE_DATA = {
  person_name: "أستاذ محمد",
  company_name: "شركة المثال",
  sector: "المصانع",
  city: "الرياض",
  recommended_service: "تشغيل وإدارة الموارد البشرية",
  job_title: "مدير الموارد البشرية",
  service_interest: "التوظيف والاستقطاب",
};

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

export function EmailTemplateForm({
  mode,
  initial,
}: {
  mode: "create" | "edit";
  initial?: {
    id?: string;
    name?: string;
    description?: string;
    category?: string;
    subject?: string;
    htmlContent?: string;
    textContent?: string;
    language?: TemplateLanguage;
    status?: TemplateStatus;
  };
}) {
  const router = useRouter();
  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 [htmlContent, setHtmlContent] = useState(
    initial?.htmlContent ??
      "<p>السلام عليكم {{person_name}}،</p><p>لاحظنا أن {{company_name}} تعمل في قطاع {{sector}}، ونعتقد أن خدمة {{recommended_service}} قد تساعدكم في رفع كفاءة التشغيل.</p><p>تحياتي،<br/>{{sender_name}} — {{sender_email}}</p>"
  );
  const [textContent, setTextContent] = useState(
    initial?.textContent ??
      "السلام عليكم {{person_name}}،\nلاحظنا أن {{company_name}} تعمل في قطاع {{sector}}، ونعتقد أن خدمة {{recommended_service}} قد تساعدكم في رفع كفاءة التشغيل.\nتحياتي،\n{{sender_name}} — {{sender_email}}"
  );
  const { brand } = useBrand();
  const defaultSampleData = useMemo(
    () => ({ ...BASE_SAMPLE_DATA, ...brandSampleVariables(brand) }),
    [brand]
  );
  const [sampleData, setSampleData] = useState<Record<string, unknown>>(defaultSampleData);
  const [preview, setPreview] = useState<{
    subject: string;
    htmlContent: string;
    textContent: string;
    variables: string[];
  } | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [previewing, setPreviewing] = useState(false);
  const [saving, setSaving] = useState(false);

  const canSave = useMemo(() => {
    return name.trim() && subject.trim() && htmlContent.trim();
  }, [name, subject, htmlContent]);

  async function runPreview() {
    setPreviewing(true);
    setPreviewError(null);
    const res = await fetch("/api/email-templates/preview", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ subject, htmlContent, textContent, sampleData }),
    });
    const json = await res.json();
    if (!res.ok) {
      setPreview(null);
      setPreviewError(json.error ?? "فشلت المعاينة");
      setPreviewing(false);
      return;
    }
    setPreview(json);
    setPreviewing(false);
  }

  async function save() {
    setSaving(true);
    const payload = {
      name,
      description,
      category,
      subject,
      htmlContent,
      textContent,
      language,
      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 ?? "فشل الحفظ");
      return;
    }
    const id = json?.data?._id ?? initial?.id;
    router.push(id ? `/email-templates/${id}` : "/email-templates");
    router.refresh();
  }

  return (
    <div className="space-y-6">
      <section className="rounded-lg border border-neutral-200 bg-white p-5">
        <h1 className="text-2xl font-bold">
          {mode === "create" ? "إنشاء قالب بريد" : "تعديل قالب بريد"}
        </h1>

        <div className="mt-4 grid gap-3 md:grid-cols-2">
          <input
            className="rounded border border-neutral-300 px-3 py-2 text-sm md:col-span-2"
            placeholder="اسم القالب"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <input
            className="rounded border border-neutral-300 px-3 py-2 text-sm md:col-span-2"
            placeholder="وصف (اختياري)"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="rounded border border-neutral-300 px-3 py-2 text-sm"
          >
            {CATEGORIES.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value as TemplateLanguage)}
            className="rounded border border-neutral-300 px-3 py-2 text-sm"
          >
            <option value="ar">ar</option>
            <option value="en">en</option>
            <option value="mixed">mixed</option>
          </select>
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value as TemplateStatus)}
            className="rounded border border-neutral-300 px-3 py-2 text-sm"
          >
            <option value="draft">draft</option>
            <option value="active">active</option>
            <option value="archived">archived</option>
          </select>
          <input
            className="rounded border border-neutral-300 px-3 py-2 text-sm md:col-span-2"
            placeholder="العنوان (Subject)"
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
          />
          <textarea
            className="min-h-40 rounded border border-neutral-300 px-3 py-2 text-sm md:col-span-2"
            placeholder="محتوى HTML"
            value={htmlContent}
            onChange={(e) => setHtmlContent(e.target.value)}
          />
          <textarea
            className="min-h-32 rounded border border-neutral-300 px-3 py-2 text-sm md:col-span-2"
            placeholder="محتوى Text (اختياري)"
            value={textContent}
            onChange={(e) => setTextContent(e.target.value)}
          />
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => void runPreview()}
            disabled={previewing}
            className="rounded bg-neutral-800 px-4 py-2 text-sm text-white disabled:opacity-50"
          >
            {previewing ? "جاري المعاينة..." : "معاينة"}
          </button>
          <button
            type="button"
            onClick={() => void save()}
            disabled={saving || !canSave}
            className="rounded bg-[var(--accent)] px-4 py-2 text-sm text-white disabled:opacity-50"
          >
            {saving ? "جاري الحفظ..." : "حفظ"}
          </button>
        </div>

        {previewError ? (
          <p className="mt-3 text-sm text-red-700">{previewError}</p>
        ) : null}
      </section>

      <div className="grid gap-4 lg:grid-cols-3">
        <div className="lg:col-span-1">
          <VariablesHelper />
          <section className="mt-4 rounded-lg border border-neutral-200 bg-white p-4">
            <h2 className="text-sm font-semibold">بيانات المعاينة</h2>
            <pre className="mt-2 overflow-x-auto rounded bg-neutral-50 p-3 text-xs">
              {JSON.stringify(sampleData, null, 2)}
            </pre>
            <button
              type="button"
              onClick={() => setSampleData(defaultSampleData)}
              className="mt-2 rounded border border-neutral-300 px-3 py-1 text-sm"
            >
              إعادة ضبط
            </button>
          </section>
        </div>
        <div className="lg:col-span-2">
          <TemplatePreview
            subject={preview?.subject ?? subject}
            htmlContent={preview?.htmlContent ?? htmlContent}
            textContent={preview?.textContent ?? textContent}
          />
          {preview?.variables?.length ? (
            <section className="mt-4 rounded-lg border border-neutral-200 bg-white p-4">
              <h2 className="text-sm font-semibold">المتغيرات المستخرجة</h2>
              <div className="mt-2 flex flex-wrap gap-2">
                {preview.variables.map((v) => (
                  <code key={v} className="rounded bg-neutral-50 px-2 py-1 text-xs">
                    {"{{"}
                    {v}
                    {"}}"}
                  </code>
                ))}
              </div>
            </section>
          ) : null}
        </div>
      </div>
    </div>
  );
}