import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { LangSwitch } from "@/components/shared/LangSwitch";
import { Plus, LogOut, Car, Trash2 } from "lucide-react";

export const Route = createFileRoute("/app/profile")({
  head: () => ({ meta: [{ title: "Profil — Al-Arabat" }] }),
  component: ProfilePage,
});

type Vehicle = { id: string; label: string; plate: string };

function ProfilePage() {
  const { t } = useLang();
  const [vehicles, setVehicles] = useState<Vehicle[]>([
    { id: "v1", label: "Renault Symbol 2018", plate: "16-11223-115" },
    { id: "v2", label: "Peugeot 208 2020", plate: "16-22334-115" },
  ]);
  const [showAdd, setShowAdd] = useState(false);
  const [label, setLabel] = useState("");
  const [plate, setPlate] = useState("");

  return (
    <div className="mx-auto max-w-2xl px-4 py-8 md:px-8 md:py-12">
      <h1 className="font-display text-3xl uppercase md:text-4xl">{t("Profil", "الملف")}</h1>

      <section className="mt-6 border-2 border-ink bg-white p-6">
        <div className="flex items-center gap-4">
          <div className="grid size-14 place-items-center rounded-full bg-brand font-display text-2xl text-ink">A</div>
          <div>
            <div className="font-display text-xl uppercase">Amina Larbi</div>
            <div className="text-sm text-ink/60">0555 44 55 66 · Alger</div>
          </div>
        </div>
      </section>

      <section className="mt-6">
        <div className="mb-3 flex items-center justify-between">
          <h2 className="font-display text-xl uppercase">{t("Mes véhicules", "مركباتي")}</h2>
          <button onClick={() => setShowAdd((s) => !s)} className="flex items-center gap-1 text-xs font-bold uppercase tracking-widest text-terracotta">
            <Plus className="h-4 w-4" /> {t("Ajouter", "إضافة")}
          </button>
        </div>
        {showAdd && (
          <div className="mb-3 border-2 border-ink bg-white p-4">
            <div className="grid gap-2 sm:grid-cols-2">
              <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Marque Modèle Année" className="border-2 border-ink bg-sand p-2 outline-none" />
              <input value={plate} onChange={(e) => setPlate(e.target.value)} placeholder="Immatriculation" className="border-2 border-ink bg-sand p-2 outline-none" />
            </div>
            <button
              onClick={() => {
                if (!label) return;
                setVehicles((v) => [...v, { id: crypto.randomUUID(), label, plate }]);
                setLabel(""); setPlate(""); setShowAdd(false);
              }}
              className="mt-3 bg-ink px-4 py-2 text-xs font-bold uppercase text-brand"
            >{t("Enregistrer", "حفظ")}</button>
          </div>
        )}
        <ul className="space-y-2">
          {vehicles.map((v) => (
            <li key={v.id} className="flex items-center justify-between border-2 border-ink bg-white p-4">
              <div className="flex items-center gap-3">
                <Car className="h-5 w-5 text-terracotta" />
                <div>
                  <div className="font-bold">{v.label}</div>
                  <div className="text-xs text-ink/50">{v.plate}</div>
                </div>
              </div>
              <button onClick={() => setVehicles((xs) => xs.filter((x) => x.id !== v.id))} className="text-ink/40 hover:text-terracotta">
                <Trash2 className="h-4 w-4" />
              </button>
            </li>
          ))}
        </ul>
      </section>

      <section className="mt-6 border-2 border-ink bg-white p-6">
        <div className="flex items-center justify-between">
          <div>
            <div className="font-display text-lg uppercase">{t("Langue", "اللغة")}</div>
            <div className="text-sm text-ink/60">{t("Français / العربية", "الفرنسية / العربية")}</div>
          </div>
          <LangSwitch />
        </div>
      </section>

      <Link to="/login" className="mt-6 flex items-center justify-center gap-2 border-2 border-ink bg-ink py-4 font-bold uppercase text-brand">
        <LogOut className="h-4 w-4" /> {t("Se déconnecter", "تسجيل الخروج")}
      </Link>
    </div>
  );
}