import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { SERVICES, WILAYAS } from "@/lib/mock/data";
import { X, Plus, Trash2 } from "lucide-react";

export const Route = createFileRoute("/admin/settings")({
  head: () => ({ meta: [{ title: "Réglages — Admin Al-Arabat" }] }),
  component: SettingsPage,
});

function SettingsPage() {
  const { t } = useLang();
  const [prices, setPrices] = useState<Record<string, number>>({
    remorquage: 4500, assistance: 2200, carburant: 1800, concessionnaire: 8500,
  });
  const [wilayas, setWilayas] = useState<string[]>(WILAYAS);
  const [newW, setNewW] = useState("");
  const [faqs, setFaqs] = useState([
    { q: "Comment payer ?", a: "Uniquement en espèces au chauffeur." },
    { q: "Voitures de luxe ?", a: "Sur demande via plateau spécifique." },
  ]);

  return (
    <div className="p-4 md:p-8">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Réglages", "الإعدادات")}</h1>

      <section className="mt-8">
        <h2 className="font-display text-xl uppercase">{t("Tarifs de base", "الأسعار الأساسية")}</h2>
        <div className="mt-4 grid gap-3 md:grid-cols-2">
          {SERVICES.map((s) => (
            <label key={s.key} className="flex items-center justify-between gap-3 border-2 border-ink bg-white p-3">
              <span className="font-bold">{t(s.fr, s.ar)}</span>
              <div className="flex items-center gap-2">
                <input
                  type="number"
                  value={prices[s.key]}
                  onChange={(e) => setPrices((p) => ({ ...p, [s.key]: Number(e.target.value) }))}
                  className="w-28 border-2 border-ink bg-sand p-2 text-end"
                />
                <span className="text-xs font-bold">DZD</span>
              </div>
            </label>
          ))}
        </div>
      </section>

      <section className="mt-10">
        <h2 className="font-display text-xl uppercase">{t("Wilayas couvertes", "الولايات المشمولة")}</h2>
        <div className="mt-4 flex flex-wrap gap-2">
          {wilayas.map((w) => (
            <span key={w} className="flex items-center gap-1 border-2 border-ink bg-white px-3 py-1 text-sm">
              {w}
              <button onClick={() => setWilayas((xs) => xs.filter((x) => x !== w))} className="text-ink/50 hover:text-terracotta">
                <X className="h-3.5 w-3.5" />
              </button>
            </span>
          ))}
        </div>
        <div className="mt-4 flex gap-2">
          <input
            value={newW}
            onChange={(e) => setNewW(e.target.value)}
            placeholder={t("Ajouter une wilaya", "إضافة ولاية")}
            className="flex-1 border-2 border-ink bg-white p-2 text-sm md:max-w-xs"
          />
          <button
            onClick={() => { if (newW && !wilayas.includes(newW)) { setWilayas([...wilayas, newW]); setNewW(""); } }}
            className="flex items-center gap-1 bg-ink px-4 py-2 text-xs font-bold uppercase text-brand"
          >
            <Plus className="h-4 w-4" /> {t("Ajouter", "إضافة")}
          </button>
        </div>
      </section>

      <section className="mt-10">
        <h2 className="font-display text-xl uppercase">{t("FAQ", "الأسئلة الشائعة")}</h2>
        <ul className="mt-4 space-y-3">
          {faqs.map((f, i) => (
            <li key={i} className="border-2 border-ink bg-white p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1 space-y-2">
                  <input value={f.q} onChange={(e) => setFaqs((xs) => xs.map((x, k) => k === i ? { ...x, q: e.target.value } : x))} className="w-full border-b border-ink/20 pb-1 font-bold outline-none focus:border-terracotta" />
                  <textarea value={f.a} onChange={(e) => setFaqs((xs) => xs.map((x, k) => k === i ? { ...x, a: e.target.value } : x))} rows={2} className="w-full bg-sand p-2 text-sm outline-none" />
                </div>
                <button onClick={() => setFaqs((xs) => xs.filter((_, k) => k !== i))} className="text-ink/40 hover:text-terracotta">
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </li>
          ))}
        </ul>
        <button
          onClick={() => setFaqs((f) => [...f, { q: "Nouvelle question ?", a: "Réponse." }])}
          className="mt-3 flex items-center gap-1 border-2 border-ink px-3 py-2 text-xs font-bold uppercase tracking-widest"
        >
          <Plus className="h-4 w-4" /> {t("Ajouter une question", "إضافة سؤال")}
        </button>
      </section>

      <button className="mt-10 bg-brand px-8 py-4 font-bold uppercase text-ink shadow-[6px_6px_0_0_hsl(220_15%_10%)]">
        {t("Enregistrer les modifications", "حفظ التغييرات")}
      </button>
    </div>
  );
}