import { getLoginUrl } from "@/const";
import { useLocation } from "wouter";
import { KeyRound, ExternalLink } from "lucide-react";

const FEHAP_LOGO = "/logoFEHAP.PNG";
const SANTINOVA_LOGO_TEXT = "Santinova Soft";

export default function Login() {
  const [, navigate] = useLocation();

  return (
    <div className="min-h-screen flex bg-background">
      {/* ── Colonne gauche : branding SONUM ── */}
      <div className="hidden lg:flex flex-col justify-between w-1/2 bg-primary px-14 py-12">
        <div>
          {/* Logo FEHAP */}
          <img
            src={FEHAP_LOGO}
            alt="FEHAP – Santé Social, Privé Solidaire"
            className="h-16 object-contain bg-white rounded-xl px-3 py-2 shadow"
          />
        </div>

        <div className="text-white">
          <h1 className="text-5xl font-bold mb-4" style={{ fontFamily: "'Playfair Display', serif" }}>
            SONUM
          </h1>
          <p className="text-lg text-white/80 max-w-sm leading-relaxed">
            Cartographie des Solutions Numériques des établissements FEHAP
          </p>
          <div className="mt-8 space-y-3 text-sm text-white/70">
            <div className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-white/50" />
              Référencement des logiciels métiers
            </div>
            <div className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-white/50" />
              Cartographie par établissement et région
            </div>
            <div className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-white/50" />
              Mise en relation entre adhérents
            </div>
          </div>
        </div>

        <div className="text-white/40 text-xs">
          © {new Date().getFullYear()} FEHAP — Tous droits réservés
        </div>
      </div>

      {/* ── Colonne droite : formulaire de connexion ── */}
      <div className="flex flex-col justify-between flex-1 px-8 py-12 lg:px-16">
        {/* Logo FEHAP en haut (mobile + desktop) */}
        <div className="flex justify-center lg:justify-end">
          <img
            src={FEHAP_LOGO}
            alt="FEHAP"
            className="h-12 object-contain bg-white rounded-lg px-2 py-1 shadow-sm border border-border"
          />
        </div>

        {/* Formulaire centré */}
        <div className="w-full max-w-sm mx-auto">
          {/* Titre mobile */}
          <div className="text-center mb-8 lg:hidden">
            <h1 className="text-3xl font-bold text-primary" style={{ fontFamily: "'Playfair Display', serif" }}>
              SONUM
            </h1>
            <p className="text-sm text-muted-foreground mt-1">
              Cartographie des Solutions Numériques
            </p>
          </div>

          <h2 className="text-2xl font-semibold text-foreground mb-2">Connexion</h2>
          <p className="text-sm text-muted-foreground mb-8">
            Choisissez votre mode d'authentification
          </p>

          <div className="space-y-4">
            {/* Connexion via espace adhérent FEHAP */}
            <a
              href={getLoginUrl()}
              className="group flex items-center gap-4 p-5 bg-primary text-white rounded-2xl shadow-md hover:bg-primary/90 transition-all hover:shadow-lg hover:-translate-y-0.5"
            >
              <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center flex-shrink-0">
                <ExternalLink size={20} className="text-white" />
              </div>
              <div className="flex-1 text-left">
                <div className="font-semibold text-base">Espace adhérent FEHAP</div>
                <div className="text-sm text-white/75 mt-0.5">
                  Connexion via votre compte FEHAP existant
                </div>
              </div>
              <span className="text-white/50 group-hover:text-white/80 transition-colors text-lg">→</span>
            </a>

            {/* Séparateur */}
            <div className="flex items-center gap-3 py-1">
              <div className="flex-1 h-px bg-border" />
              <span className="text-xs text-muted-foreground font-medium">ou</span>
              <div className="flex-1 h-px bg-border" />
            </div>

            {/* Connexion locale */}
            <button
              onClick={() => navigate("/login/local")}
              className="group w-full flex items-center gap-4 p-5 bg-card border border-border rounded-2xl shadow-sm hover:border-primary/40 hover:shadow-md transition-all hover:-translate-y-0.5 text-left"
            >
              <div className="w-10 h-10 rounded-xl bg-muted flex items-center justify-center flex-shrink-0">
                <KeyRound size={20} className="text-muted-foreground" />
              </div>
              <div className="flex-1">
                <div className="font-semibold text-base text-foreground">Connexion locale</div>
                <div className="text-sm text-muted-foreground mt-0.5">
                  Identifiant / email et mot de passe
                </div>
              </div>
              <span className="text-muted-foreground group-hover:text-primary transition-colors text-lg">→</span>
            </button>
          </div>

          <p className="text-center text-xs text-muted-foreground mt-8">
            En vous connectant, vous acceptez les conditions générales d'utilisation de la plateforme SONUM.
          </p>
        </div>

        {/* Pied de page : powered by Santinova */}
        <div className="flex justify-center lg:justify-end items-center gap-2 mt-8">
          <span className="text-xs text-muted-foreground">powered by</span>
          <span className="text-xs font-semibold text-foreground/70">{SANTINOVA_LOGO_TEXT}</span>
        </div>
      </div>
    </div>
  );
}