"use client";

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

const emptyService: ServiceItem = { icon: "Sparkles", title: "", titleEn: "", description: "", descriptionEn: "" };

export default function ServicesEditor({ services }: { services: ServiceItem[] }) {
  const [items, setItems] = useState<ServiceItem[]>(services.length ? services : [{ ...emptyService }]);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

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

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

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

  function handleSave() {
    setMessage(null);
    startTransition(async () => {
      const result = await updateSiteSetting("services", 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]">كروت قسم &quot;خدماتنا المتميزة&quot; بالصفحة الرئيسية.</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((s, 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="اسم الأيقونة (lucide-react)" value={s.icon} onChange={(v) => update(i, { icon: v })} dir="ltr" />
              <div />
              <TextField label="العنوان (عربي)" value={s.title} onChange={(v) => update(i, { title: v })} />
              <TextField label="Title (EN)" value={s.titleEn || ""} onChange={(v) => update(i, { titleEn: v })} dir="ltr" />
              <div className="sm:col-span-2">
                <TextField label="الوصف (عربي)" value={s.description} onChange={(v) => update(i, { description: v })} textarea />
              </div>
              <div className="sm:col-span-2">
                <TextField label="Description (EN)" value={s.descriptionEn || ""} onChange={(v) => update(i, { descriptionEn: v })} textarea dir="ltr" />
              </div>
            </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,
  textarea,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  dir?: "ltr" | "rtl";
  textarea?: boolean;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">{label}</label>
      {textarea ? (
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          dir={dir}
          rows={2}
          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]"
        />
      ) : (
        <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>
  );
}