"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Save, UserCheck, UserX, ArrowLeft } from "lucide-react";
import PageHeader from "@/components/admin/ui/PageHeader";
import Card from "@/components/admin/ui/Card";
import Input from "@/components/admin/ui/Input";
import Button from "@/components/admin/ui/Button";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import Checkbox from "@/components/admin/ui/Checkbox";
import { PageLoader } from "@/components/admin/ui/Loader";
import ConfirmDialog from "@/components/admin/ui/ConfirmDialog";
import { toast } from "sonner";
import { getClient, updateClient } from "@/lib/api/admin/clients";
import type { AdminUser } from "@/types/admin";
import styles from "./page.module.css";

export default function DetailClientPage() {
  const { uid } = useParams<{ uid: string }>();
  const router = useRouter();
  const [client, setClient] = useState<AdminUser | null>(null);
  const [nom, setNom] = useState("");
  const [telephone, setTelephone] = useState("");
  const [actif, setActif] = useState(true);
  const [chargement, setChargement] = useState(true);
  const [enregistrement, setEnregistrement] = useState(false);
  const [confirmDesactivation, setConfirmDesactivation] = useState(false);

  useEffect(() => {
    getClient(uid)
      .then((res) => {
        setClient(res);
        setNom(res.nom);
        setTelephone(res.telephone || "");
        setActif(res.actif);
      })
      .catch(() => toast.error("Impossible de charger les données du client."))
      .finally(() => setChargement(false));
  }, [uid]);

  const enregistrerModifications = async () => {
    if (!client) return;
    setEnregistrement(true);
    try {
      const maj = await updateClient(client.uid, { nom, telephone, actif });
      setClient(maj);
      toast.success("Informations client mises à jour avec succès !");
    } catch {
      toast.error("Erreur lors de la mise à jour.");
    } finally {
      setEnregistrement(false);
    }
  };

  const basculerStatut = async () => {
    if (!client) return;
    setEnregistrement(true);
    try {
      const nouveauStatut = !client.actif;
      const maj = await updateClient(client.uid, { actif: nouveauStatut });
      setClient(maj);
      setActif(nouveauStatut);
      setConfirmDesactivation(false);
      toast.success(nouveauStatut ? "Compte client réactivé !" : "Compte client désactivé !");
    } catch {
      toast.error("Erreur lors de la modification du statut.");
    } finally {
      setEnregistrement(false);
    }
  };

  if (chargement) return <PageLoader />;
  if (!client) return <div>Utilisateur introuvable.</div>;

  return (
    <div className={styles.page}>
      <PageHeader
        title={client.nom}
        subtitle={`Compte ${client.type} — Inscrit le ${new Date(client.createdAt).toLocaleDateString("fr-FR")}`}
        actions={
          <Button variant="secondaire" onClick={() => router.push("/admin/clients")}>
            <ArrowLeft size={16} />
            Retour à la liste
          </Button>
        }
      />

      <div className={styles.grille}>
        <Card title="Informations du compte">
          <dl className={styles.infos}>
            <div>
              <dt>ID Public (UUID)</dt>
              <dd style={{ fontFamily: "monospace", fontSize: "11px" }}>{client.uid}</dd>
            </div>
            <div>
              <dt>Adresse e-mail</dt>
              <dd>{client.email}</dd>
            </div>
            <div>
              <dt>Type de compte</dt>
              <dd>{client.type}</dd>
            </div>
            <div>
              <dt>Rôles</dt>
              <dd>{client.roles.join(", ")}</dd>
            </div>
            <div>
              <dt>Statut actuel</dt>
              <dd>
                <StatusBadge status={client.actif ? "ACTIF" : "INACTIF"} />
              </dd>
            </div>
          </dl>
        </Card>

        <Card title="Modifier les coordonnées">
          <div className={styles.formulaire}>
            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Nom complet</label>
              <Input value={nom} onChange={(e) => setNom(e.target.value)} />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Téléphone</label>
              <Input value={telephone} onChange={(e) => setTelephone(e.target.value)} />
            </div>

            <div style={{ marginTop: "8px" }}>
              <Checkbox
                checked={actif}
                onChange={setActif}
                label="Compte actif (accès autorisé)"
              />
            </div>

            <div style={{ marginTop: "16px", borderTop: "1px solid var(--gris-clair)", paddingTop: "16px" }}>
              {client.actif ? (
                <Button variant="danger" size="sm" onClick={() => setConfirmDesactivation(true)}>
                  <UserX size={16} />
                  Désactiver ce compte
                </Button>
              ) : (
                <Button variant="primaire" size="sm" onClick={basculerStatut}>
                  <UserCheck size={16} />
                  Réactiver ce compte
                </Button>
              )}
            </div>
          </div>
        </Card>
      </div>

      <div className={styles.actionFlottante}>
        <Button onClick={enregistrerModifications} loading={enregistrement} size="lg">
          <Save size={16} />
          Enregistrer les modifications
        </Button>
      </div>

      <ConfirmDialog
        open={confirmDesactivation}
        title="Désactiver ce compte ?"
        description="L'utilisateur ne pourra plus se connecter ni passer de commande sur la plateforme."
        confirmLabel="Désactiver"
        danger
        onConfirm={basculerStatut}
        onCancel={() => setConfirmDesactivation(false)}
      />
    </div>
  );
}