import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useLang } from "@/lib/language";
import { LangSwitch } from "@/components/shared/LangSwitch";
import { User, Truck, ArrowLeft, KeyRound } from "lucide-react";

export const Route = createFileRoute("/login")({
  head: () => ({
    meta: [
      { title: "Connexion — Al-Arabat" },
      { name: "description", content: "Accéder à Al-Arabat en tant qu'utilisateur ou chauffeur." },
    ],
  }),
  component: LoginPage,
});

function LoginPage() {
  const { t } = useLang();
  const navigate = useNavigate();
  const [selectedRole, setSelectedRole] = useState<"user" | "driver" | null>(null);
  
  // Login form state
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!phone) return;

    try {
      localStorage.setItem("al-arabat-role", selectedRole!);
      if (name) {
        localStorage.setItem("al-arabat-user-name", name);
      }
    } catch {}

    const targetRoute = selectedRole === "user" ? "/app" : "/driver";
    navigate({ to: targetRoute });
  };

  const roles = [
    { role: "user" as const, icon: User, fr: "Utilisateur", ar: "مستخدم", desc: ["Demandez de l'aide en 3 étapes.", "اطلب المساعدة في 3 خطوات."] },
    { role: "driver" as const, icon: Truck, fr: "Chauffeur", ar: "سائق", desc: ["Recevez des missions près de vous.", "استقبل المهام بالقرب منك."] },
  ];

  return (
    <div className="min-h-screen bg-sand font-body text-ink">
      <header className="flex items-center justify-between border-b border-ink/15 px-4 py-3 md:px-8">
        <Link to="/" className="font-display text-2xl uppercase tracking-tight">Al-Arabat</Link>
        <LangSwitch />
      </header>
      <main className="mx-auto max-w-xl px-4 py-16 md:px-8">
        {!selectedRole ? (
          <div className="animate-reveal">
            <span className="text-xs font-bold uppercase tracking-[0.25em] text-terracotta">
              {t("Connexion", "الدخول")}
            </span>
            <h1 className="mt-2 font-display text-4xl uppercase leading-none tracking-tight md:text-6xl">
              {t("Entrez dans Al-Arabat", "ادخل إلى العربات")}
            </h1>
            <p className="mt-4 max-w-lg text-ink/70">
              {t(
                "Choisissez votre type de compte pour vous connecter.",
                "اختر نوع حسابك لتسجيل الدخول."
              )}
            </p>
            <p className="mt-2 text-sm">
              <span className="text-ink/60">{t("Nouveau sur Al-Arabat ?", "جديد في العربات؟")} </span>
              <Link to="/signup" className="font-bold text-terracotta hover:underline">
                {t("Créer un compte", "إنشاء حساب")}
              </Link>
            </p>
            <div className="mt-8 grid gap-4 md:grid-cols-2">
              {roles.map((r) => (
                <button
                  key={r.role}
                  onClick={() => setSelectedRole(r.role)}
                  className="group border-2 border-ink bg-white p-6 text-start transition-transform hover:-translate-y-1 hover:shadow-[8px_8px_0_0_hsl(45_95%_50%)]"
                >
                  <r.icon className="h-8 w-8 text-terracotta" />
                  <div className="mt-4 font-display text-2xl uppercase">{t(r.fr, r.ar)}</div>
                  <p className="mt-2 text-sm text-ink/60">{t(r.desc[0], r.desc[1])}</p>
                  <span className="mt-6 inline-block text-xs font-bold uppercase tracking-widest group-hover:text-terracotta">
                    {t("Continuer", "متابعة")} →
                  </span>
                </button>
              ))}
            </div>
          </div>
        ) : (
          <div className="animate-reveal">
            <button
              onClick={() => setSelectedRole(null)}
              className="mb-6 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-ink/60 hover:text-ink"
            >
              <ArrowLeft className="h-4 w-4" /> {t("Retour", "رجوع")}
            </button>

            <span className="text-xs font-bold uppercase tracking-[0.25em] text-terracotta">
              {selectedRole === "user" ? t("Espace Utilisateur", "فضاء المستخدم") : t("Espace Chauffeur", "فضاء السائق")}
            </span>
            <h1 className="mt-2 font-display text-4xl uppercase leading-none tracking-tight">
              {t("Se connecter", "تسجيل الدخول")}
            </h1>
            <p className="mt-2 text-sm text-ink/60">
              {t(
                "Entrez vos coordonnées pour accéder à votre espace.",
                "أدخل معلوماتك للوصول إلى حسابك."
              )}
            </p>

            <form onSubmit={handleLogin} className="mt-8 space-y-4">
              <div>
                <label className="block text-xs font-bold uppercase tracking-widest">
                  {t("Numéro de téléphone", "رقم الهاتف")}
                </label>
                <input
                  type="tel"
                  required
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  placeholder="0555 00 00 00"
                  className="mt-2 w-full border-2 border-ink bg-white p-3 outline-none focus:border-terracotta"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-widest">
                  {t("Nom d'utilisateur (Optionnel)", "الاسم (اختياري)")}
                </label>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder={t("Ex: Ahmed", "مثال: أحمد")}
                  className="mt-2 w-full border-2 border-ink bg-white p-3 outline-none focus:border-terracotta"
                />
              </div>

              <button
                type="submit"
                className="mt-6 w-full bg-ink py-4 font-bold uppercase text-brand shadow-[6px_6px_0_0_hsl(45_95%_50%)] hover:bg-ink/90 active:translate-x-1 active:translate-y-1 active:shadow-none transition-all"
              >
                {t("Se connecter", "تسجيل الدخول")}
              </button>
            </form>
          </div>
        )}
      </main>
    </div>
  );
}