import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Navbar from '../../components/Navbar';
import { isUserAuthenticated, extractUsernameFromToken, getMyProfile, updateMyProfile, getTelegramStatus, generateTelegramLinkToken, unlinkTelegram, get2FAStatus, toggle2FA, getPublicSettings } from '../../api/api';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faUser, faMapMarkerAlt, faPhone, faCommentDots,
  faSave, faCheckCircle, faExclamationTriangle, faPaperPlane, faUnlink, faTimes, faLock, faShieldAlt,
} from '@fortawesome/free-solid-svg-icons';
import './ProfilePage.css';

const STORAGE_ADDRESS = 'profile_default_address';
const STORAGE_PHONE   = 'profile_default_phone';
const STORAGE_SIGNAL  = 'profile_signal_pseudo';

export default function ProfilePage() {
  const navigate = useNavigate();

  // Données compte (backend)
  const [nom, setNom]           = useState('');
  const [prenom, setPrenom]     = useState('');
  const [telephone, setTelephone] = useState('');
  const [loadingProfile, setLoadingProfile] = useState(true);

  // Données locales (localStorage)
  const [defaultAddress, setDefaultAddress] = useState(() => localStorage.getItem(STORAGE_ADDRESS) ?? '');
  const [defaultPhone, setDefaultPhone]     = useState(() => localStorage.getItem(STORAGE_PHONE) ?? '');
  const [signalPseudo, setSignalPseudo]     = useState(() => localStorage.getItem(STORAGE_SIGNAL) ?? '');

  // Feedback
  const [savingContact, setSavingContact]   = useState(false);
  const [successMsg, setSuccessMsg]         = useState('');
  const [errorMsg, setErrorMsg]             = useState('');

  // Telegram
  const [tgLinked, setTgLinked]     = useState(false);
  const [tgEnabled, setTgEnabled]   = useState(false);
  const [tgLoading, setTgLoading]   = useState(false);

  // 2FA
  const [twoFAEnabled, setTwoFAEnabled]         = useState(false);
  const [twoFAAdminEnabled, setTwoFAAdminEnabled] = useState(false);
  const [twoFALoading, setTwoFALoading]           = useState(false);

  // Modal confirmation infos par défaut
  const [showSaveModal, setShowSaveModal] = useState(false);
  const [showUnlinkModal, setShowUnlinkModal] = useState(false);
  const [showUnlinkSuccessModal, setShowUnlinkSuccessModal] = useState(false);

  const username = extractUsernameFromToken() ?? '';

  useEffect(() => {
    if (!isUserAuthenticated()) {
      navigate('/login/client', { replace: true });
      return;
    }
    // Statut Telegram
    getTelegramStatus().then((s) => { setTgLinked(s.linked); setTgEnabled(s.enabled); });

    // Statut 2FA
    Promise.all([get2FAStatus(), getPublicSettings()]).then(([status, pub]) => {
      setTwoFAEnabled(status.two_fa_enabled);
      setTwoFAAdminEnabled(pub.two_fa_enabled);
    });

    // Charger depuis backend
    getMyProfile().then((res) => {
      if (res.success && res.client) {
        setNom(res.client.nom ?? '');
        setPrenom(res.client.prenom ?? '');
        setTelephone(res.client.telephone ?? '');
        // Initialiser le téléphone par défaut si pas encore défini
        if (!localStorage.getItem(STORAGE_PHONE) && res.client.telephone) {
          setDefaultPhone(res.client.telephone);
        }
      }
      setLoadingProfile(false);
    });
  }, [navigate]);

  const showSuccess = (msg: string) => {
    setSuccessMsg(msg);
    setErrorMsg('');
    setTimeout(() => setSuccessMsg(''), 3000);
  };
  const showError = (msg: string) => {
    setErrorMsg(msg);
    setSuccessMsg('');
    setTimeout(() => setErrorMsg(''), 4000);
  };

  const saveAddress = () => {
    localStorage.setItem(STORAGE_ADDRESS, defaultAddress.trim());
    showSuccess('Adresse par défaut enregistrée');
  };

  const saveLocal = () => {
    localStorage.setItem(STORAGE_ADDRESS, defaultAddress.trim());
    localStorage.setItem(STORAGE_PHONE, defaultPhone.trim());
    localStorage.setItem(STORAGE_SIGNAL, signalPseudo.trim());
    setShowSaveModal(false);
    showSuccess('Informations par défaut enregistrées');
  };

  const handleLinkTelegram = async () => {
    setTgLoading(true);
    const res = await generateTelegramLinkToken();
    setTgLoading(false);
    if (res.error || !res.link_url) {
      showError(res.error || 'Service Telegram non disponible');
      return;
    }
    window.open(res.link_url, '_blank');
  };

  const handleUnlinkTelegram = () => {
    setShowUnlinkModal(true);
  };

  const confirmUnlinkTelegram = async () => {
    setShowUnlinkModal(false);
    await unlinkTelegram();
    setTgLinked(false);
    setTwoFAEnabled(false);
    setShowUnlinkSuccessModal(true);
  };

  const handleToggle2FA = async () => {
    const newVal = !twoFAEnabled;
    setTwoFALoading(true);
    const res = await toggle2FA(newVal);
    setTwoFALoading(false);
    if (res.success) {
      setTwoFAEnabled(newVal);
      showSuccess(newVal ? 'Double authentification activée' : 'Double authentification désactivée');
    } else {
      showError(res.error || 'Erreur lors de la modification');
    }
  };

  const saveContact = async () => {
    setSavingContact(true);
    const res = await updateMyProfile({ nom: nom.trim(), prenom: prenom.trim(), telephone: telephone.trim() });
    setSavingContact(false);
    if (res.success) {
      showSuccess('Profil mis à jour');
    } else {
      showError(res.message ?? 'Erreur lors de la mise à jour');
    }
  };

  if (loadingProfile) {
    return (
      <>
        <Navbar />
        <div className="profile-container">
          <div className="profile-loading"><div className="spinner" /></div>
        </div>
      </>
    );
  }

  return (
    <>
      <Navbar />
      <div className="profile-container">
        <div className="profile-header">
          <div className="profile-avatar">
            <FontAwesomeIcon icon={faUser} />
          </div>
          <div>
            <h1 className="profile-title">Mon Profil</h1>
            <p className="profile-username">@{username}</p>
          </div>
        </div>

        {successMsg && (
          <div className="profile-alert profile-alert--success">
            <FontAwesomeIcon icon={faCheckCircle} /> {successMsg}
          </div>
        )}
        {errorMsg && (
          <div className="profile-alert profile-alert--error">
            <FontAwesomeIcon icon={faExclamationTriangle} /> {errorMsg}
          </div>
        )}

        {/* Section compte */}
        <div className="profile-card">
          <h2 className="profile-card-title">
            <FontAwesomeIcon icon={faUser} className="profile-card-icon" />
            Mon compte
          </h2>
          <div className="profile-fields">
            <div className="profile-row">
              <div className="profile-group">
                <label>Prénom</label>
                <input
                  type="text"
                  value={prenom}
                  onChange={(e) => setPrenom(e.target.value)}
                  placeholder="Votre prénom"
                />
              </div>
              <div className="profile-group">
                <label>Nom</label>
                <input
                  type="text"
                  value={nom}
                  onChange={(e) => setNom(e.target.value)}
                  placeholder="Votre nom"
                />
              </div>
            </div>
            <div className="profile-group">
              <label>Téléphone (compte)</label>
              <input
                type="tel"
                value={telephone}
                onChange={(e) => setTelephone(e.target.value)}
                placeholder="+33 6 12 34 56 78"
              />
            </div>
          </div>
          <button className="profile-btn" onClick={saveContact} disabled={savingContact}>
            <FontAwesomeIcon icon={faSave} />
            {savingContact ? ' Enregistrement...' : ' Enregistrer le compte'}
          </button>
          <button className="profile-btn profile-btn--secondary" onClick={() => navigate('/user/change-password')} style={{ marginTop: '0.6rem' }}>
            <FontAwesomeIcon icon={faLock} /> Changer le mot de passe
          </button>
        </div>

        {/* Section adresse par défaut */}
        <div className="profile-card">
          <h2 className="profile-card-title">
            <FontAwesomeIcon icon={faMapMarkerAlt} className="profile-card-icon profile-card-icon--address" />
            Adresse par défaut
          </h2>
          <p className="profile-hint">
            Sera pré-remplie dans le formulaire de commande. Vous pourrez la modifier si vous n'êtes pas à cette adresse.
          </p>
          <div className="profile-group">
            <label>Adresse</label>
            <input
              type="text"
              value={defaultAddress}
              onChange={(e) => setDefaultAddress(e.target.value)}
              placeholder="Numéro, rue, ville, code postal"
            />
          </div>
          <button className="profile-btn profile-btn--secondary" onClick={saveAddress} style={{ marginTop: '0.8rem' }}>
            <FontAwesomeIcon icon={faSave} /> Enregistrer l'adresse
          </button>
        </div>

        {/* Section contact commande */}
        <div className="profile-card">
          <h2 className="profile-card-title">
            <FontAwesomeIcon icon={faPhone} className="profile-card-icon profile-card-icon--phone" />
            Contact livraison
          </h2>
          <p className="profile-hint">
            Numéro utilisé par le livreur lors de la livraison. Peut être différent du numéro de votre compte.
          </p>
          <div className="profile-group">
            <label>Téléphone par défaut</label>
            <input
              type="tel"
              value={defaultPhone}
              onChange={(e) => setDefaultPhone(e.target.value)}
              placeholder="+33 6 12 34 56 78"
            />
          </div>
          <div className="profile-group" style={{ marginTop: '1rem' }}>
            <label>
              <FontAwesomeIcon icon={faCommentDots} style={{ marginRight: '0.4rem' }} />
              Pseudo Signal (optionnel)
            </label>
            <input
              type="text"
              value={signalPseudo}
              onChange={(e) => setSignalPseudo(e.target.value)}
              placeholder="@votre.pseudo.signal"
            />
          </div>
          <button className="profile-btn profile-btn--secondary" onClick={() => setShowSaveModal(true)}>
            <FontAwesomeIcon icon={faSave} /> Enregistrer les infos par défaut
          </button>
        </div>
        {/* Section Telegram */}
        {tgEnabled && (
          <div className="profile-card">
            <h2 className="profile-card-title">
              <FontAwesomeIcon icon={faPaperPlane} className="profile-card-icon profile-card-icon--telegram" />
              Notifications Telegram
            </h2>
            <p className="profile-hint">
              Recevez vos notifications sur Telegram, même quand le site est fermé.
            </p>
            {tgLinked ? (
              <div className="profile-telegram-linked">
                <span className="profile-telegram-status">
                  <FontAwesomeIcon icon={faCheckCircle} /> Compte Telegram lié
                </span>
                <button className="profile-btn profile-btn--danger" onClick={handleUnlinkTelegram}>
                  <FontAwesomeIcon icon={faUnlink} /> Délier Telegram
                </button>
              </div>
            ) : (
              <button className="profile-btn profile-btn--telegram" onClick={handleLinkTelegram} disabled={tgLoading}>
                <FontAwesomeIcon icon={faPaperPlane} />
                {tgLoading ? ' Génération du lien...' : ' Lier mon compte Telegram'}
              </button>
            )}
          </div>
        )}

        {/* Section 2FA — visible uniquement si l'admin l'a activé ET Telegram est lié */}
        {twoFAAdminEnabled && tgLinked && (
          <div className="profile-card">
            <h2 className="profile-card-title">
              <FontAwesomeIcon icon={faShieldAlt} className="profile-card-icon" style={{ color: '#6366f1' }} />
              Double authentification (2FA)
            </h2>
            <p className="profile-hint">
              À chaque connexion, un code à 6 chiffres vous sera envoyé sur Telegram avant d'accéder à votre compte.
            </p>
            <div className="profile-2fa-row">
              <div className="profile-2fa-label">
                <span>{twoFAEnabled ? 'Activée' : 'Désactivée'}</span>
                {twoFAEnabled && (
                  <span className="profile-2fa-badge">
                    <FontAwesomeIcon icon={faCheckCircle} /> Protection active
                  </span>
                )}
              </div>
              {twoFALoading ? (
                <div className="profile-2fa-spinner" />
              ) : (
                <button
                  role="switch"
                  aria-checked={twoFAEnabled}
                  className={`profile-toggle ${twoFAEnabled ? 'profile-toggle--on' : ''}`}
                  onClick={handleToggle2FA}
                  aria-label="Activer ou désactiver la double authentification"
                >
                  <span className="profile-toggle-thumb" />
                </button>
              )}
            </div>
          </div>
        )}
      </div>

      {showSaveModal && (
        <div className="profile-modal-overlay" onClick={() => setShowSaveModal(false)}>
          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
            <button className="profile-modal-close" onClick={() => setShowSaveModal(false)}>
              <FontAwesomeIcon icon={faTimes} />
            </button>
            <div className="profile-modal-icon">
              <FontAwesomeIcon icon={faSave} />
            </div>
            <h3 className="profile-modal-title">Enregistrer les infos par défaut ?</h3>
            <p className="profile-modal-body">
              Adresse, téléphone de livraison et pseudo Signal seront sauvegardés localement et pré-remplis lors de vos prochaines commandes.
            </p>
            <div className="profile-modal-actions">
              <button className="profile-modal-btn profile-modal-btn--cancel" onClick={() => setShowSaveModal(false)}>
                Annuler
              </button>
              <button className="profile-modal-btn profile-modal-btn--confirm" onClick={saveLocal}>
                <FontAwesomeIcon icon={faCheckCircle} /> Confirmer
              </button>
            </div>
          </div>
        </div>
      )}

      {showUnlinkModal && (
        <div className="profile-modal-overlay" onClick={() => setShowUnlinkModal(false)}>
          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
            <button className="profile-modal-close" onClick={() => setShowUnlinkModal(false)}>
              <FontAwesomeIcon icon={faTimes} />
            </button>
            <div className="profile-modal-icon profile-modal-icon--danger">
              <FontAwesomeIcon icon={faUnlink} />
            </div>
            <h3 className="profile-modal-title">Délier Telegram ?</h3>
            <p className="profile-modal-body">
              Vous ne recevrez plus de notifications Telegram. La double authentification sera également désactivée.
            </p>
            <div className="profile-modal-actions">
              <button className="profile-modal-btn profile-modal-btn--cancel" onClick={() => setShowUnlinkModal(false)}>
                Annuler
              </button>
              <button className="profile-modal-btn profile-modal-btn--danger" onClick={confirmUnlinkTelegram}>
                <FontAwesomeIcon icon={faUnlink} /> Délier
              </button>
            </div>
          </div>
        </div>
      )}

      {showUnlinkSuccessModal && (
        <div className="profile-modal-overlay" onClick={() => setShowUnlinkSuccessModal(false)}>
          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
            <button className="profile-modal-close" onClick={() => setShowUnlinkSuccessModal(false)}>
              <FontAwesomeIcon icon={faTimes} />
            </button>
            <div className="profile-modal-icon profile-modal-icon--success">
              <FontAwesomeIcon icon={faCheckCircle} />
            </div>
            <h3 className="profile-modal-title">Compte délié</h3>
            <p className="profile-modal-body">
              Votre compte Telegram a été délié avec succès. Vous ne recevrez plus de notifications via Telegram.
            </p>
            <div className="profile-modal-actions">
              <button className="profile-modal-btn profile-modal-btn--confirm" onClick={() => setShowUnlinkSuccessModal(false)}>
                <FontAwesomeIcon icon={faCheckCircle} /> Fermer
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}