// features/auth/Compte.jsx — inscription et rattachement
// ---------------------------------------------------------------
// Le parcours d'une psychologue :
//
//   1. Elle crée son compte (nom, e-mail, mot de passe) — RIEN d'autre.
//   2. Connectée, elle saisit l'e-mail de son établissement.
//   3. Elle attend que celui-ci accepte. Sans validation, son compte
//      existe mais n'ouvre rien : c'est le claim qui donne les droits.
//
// Le même écran de rattachement sert au premier établissement et aux
// suivants — une psychologue peut intervenir dans plusieurs EHPAD.

const { useState: useStateC, useEffect: useEffectC } = React;

// Coquille commune : la photo à gauche, le contenu à droite. Reprend la
// mise en page de Login pour que l'inscription ne paraisse pas venir
// d'une autre application.
function CadreAuth({ children }) {
  return (
    <div className="login-page">
      <aside className="login-aside">
        <img src="assets/psychologue-residente.png" alt="Psychologue auprès d'une résidente" />
        <div className="login-aside-overlay">
          <div className="login-aside-brand">Livana</div>
          <div className="login-aside-tag">Suivez l'évolution émotionnelle des résidents accompagnés par Livana.</div>
        </div>
      </aside>
      <main className="login-main">
        <div className="login-box fade-up">{children}</div>
      </main>
    </div>
  );
}

// ── 1. Inscription ─────────────────────────────────────────────────────
function Inscription({ onInscrite, onRetourConnexion }) {
  const [nom, setNom] = useStateC('');
  const [email, setEmail] = useStateC('');
  const [pwd, setPwd] = useStateC('');
  const [voir, setVoir] = useStateC(false);
  const [enCours, setEnCours] = useStateC(false);
  const [erreur, setErreur] = useStateC('');

  const pret = nom.trim() && email.trim() && pwd.length >= 8;

  const envoyer = async (e) => {
    e.preventDefault();
    if (!pret || enCours) return;
    setEnCours(true);
    setErreur('');
    try {
      await window.LivanaAPI.inscrire({ email: email.trim(), motDePasse: pwd, nom: nom.trim() });
      onInscrite();
    } catch (err) {
      setErreur(window.LivanaAPI.frError(err) || (err && err.message) || 'Création impossible.');
    } finally {
      setEnCours(false);
    }
  };

  return (
    <CadreAuth>
      <div className="login-logo-row">
        <img className="login-logo-img" src="assets/livana-logo.png" alt="Livana" />
      </div>
      <div className="login-eyebrow">Espace psychologue</div>
      <h1 className="login-title">Créer votre compte</h1>
      <p className="login-desc">Votre compte est personnel. Vous indiquerez votre établissement juste après.</p>

      <form className="login-form" onSubmit={envoyer}>
        <div className="field">
          <label className="field-label">Votre nom</label>
          <div className="field-wrap">
            <span className="lead-ic"><Icon name="user" size={17} /></span>
            <input className="field-input" value={nom} onChange={(e) => setNom(e.target.value)}
              autoComplete="name" placeholder="Hélène Vasseur" required />
          </div>
        </div>

        <div className="field">
          <label className="field-label">Votre adresse e-mail</label>
          <div className="field-wrap">
            <span className="lead-ic"><Icon name="mail" size={17} /></span>
            <input className="field-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)}
              autoComplete="username" placeholder="helene.vasseur@exemple.fr" required />
          </div>
        </div>

        <div className="field">
          <label className="field-label">Mot de passe</label>
          <div className="field-wrap">
            <span className="lead-ic"><Icon name="lock" size={17} /></span>
            <input className="field-input" type={voir ? 'text' : 'password'} value={pwd}
              onChange={(e) => setPwd(e.target.value)} autoComplete="new-password"
              placeholder="Au moins 8 caractères" required />
            <button type="button" className="field-eye" onClick={() => setVoir((v) => !v)}
              title={voir ? 'Masquer' : 'Afficher'}><Icon name="eye" size={17} /></button>
          </div>
          {pwd && pwd.length < 8 && <span className="cfg-hint">Encore {8 - pwd.length} caractère{8 - pwd.length > 1 ? 's' : ''}.</span>}
        </div>

        {erreur && <div className="cfg-erreur">{erreur}</div>}

        <button className="btn btn-primary btn-block login-submit" type="submit" disabled={!pret || enCours}>
          {enCours ? 'Création…' : 'Créer mon compte'}
        </button>
      </form>

      <p className="auth-bas">
        Vous avez déjà un compte ?{' '}
        <button type="button" className="auth-lien" onClick={onRetourConnexion}>Se connecter</button>
      </p>
    </CadreAuth>
  );
}

