"use client";

import { useState, useTransition } from "react";
import { updateSiteSetting } from "@/lib/content-actions";
import { Plus, Trash2 } from "lucide-react";
import type { Branch } from "@/lib/data/types";

const emptyBranch: Branch = { city: "", region: "", whatsapp: "", phone: "", hours: "", cityEn: "", regionEn: "", hoursEn: "" };

export default function BranchesEditor({ branches }: { branches: Branch[] }) {
  const [items, setItems] = useState<Branch[]>(branches.length ? branches : [{ ...emptyBranch }]);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

  function update(i: number, patch: Partial<Branch>) {
    setItems((prev) => prev.map((b, idx) => (idx === i ? { ...b, ...patch } : b)));
  }

  function addItem() {
    setItems((prev) => [...prev, { ...emptyBranch }]);
  }

  function removeItem(i: number) {
    if (!confirm("حذف هذا الفرع؟")) return;
    setItems((prev) => prev.filter((_, idx) => idx !== i));
  }

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

  return (
    <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={addItem}
          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">
        {items.map((b, i) => (
          <div key={i} 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>
              <button
                type="button"
                onClick={() => removeItem(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 className="grid gap-3 sm:grid-cols-2">
              <TextField label="المدينة" value={b.city} onChange={(v) => update(i, { city: v })} />
              <TextField label="City (EN)" value={b.cityEn || ""} onChange={(v) => update(i, { cityEn: v })} dir="ltr" />
              <TextField label="المنطقة" value={b.region} onChange={(v) => update(i, { region: v })} />
              <TextField label="Region (EN)" value={b.regionEn || ""} onChange={(v) => update(i, { regionEn: v })} dir="ltr" />
              <TextField label="رقم الهاتف" value={b.phone} onChange={(v) => update(i, { phone: v })} dir="ltr" />
              <TextField label="رقم واتساب" value={b.whatsapp} onChange={(v) => update(i, { whatsapp: v })} dir="ltr" />
              <TextField label="ساعات العمل (عربي)" value={b.hours} onChange={(v) => update(i, { hours: v })} />
              <TextField label="Hours (EN)" value={b.hoursEn || ""} onChange={(v) => update(i, { hoursEn: v })} dir="ltr" />
            </div>
          </div>
        ))}
      </div>

      <div className="mt-4 flex items-center gap-3">
        <button
          onClick={handleSave}
          disabled={isPending}
          className="rounded-lg bg-[#1A1A1A] px-4 py-2 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 TextField({
  label,
  value,
  onChange,
  dir,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  dir?: "ltr" | "rtl";
}) {
  return (
    <div>
      <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>
  );
}