"use client";

import { useEffect, useState } from "react";
import { User as UserIcon, Lock } 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 PasswordInput from "@/components/admin/ui/PasswordInput";
import Button from "@/components/admin/ui/Button";
import Tabs from "@/components/admin/ui/Tabs";
import { PageLoader } from "@/components/admin/ui/Loader";
import { getMonProfil, mettreAJourMonProfil, changerMonMotDePasse } from "@/lib/api/compte";
import { useAuthStore } from "@/store/auth";
import type { User } from "@/types/auth";
import { isAxiosError } from "axios";
import styles from "./page.module.css";

const TYPE_LABELS: Record<string, string> = {
  ADMIN: "Administrateur",
  COMMERCIAL: "Commercial",
  ANNONCEUR: "Annonceur",
  POINT_DE_VENTE: "Point de vente",
};

export default function ProfilPage() {
  const connecte = useAuthStore((state) => state.connecte);
  const token = useAuthStore((state) => state.token);
  const refreshToken = useAuthStore((state) => state.refreshToken);

  const [profil, setProfil] = useState<User | null>(null);
  const [chargement, setChargement] = useState(true);
  const [ongletActif, setOngletActif] = useState("infos");

  const [nom, setNom] = useState("");
  const [telephone, setTelephone] = useState("");
  const [enregistrementInfos, setEnregistrementInfos] = useState(false);
  const [messageInfos, setMessageInfos] = useState<{ type: "succes" | "erreur"; texte: string } | null>(null);

  const [motDePasseActuel, setMotDePasseActuel] = useState("");
  const [nouveauMotDePasse, setNouveauMotDePasse] = useState("");
  const [confirmationMotDePasse, setConfirmationMotDePasse] = useState("");
  const [enregistrementMotDePasse, setEnregistrementMotDePasse] = useState(false);
  const [messageMotDePasse, setMessageMotDePasse] = useState<{ type: "succes" | "erreur"; texte: string } | null>(null);

  useEffect(() => {
    getMonProfil()
      .then((p) => {
        setProfil(p);
        setNom(p.nom);
        setTelephone(p.telephone);
      })
      .finally(() => setChargement(false));
  }, []);

  const initiales = profil?.nom
    ? profil.nom.split(" ").slice(0, 2).map((mot) => mot[0]).join("").toUpperCase()
    : "?";

  const enregistrerInfos = async (e: React.FormEvent) => {
    e.preventDefault();
    setEnregistrementInfos(true);
    setMessageInfos(null);
    try {
      const maj = await mettreAJourMonProfil({ nom, telephone });
      setProfil(maj);
      if (token && refreshToken) connecte({ token, refreshToken, user: maj });
      setMessageInfos({ type: "succes", texte: "Profil mis à jour avec succès." });
    } catch (err) {
      const msg = isAxiosError(err) ? err.response?.data?.message : null;
      setMessageInfos({ type: "erreur", texte: msg || "Impossible de mettre à jour le profil." });
    } finally {
      setEnregistrementInfos(false);
    }
  };

  const enregistrerMotDePasse = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessageMotDePasse(null);

    if (nouveauMotDePasse !== confirmationMotDePasse) {
      setMessageMotDePasse({ type: "erreur", texte: "Les mots de passe ne correspondent pas." });
      return;
    }

    setEnregistrementMotDePasse(true);
    try {
      await changerMonMotDePasse({ motDePasseActuel, nouveauMotDePasse });
      setMotDePasseActuel("");
      setNouveauMotDePasse("");
      setConfirmationMotDePasse("");
      setMessageMotDePasse({ type: "succes", texte: "Mot de passe modifié avec succès." });
    } catch (err) {
      const msg = isAxiosError(err) ? err.response?.data?.message : null;
      setMessageMotDePasse({ type: "erreur", texte: msg || "Impossible de modifier le mot de passe." });
    } finally {
      setEnregistrementMotDePasse(false);
    }
  };

  if (chargement) {
    return (
      <div>
        <PageHeader title="Mon profil" subtitle="Gérez vos informations personnelles et votre sécurité." />
        <PageLoader label="Chargement du profil..." />
      </div>
    );
  }

  if (!profil) return <p>Impossible de charger le profil.</p>;

  return (
    <div>
      <PageHeader title="Mon profil" subtitle="Gérez vos informations personnelles et votre sécurité." />

      <div className={styles.identityCard}>
        <span className={styles.avatar}>{initiales}</span>
        <div>
          <div className={styles.identityNom}>{profil.nom}</div>
          <div className={styles.identityEmail}>{profil.email}</div>
          <div className={styles.badges}>
            <span className={styles.roleBadge}>{TYPE_LABELS[profil.type] ?? profil.type}</span>
          </div>
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <Tabs
          tabs={[
            { value: "infos", label: "Informations", icon: <UserIcon size={16} /> },
            { value: "securite", label: "Sécurité", icon: <Lock size={16} /> },
          ]}
          value={ongletActif}
          onChange={setOngletActif}
        />
      </div>

      {ongletActif === "infos" && (
        <Card title="Informations personnelles">
          <form onSubmit={enregistrerInfos} className={styles.form}>
            <div className={styles.formGrid}>
              <Input label="Nom complet" value={nom} onChange={(e) => setNom(e.target.value)} required />
              <Input label="Téléphone" value={telephone} onChange={(e) => setTelephone(e.target.value)} required />
            </div>
            <Input label="E-mail" value={profil.email} disabled readOnly hint="L'adresse e-mail ne peut pas être modifiée." />

            {messageInfos && (
              <p className={messageInfos.type === "succes" ? styles.succes : styles.erreur}>{messageInfos.texte}</p>
            )}

            <div className={styles.formActions}>
              <Button type="submit" loading={enregistrementInfos}>
                Enregistrer
              </Button>
            </div>
          </form>
        </Card>
      )}

      {ongletActif === "securite" && (
        <Card title="Changer le mot de passe">
          <form onSubmit={enregistrerMotDePasse} className={styles.form}>
            <PasswordInput
              label="Mot de passe actuel"
              value={motDePasseActuel}
              onChange={(e) => setMotDePasseActuel(e.target.value)}
              required
            />
            <div className={styles.formGrid}>
              <PasswordInput
                label="Nouveau mot de passe"
                value={nouveauMotDePasse}
                onChange={(e) => setNouveauMotDePasse(e.target.value)}
                required
              />
              <PasswordInput
                label="Confirmer le mot de passe"
                value={confirmationMotDePasse}
                onChange={(e) => setConfirmationMotDePasse(e.target.value)}
                required
              />
            </div>

            {messageMotDePasse && (
              <p className={messageMotDePasse.type === "succes" ? styles.succes : styles.erreur}>
                {messageMotDePasse.texte}
              </p>
            )}

            <div className={styles.formActions}>
              <Button type="submit" loading={enregistrementMotDePasse}>
                Modifier le mot de passe
              </Button>
            </div>
          </form>
        </Card>
      )}
    </div>
  );
}