// ── 2. Rattachement à un établissement ─────────────────────────────────
// `premier` distingue la première demande (au sortir de l'inscription) de
// l'ajout d'un établissement supplémentaire : le texte n'est pas le même.
function Rattachement({ premier, onDemande, onAnnuler, onDeconnexion }) {
  const [email, setEmail] = useStateC('');
  const [enCours, setEnCours] = useStateC(false);
  const [erreur, setErreur] = useStateC('');

  const envoyer = async (e) => {
    e.preventDefault();
    if (!email.trim() || enCours) return;
    setEnCours(true);
    setErreur('');
    try {
      await window.LivanaAPI.demanderRattachement({ emailEtablissement: email.trim() });
      onDemande(email.trim());
    } catch (err) {
      setErreur((err && err.message) || 'La demande n\'a pas pu être envoyée.');
    } finally {
      setEnCours(false);
    }
  };

  return (
    <CadreAuth>
      <div className="login-eyebrow">Votre compte</div>
      <h1 className="login-title">{premier ? 'Votre établissement' : 'Ajouter un établissement'}</h1>
      <p className="login-desc">
        {premier
          ? 'Indiquez l\'adresse e-mail de l\'établissement où vous intervenez. Une demande de validation lui sera envoyée.'
          : 'Indiquez l\'adresse e-mail du nouvel établissement. Il devra accepter votre demande, comme le premier.'}
      </p>

      <form className="login-form" onSubmit={envoyer}>
        <div className="field">
          <label className="field-label">E-mail de l'établissement</label>
          <div className="field-wrap">
            <span className="lead-ic"><Icon name="mail" size={17} /></span>
            <input className="field-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)}
              placeholder="contact@residence-les-tilleuls.fr" required autoFocus />
          </div>
          <span className="cfg-hint">
            C'est l'adresse avec laquelle l'établissement est enregistré chez Livana.
            Demandez-la-lui si vous ne la connaissez pas.
          </span>
        </div>

        {erreur && <div className="cfg-erreur">{erreur}</div>}

        <button className="btn btn-primary btn-block login-submit" type="submit" disabled={!email.trim() || enCours}>
          {enCours ? 'Envoi…' : 'Envoyer la demande'}
        </button>
      </form>

      <p className="auth-bas">
        <button type="button" className="auth-lien" onClick={onAnnuler || onDeconnexion}>
          {onAnnuler ? 'Annuler' : 'Se déconnecter'}
        </button>
      </p>
    </CadreAuth>
  );
}

// ── 3. En attente de validation ────────────────────────────────────────
// Le parcours en trois étapes répond à la seule question qu'on se pose
// devant un écran d'attente : est-ce que ça avance, ou est-ce cassé ?
function Attente({ emailEtablissement, onActualiser, onDeconnexion, onAutreEtablissement }) {
  const [verif, setVerif] = useStateC(false);

  const actualiser = async () => {
    setVerif(true);
    try { await onActualiser(); } finally { setVerif(false); }
  };

  return (
    <CadreAuth>
      <div className="att-ic"><Icon name="history" size={26} /></div>
      <h1 className="login-title" style={{ textAlign: 'center' }}>En attente de validation</h1>
      <p className="login-desc" style={{ textAlign: 'center' }}>
        {emailEtablissement
          ? <>Nous avons envoyé une demande à <strong>{emailEtablissement}</strong>. Vous recevrez l'accès dès qu'elle sera acceptée.</>
          : 'Votre demande a été transmise à votre établissement. Vous recevrez l\'accès dès qu\'elle sera acceptée.'}
      </p>

      <ul className="att-etapes">
        <li><span className="att-pastille fait"><Icon name="check" size={12} /></span> <span>Votre compte est créé</span></li>
        <li><span className="att-pastille encours">2</span> <span>L'établissement examine votre demande</span></li>
        <li><span className="att-pastille apres">3</span> <span className="att-apres">Accès aux résidents</span></li>
      </ul>

      <div className="att-encart">
        Le lien envoyé à votre établissement est valable 7 jours. Sans réponse,
        vous pourrez renouveler la demande.
      </div>

      <button className="btn btn-ghost btn-block" type="button" onClick={actualiser} disabled={verif}>
        {verif ? 'Vérification…' : 'Actualiser'}
      </button>

      <p className="auth-bas">
        <button type="button" className="auth-lien" onClick={onAutreEtablissement}>Demander un autre établissement</button>
        {' · '}
        <button type="button" className="auth-lien" onClick={onDeconnexion}>Se déconnecter</button>
      </p>
    </CadreAuth>
  );
}

