"use client";

import { useState, useTransition } from "react";
import { updateSiteSetting } from "@/lib/content-actions";

interface ContactInfo {
  main_phone: string;
  main_whatsapp: string;
  email: string;
  address: string;
}

export default function ContactInfoEditor({ info }: { info: ContactInfo }) {
  const [values, setValues] = useState<ContactInfo>(info);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

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

  return (
    <div className="rounded-2xl border border-black/10 bg-white p-6">
      <h3 className="mb-4 font-bold text-[#1A1A1A]">أرقام وبيانات التواصل الرئيسية</h3>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">رقم الهاتف الموحّد</label>
          <input
            value={values.main_phone}
            onChange={(e) => setValues((v) => ({ ...v, main_phone: e.target.value }))}
            dir="ltr"
            className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
          />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">رقم واتساب الرئيسي</label>
          <input
            value={values.main_whatsapp}
            onChange={(e) => setValues((v) => ({ ...v, main_whatsapp: e.target.value }))}
            dir="ltr"
            placeholder="+9665xxxxxxxx"
            className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
          />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">البريد الإلكتروني</label>
          <input
            value={values.email}
            onChange={(e) => setValues((v) => ({ ...v, email: e.target.value }))}
            dir="ltr"
            className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
          />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">العنوان العام</label>
          <input
            value={values.address}
            onChange={(e) => setValues((v) => ({ ...v, address: e.target.value }))}
            className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
          />
        </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>
      <p className="mt-3 text-xs text-[#8A8A8A]">
        أرقام وواتساب كل فرع على حدة تتحكم فيها من صفحة &quot;إعدادات الموقع&quot; (قسم الفروع).
      </p>
    </div>
  );
}