"use client";

import { useState, useTransition } from "react";
import { updateSiteSetting, uploadImage } from "@/lib/content-actions";
import { Plus, Trash2, ChevronUp, ChevronDown, Upload } from "lucide-react";
import type { HeroContent, HeroSlide, HeroStat, HeroStatIcon } from "@/lib/data/types";
import { defaultHero } from "@/lib/data/hero";

const STAT_ICONS: HeroStatIcon[] = ["Factory", "MapPin", "ShieldCheck", "Building2", "Truck", "Users", "BadgeCheck"];

function newId() {
  return typeof crypto !== "undefined" && "randomUUID" in crypto
    ? crypto.randomUUID()
    : Math.random().toString(36).slice(2, 10);
}

export default function HeroEditor({ hero }: { hero: HeroContent }) {
  const [content, setContent] = useState<HeroContent>(hero);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

  function patch(p: Partial<HeroContent>) {
    setContent((prev) => ({ ...prev, ...p }));
  }

  function patchSlide(i: number, p: Partial<HeroSlide>) {
    setContent((prev) => ({
      ...prev,
      slides: prev.slides.map((s, idx) => (idx === i ? { ...s, ...p } : s)),
    }));
  }

  function patchStat(i: number, p: Partial<HeroStat>) {
    setContent((prev) => ({
      ...prev,
      stats: prev.stats.map((s, idx) => (idx === i ? { ...s, ...p } : s)),
    }));
  }

  function moveSlide(i: number, dir: "up" | "down") {
    setContent((prev) => {
      const next = [...prev.slides];
      const j = dir === "up" ? i - 1 : i + 1;
      if (j < 0 || j >= next.length) return prev;
      [next[i], next[j]] = [next[j], next[i]];
      return { ...prev, slides: next };
    });
  }

  function moveStat(i: number, dir: "up" | "down") {
    setContent((prev) => {
      const next = [...prev.stats];
      const j = dir === "up" ? i - 1 : i + 1;
      if (j < 0 || j >= next.length) return prev;
      [next[i], next[j]] = [next[j], next[i]];
      return { ...prev, stats: next };
    });
  }

  function addSlide() {
    setContent((prev) => ({
      ...prev,
      slides: [...prev.slides, { id: newId(), imageUrl: "", altAr: "", altEn: "" }],
    }));
  }

  function addStat() {
    setContent((prev) => ({
      ...prev,
      stats: [...prev.stats, { id: newId(), icon: "Factory", ar: "", en: "" }],
    }));
  }

  function removeSlide(i: number) {
    setContent((prev) => ({ ...prev, slides: prev.slides.filter((_, idx) => idx !== i) }));
  }

  function removeStat(i: number) {
    setContent((prev) => ({ ...prev, stats: prev.stats.filter((_, idx) => idx !== i) }));
  }

  function handleUpload(i: number, file: File | null) {
    if (!file) return;
    const formData = new FormData();
    formData.set("file", file);
    startTransition(async () => {
      const result = await uploadImage(formData);
      if (result.ok && result.url) patchSlide(i, { imageUrl: result.url });
    });
  }

  function handleSave() {
    setMessage(null);
    startTransition(async () => {
      const result = await updateSiteSetting("hero", content);
      setMessage(result.ok ? "تم الحفظ ✓" : result.error || "تعذّر الحفظ");
    });
  }

  function resetToDefault() {
    if (!confirm("استرجاع النصوص والصور الافتراضية؟ سيفقد التعديلات غير المحفوظة.")) return;
    setContent({ ...defaultHero, slides: defaultHero.slides.map((s) => ({ ...s })), stats: defaultHero.stats.map((s) => ({ ...s })) });
  }

  return (
    <div className="space-y-6">
      {/* Intro block */}
      <div className="rounded-2xl border border-black/10 bg-white p-6">
        <div className="flex items-center justify-between gap-3">
          <div>
            <h3 className="font-bold text-[#1A1A1A]">نصوص الهيرو</h3>
            <p className="mt-1 text-xs text-[#8A8A8A]">
              العنوان، الوصف، والشريط الذهبي أعلى الصفحة الرئيسية — عربي وإنجليزي.
            </p>
          </div>
          <button
            type="button"
            onClick={resetToDefault}
            className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs font-semibold text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
          >
            استرجاع الافتراضي
          </button>
        </div>

        <div className="mt-4 grid gap-4 lg:grid-cols-2">
          <Field label="الشريط الذهبي (عربي)" value={content.taglineAr} onChange={(v) => patch({ taglineAr: v })} />
          <Field label="Badge (EN)" value={content.taglineEn} onChange={(v) => patch({ taglineEn: v })} dir="ltr" />
          <Field label="بداية العنوان (عربي)" value={content.titlePrefixAr} onChange={(v) => patch({ titlePrefixAr: v })} />
          <Field label="Title prefix (EN)" value={content.titlePrefixEn} onChange={(v) => patch({ titlePrefixEn: v })} dir="ltr" />
          <Field label="الكلمة الذهبية (عربي)" value={content.titleHighlightAr} onChange={(v) => patch({ titleHighlightAr: v })} />
          <Field label="Title highlight (EN)" value={content.titleHighlightEn} onChange={(v) => patch({ titleHighlightEn: v })} dir="ltr" />
          <Field label="نهاية العنوان (عربي)" value={content.titleSuffixAr} onChange={(v) => patch({ titleSuffixAr: v })} />
          <Field label="Title suffix (EN)" value={content.titleSuffixEn} onChange={(v) => patch({ titleSuffixEn: v })} dir="ltr" />
          <div className="lg:col-span-2">
            <Area label="الوصف (عربي)" value={content.subtitleAr} onChange={(v) => patch({ subtitleAr: v })} rows={3} />
          </div>
          <div className="lg:col-span-2">
            <Area label="Subtitle (EN)" value={content.subtitleEn} onChange={(v) => patch({ subtitleEn: v })} rows={3} dir="ltr" />
          </div>
          <Field label="زر الطلب (عربي)" value={content.ctaPrimaryAr} onChange={(v) => patch({ ctaPrimaryAr: v })} />
          <Field label="Primary CTA (EN)" value={content.ctaPrimaryEn} onChange={(v) => patch({ ctaPrimaryEn: v })} dir="ltr" />
          <Field label="الزر الثاني (عربي)" value={content.ctaSecondaryAr} onChange={(v) => patch({ ctaSecondaryAr: v })} />
          <Field label="Secondary CTA (EN)" value={content.ctaSecondaryEn} onChange={(v) => patch({ ctaSecondaryEn: v })} dir="ltr" />
        </div>
      </div>

      {/* Slides */}
      <div className="rounded-2xl border border-black/10 bg-white p-6">
        <div className="mb-4 flex items-center justify-between gap-3">
          <div>
            <h3 className="font-bold text-[#1A1A1A]">صور الهيرو المتحركة</h3>
            <p className="mt-1 text-xs text-[#8A8A8A]">تُعرض بالتناوب تلقائياً كخلفية للقسم الأول.</p>
          </div>
          <button
            type="button"
            onClick={addSlide}
            className="flex shrink-0 items-center gap-1.5 rounded-lg border border-dashed border-black/20 px-3 py-1.5 text-xs font-semibold text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
          >
            <Plus size={14} /> إضافة صورة
          </button>
        </div>

        <div className="space-y-4">
          {content.slides.map((s, i) => (
            <div key={s.id} className="rounded-xl border border-black/10 bg-[#FAFAF8] p-4">
              <div className="mb-3 flex items-center justify-between">
                <span className="font-mono text-[11px] text-[#B0B0B0]">الشريحة #{i + 1}</span>
                <div className="flex items-center gap-1">
                  <button type="button" onClick={() => moveSlide(i, "up")} disabled={i === 0} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-black/5 hover:text-[#1A1A1A] disabled:opacity-30" aria-label="لأعلى">
                    <ChevronUp size={15} />
                  </button>
                  <button type="button" onClick={() => moveSlide(i, "down")} disabled={i === content.slides.length - 1} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-black/5 hover:text-[#1A1A1A] disabled:opacity-30" aria-label="لأسفل">
                    <ChevronDown size={15} />
                  </button>
                  <button type="button" onClick={() => removeSlide(i)} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-red-50 hover:text-red-600" aria-label="حذف">
                    <Trash2 size={15} />
                  </button>
                </div>
              </div>

              <div className="flex flex-col gap-3 sm:flex-row">
                <ImagePicker url={s.imageUrl} onPick={(file) => handleUpload(i, file)} isPending={isPending} />
                <div className="grid flex-1 gap-3 sm:grid-cols-2">
                  <Field label="رابط الصورة" value={s.imageUrl} onChange={(v) => patchSlide(i, { imageUrl: v })} dir="ltr" className="sm:col-span-2" />
                  <Field label="وصف (عربي)" value={s.altAr || ""} onChange={(v) => patchSlide(i, { altAr: v })} />
                  <Field label="Alt (EN)" value={s.altEn || ""} onChange={(v) => patchSlide(i, { altEn: v })} dir="ltr" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Stats */}
      <div className="rounded-2xl border border-black/10 bg-white p-6">
        <div className="mb-4 flex items-center justify-between gap-3">
          <div>
            <h3 className="font-bold text-[#1A1A1A]">إحصائيات سريعة أسفل الهيرو</h3>
            <p className="mt-1 text-xs text-[#8A8A8A]">أرقام مختصرة تعطي الزائر ثقة فورية.</p>
          </div>
          <button
            type="button"
            onClick={addStat}
            className="flex shrink-0 items-center gap-1.5 rounded-lg border border-dashed border-black/20 px-3 py-1.5 text-xs font-semibold text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
          >
            <Plus size={14} /> إضافة إحصائية
          </button>
        </div>

        <div className="space-y-4">
          {content.stats.map((stat, i) => (
            <div key={stat.id} className="rounded-xl border border-black/10 bg-[#FAFAF8] p-4">
              <div className="mb-3 flex items-center justify-between">
                <span className="font-mono text-[11px] text-[#B0B0B0]">#{i + 1}</span>
                <div className="flex items-center gap-1">
                  <button type="button" onClick={() => moveStat(i, "up")} disabled={i === 0} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-black/5 hover:text-[#1A1A1A] disabled:opacity-30" aria-label="لأعلى">
                    <ChevronUp size={15} />
                  </button>
                  <button type="button" onClick={() => moveStat(i, "down")} disabled={i === content.stats.length - 1} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-black/5 hover:text-[#1A1A1A] disabled:opacity-30" aria-label="لأسفل">
                    <ChevronDown size={15} />
                  </button>
                  <button type="button" onClick={() => removeStat(i)} className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-red-50 hover:text-red-600" aria-label="حذف">
                    <Trash2 size={15} />
                  </button>
                </div>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                <div>
                  <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">الأيقونة</label>
                  <select
                    value={stat.icon}
                    onChange={(e) => patchStat(i, { icon: e.target.value as HeroStatIcon })}
                    className="w-full rounded-lg border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
                  >
                    {STAT_ICONS.map((name) => (
                      <option key={name} value={name}>
                        {name}
                      </option>
                    ))}
                  </select>
                </div>
                <div />
                <Field label="النص (عربي)" value={stat.ar} onChange={(v) => patchStat(i, { ar: v })} />
                <Field label="Text (EN)" value={stat.en} onChange={(v) => patchStat(i, { en: v })} dir="ltr" />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={handleSave}
          disabled={isPending}
          className="rounded-lg bg-[#1A1A1A] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-black disabled:opacity-60"
        >
          {isPending ? "جارِ الحفظ..." : "حفظ صفحة الهيرو"}
        </button>
        {message && (
          <span className={`text-xs ${message.includes("✓") ? "text-emerald-600" : "text-red-500"}`}>{message}</span>
        )}
      </div>
    </div>
  );
}

function ImagePicker({
  url,
  onPick,
  isPending,
}: {
  url: string;
  onPick: (file: File | null) => void;
  isPending: boolean;
}) {
  return (
    <div className="flex w-full shrink-0 flex-col items-center gap-2 sm:w-36">
      <div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-lg border border-black/10 bg-white">
        {url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={url} alt="" className="h-full w-full object-cover" />
        ) : (
          <span className="text-[10px] text-[#B0B0B0]">لا توجد صورة</span>
        )}
      </div>
      <label className="flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-[#1A1A1A] px-3 py-1.5 text-[11px] font-semibold text-white transition hover:bg-black">
        <Upload size={12} />
        {isPending ? "جارِ الرفع..." : "رفع صورة"}
        <input type="file" accept="image/*" className="hidden" disabled={isPending} onChange={(e) => onPick(e.target.files?.[0] || null)} />
      </label>
    </div>
  );
}

function Field({
  label,
  value,
  onChange,
  dir,
  className,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  dir?: "ltr" | "rtl";
  className?: string;
}) {
  return (
    <div className={className}>
      <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">{label}</label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        dir={dir}
        className="w-full rounded-lg border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
      />
    </div>
  );
}

function Area({
  label,
  value,
  onChange,
  dir,
  rows = 2,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  dir?: "ltr" | "rtl";
  rows?: number;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">{label}</label>
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        dir={dir}
        rows={rows}
        className="w-full resize-none rounded-lg border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
      />
    </div>
  );
}