// ── 4. Mes établissements ──────────────────────────────────────────────
// Liste des rattachements avec leur état. Sert AUSSI de sélecteur quand
// plusieurs sont validés : c'est le même geste — choisir où l'on travaille.
function MesEtablissements({ acces, onChoisir, onAjouter, onDeconnexion }) {
  const ETATS = {
    valide: { texte: 'Accès accordé', classe: 'ok' },
    en_attente: { texte: 'En attente', classe: 'attente' },
    refuse: { texte: 'Refusée', classe: 'refus' },
    revoque: { texte: 'Accès retiré', classe: 'refus' },
  };

  return (
    <CadreAuth>
      <div className="login-eyebrow">Votre compte</div>
      <h1 className="login-title">Mes établissements</h1>
      <p className="login-desc">Choisissez l'établissement dont vous souhaitez consulter le suivi.</p>

      <div className="etab-liste">
        {acces.map((a) => {
          const e = ETATS[a.statut] || { texte: a.statut, classe: 'refus' };
          const ouvrable = a.statut === 'valide';
          return (
            <div key={a.etablissementId}
              className={'etab-ligne' + (ouvrable ? ' ouvrable' : '')}
              role={ouvrable ? 'button' : undefined}
              tabIndex={ouvrable ? 0 : -1}
              onClick={() => { if (ouvrable) onChoisir(a.etablissementId); }}>
              <span className="etab-nom">{a.nom || 'Établissement'}</span>
              <span className={'etab-etat ' + e.classe}>{e.texte}</span>
              {ouvrable && <Icon name="chevron-right" size={15} />}
            </div>
          );
        })}
      </div>

      <button className="btn btn-ghost btn-block etab-ajout" type="button" onClick={onAjouter}>
        <Icon name="plus" size={14} /> Demander un autre établissement
      </button>

      <p className="auth-bas">
        <button type="button" className="auth-lien" onClick={onDeconnexion}>Se déconnecter</button>
      </p>
    </CadreAuth>
  );
}


// ── 5. Page « Mes établissements », DANS l'application ─────────────────
// Le complément du sélecteur du rail : là où celui-ci sert le geste rapide
// (changer), cette page montre l'état de chaque demande et permet d'en
// faire une nouvelle. Elle est atteinte par « Gérer mes établissements ».
//
// Distincte de `MesEtablissements` ci-dessus, qui vit dans la coquille
// d'authentification (avant d'être entrée dans l'application) : même
// matière, mais l'une est un aiguillage et l'autre une page de réglage.
function PageEtablissements({ acces, etabId, onChoisir, onRafraichir }) {
  const [onglet, setOnglet] = useStateC('liste');
  const [email, setEmail] = useStateC('');
  const [enCours, setEnCours] = useStateC(false);
  const [erreur, setErreur] = useStateC('');
  const [envoye, setEnvoye] = useStateC('');

  const ETATS = {
    valide: { texte: 'Accès accordé', classe: 'ok' },
    en_attente: { texte: 'En attente', classe: 'attente' },
    refuse: { texte: 'Refusée', classe: 'refus' },
    revoque: { texte: 'Accès retiré', classe: 'refus' },
  };

  const demander = async (e) => {
    e.preventDefault();
    if (!email.trim() || enCours) return;
    setEnCours(true); setErreur(''); setEnvoye('');
    try {
      await window.LivanaAPI.demanderRattachement({ emailEtablissement: email.trim() });
      setEnvoye(email.trim());
      setEmail('');
      if (onRafraichir) await onRafraichir();
    } catch (err) {
      setErreur((err && err.message) || "La demande n'a pas pu être envoyée.");
    } finally {
      setEnCours(false);
    }
  };

  return (
    <div className="page-etabs fade-up">
      <div className="pe-tabs" role="tablist">
        <button className={`pe-tab ${onglet === 'liste' ? 'active' : ''}`} onClick={() => setOnglet('liste')}>
          <Icon name="building" size={15} /> Mes établissements
        </button>
        <button className={`pe-tab ${onglet === 'ajout' ? 'active' : ''}`} onClick={() => setOnglet('ajout')}>
          <Icon name="plus" size={15} /> En ajouter un
        </button>
      </div>

      {onglet === 'liste' ? (
        <div className="pe-corps">
          <p className="pe-intro">
            Cliquez sur un établissement pour consulter son suivi. Une demande en attente
            ne s'ouvre pas tant que l'établissement ne l'a pas acceptée.
          </p>
          <div className="pe-liste">
            {acces.map((a) => {
              const e = ETATS[a.statut] || { texte: a.statut, classe: 'refus' };
              const ouvrable = a.statut === 'valide';
              const actif = a.etablissementId === etabId;
              return (
                <div
                  key={a.etablissementId}
                  className={`pe-ligne ${ouvrable ? 'ouvrable' : ''} ${actif ? 'actif' : ''}`}
                  role={ouvrable && !actif ? 'button' : undefined}
                  tabIndex={ouvrable && !actif ? 0 : -1}
                  onClick={() => { if (ouvrable && !actif) onChoisir(a.etablissementId); }}>
                  <span className="pe-past">{String(a.nom || '?').split(' ').filter(Boolean).slice(0, 2).map((m) => m[0]).join('').toUpperCase()}</span>
                  <span className="pe-txt">
                    <span className="pe-nom">{a.nom || 'Établissement'}</span>
                    {actif && <span className="pe-sous">Consulté actuellement</span>}
                  </span>
                  <span className={`pe-etat ${e.classe}`}>{e.texte}</span>
                  {ouvrable && !actif && <Icon name="chevron-right" size={15} />}
                </div>
              );
            })}
          </div>
        </div>
      ) : (
        <div className="pe-corps">
          <p className="pe-intro">
            Indiquez l'adresse e-mail de l'établissement où vous intervenez. Il recevra une
            demande et devra l'accepter : sans sa validation, vous n'aurez aucun accès.
          </p>

          {envoye ? (
            <div className="pe-envoye">
              <Icon name="check" size={16} />
              <span>
                Demande envoyée à <strong>{envoye}</strong>. Elle apparaîtra dans la liste
                dès que l'établissement aura répondu.
              </span>
            </div>
          ) : null}

          <form className="pe-form" onSubmit={demander}>
            <label className="cfg-field">
              <span className="cfg-label">E-mail de l'établissement</span>
              <input
                className="cfg-input" type="email" value={email}
                onChange={(ev) => setEmail(ev.target.value)}
                placeholder="contact@residence-les-tilleuls.fr" required />
              <span className="cfg-hint">
                C'est l'adresse avec laquelle l'établissement est enregistré chez Livana.
                Demandez-la-lui si vous ne la connaissez pas.
              </span>
            </label>

            {erreur && <div className="cfg-erreur">{erreur}</div>}

            <button className="btn btn-accent" type="submit" disabled={!email.trim() || enCours}>
              {enCours ? 'Envoi…' : 'Envoyer la demande'}
            </button>
          </form>
        </div>
      )}
    </div>
  );
}

window.PageEtablissements = PageEtablissements;

window.Inscription = Inscription;
window.Rattachement = Rattachement;
window.AttenteValidation = Attente;
window.MesEtablissements = MesEtablissements;