// ============================================================================
//  settings.jsx — Modale Paramètres globaux du coffre.
//  Les préférences sont stockées dans vault.settings, donc chiffrées avec le
//  reste du coffre (zero-knowledge).
// ============================================================================

(function (global) {
  'use strict';

  const { useState, useEffect } = React;

  // ─── Confirmation suppression totale (15s avant que le bouton soit actif) ─

  const WipeConfirmModal = ({ onConfirm, onCancel }) => {
    const [countdown, setCountdown] = useState(15);
    const [busy, setBusy] = useState(false);

    useEffect(() => {
      if (countdown <= 0) return;
      const id = setInterval(() => setCountdown(c => Math.max(0, c - 1)), 1000);
      return () => clearInterval(id);
    }, [countdown]);

    const submit = async () => {
      if (countdown > 0 || busy) return;
      setBusy(true);
      try { await onConfirm(); }
      catch { setBusy(false); }
    };

    return (
      <div className="cp-modal-bg" onClick={busy ? undefined : onCancel}>
        <div className="cp-modal cp-modal-confirm" onClick={(e) => e.stopPropagation()}>
          {!busy && <button className="cp-modal-x" onClick={onCancel} aria-label="Fermer">✕</button>}
          <div className="cp-modal-head">
            <div className="cp-modal-badge cp-modal-badge-danger">
              <Icon name="alert" size={22} color="#EF4444" />
            </div>
            <div>
              <h2>Suppression totale du coffre</h2>
              <p>Cette action est <b>définitive</b> et ne peut pas être annulée.</p>
            </div>
          </div>
          <div className="cp-modal-body">
            <div className="cp-form-error" style={{ padding: '10px 12px', alignItems: 'flex-start', gap: 8 }}>
              <Icon name="alert" size={14} />
              <span>
                Tous vos <b>mots de passe</b>, <b>codes 2FA</b>, <b>réseaux Wi-Fi</b>
                {' '}et <b>notes</b> seront effacés du coffre. Les dossiers seront
                réinitialisés (Personnel, Travail). Vos préférences sont conservées.
              </span>
            </div>
            <p className="cp-wipe-countdown">
              {countdown > 0
                ? <>Le bouton de confirmation deviendra actif dans <b>{countdown}</b> seconde{countdown > 1 ? 's' : ''}.</>
                : <>Vous pouvez maintenant confirmer la suppression.</>}
            </p>
          </div>
          <div className="cp-modal-foot">
            <button type="button" className="cp-btn" onClick={onCancel} disabled={busy}>Annuler</button>
            <button
              type="button"
              className="cp-btn cp-btn-danger"
              disabled={countdown > 0 || busy}
              onClick={submit}
            >
              {busy ? 'Suppression…' : (countdown > 0 ? `Tout supprimer (${countdown}s)` : 'Tout supprimer')}
            </button>
          </div>
        </div>
      </div>
    );
  };

  const SettingsModal = ({ settings, onSave, onWipe, onCancel }) => {
    const merged = CPCrypto.mergeSettings(settings);
    const [defaultAvatarType, setDefaultAvatarType] = useState(merged.defaultAvatarType);
    const [defaultIconName,   setDefaultIconName]   = useState(merged.defaultIconName);
    const [forceAvatarType,   setForceAvatarType]   = useState(merged.forceAvatarType || '');
    const [forceAvatarIconName, setForceAvatarIconName] = useState(merged.forceAvatarIconName || 'key');
    const [autoLockMinutes,   setAutoLockMinutes]   = useState(merged.autoLockMinutes);
    const [autoExpandFolders,    setAutoExpandFolders]    = useState(merged.autoExpandFolders !== false);
    const [autoCollapseFolders,  setAutoCollapseFolders]  = useState(merged.autoCollapseFolders !== false);
    const [showSubfolderEntries, setShowSubfolderEntries] = useState(merged.showSubfolderEntries !== false);
    const [autoExpandAccounts,   setAutoExpandAccounts]   = useState(merged.autoExpandAccounts !== false);
    const [autoCollapseAccounts, setAutoCollapseAccounts] = useState(merged.autoCollapseAccounts !== false);
    const [showStrengthDots,     setShowStrengthDots]     = useState(merged.showStrengthDots !== false);
    const [busy,  setBusy]  = useState(false);
    const [error, setError] = useState('');
    const [wipeOpen, setWipeOpen] = useState(false);

    const submit = async (e) => {
      e.preventDefault();
      setError('');
      setBusy(true);
      try {
        await onSave({
          defaultAvatarType,
          defaultIconName: defaultAvatarType === 'icon' ? (defaultIconName || 'key') : merged.defaultIconName,
          forceAvatarType: forceAvatarType || '',
          forceAvatarIconName: forceAvatarType === 'icon' ? (forceAvatarIconName || 'key') : merged.forceAvatarIconName,
          autoLockMinutes: Number(autoLockMinutes) || 15,
          autoExpandFolders, autoCollapseFolders, showSubfolderEntries,
          autoExpandAccounts, autoCollapseAccounts,
          showStrengthDots,
        });
      } catch (err) {
        setError(err.message || 'Échec de la sauvegarde');
        setBusy(false);
      }
    };

    const icons = window.AVATAR_ICONS || [];

    return (
      <div className="cp-modal-bg" onClick={onCancel}>
        <div className="cp-modal cp-modal-form" onClick={(e) => e.stopPropagation()}>
          <button className="cp-modal-x" onClick={onCancel} aria-label="Fermer">✕</button>
          <div className="cp-modal-head">
            <div>
              <h2>Paramètres</h2>
              <p>Préférences pour ce coffre. Stockées chiffrées comme le reste.</p>
            </div>
          </div>
          <form id="settings-form" onSubmit={submit} className="cp-modal-body cp-form">

            <div className="cp-form-section">
              <div className="cp-section-head"><h3>Nouveaux mots de passe</h3></div>
              <div className="cp-form-field">
                <span>Avatar par défaut</span>
                <div className="cp-avatar-type-tabs">
                  <button type="button"
                    className={defaultAvatarType === 'letter' ? 'is-active' : ''}
                    onClick={() => setDefaultAvatarType('letter')}
                  >Lettre</button>
                  <button type="button"
                    className={defaultAvatarType === 'logo' ? 'is-active' : ''}
                    onClick={() => setDefaultAvatarType('logo')}
                  >Logo du site</button>
                  <button type="button"
                    className={defaultAvatarType === 'icon' ? 'is-active' : ''}
                    onClick={() => { setDefaultAvatarType('icon'); if (!defaultIconName) setDefaultIconName(icons[0]); }}
                  >Icône</button>
                </div>
              </div>
              {defaultAvatarType === 'icon' && (
                <div className="cp-form-field">
                  <span>Icône</span>
                  <div className="cp-avatar-icons">
                    {icons.map(name => (
                      <button type="button"
                        key={name}
                        className={`cp-avatar-icon-btn ${defaultIconName === name ? 'is-active' : ''}`}
                        onClick={() => setDefaultIconName(name)}
                        style={{ background: defaultIconName === name ? 'var(--accent)' : 'transparent' }}
                        title={name}
                      >
                        <Icon name={name} size={14} color={defaultIconName === name ? '#fff' : 'currentColor'} />
                      </button>
                    ))}
                  </div>
                </div>
              )}
              {defaultAvatarType === 'logo' && (
                <div className="cp-form-hint">
                  <Icon name="alert" size={11} />
                  <span>
                    Le logo est récupéré depuis <b>icons.duckduckgo.com</b> à chaque
                    affichage. Cela révèle au CDN les domaines de votre coffre.
                  </span>
                </div>
              )}

              <div className="cp-form-field">
                <span>Forcer un type d'avatar pour <b>toutes</b> les entrées</span>
                <div className="cp-avatar-type-tabs">
                  <button type="button"
                    className={forceAvatarType === '' ? 'is-active' : ''}
                    onClick={() => setForceAvatarType('')}
                  >Aucun (par entrée)</button>
                  <button type="button"
                    className={forceAvatarType === 'letter' ? 'is-active' : ''}
                    onClick={() => setForceAvatarType('letter')}
                  >Lettre</button>
                  <button type="button"
                    className={forceAvatarType === 'logo' ? 'is-active' : ''}
                    onClick={() => setForceAvatarType('logo')}
                  >Logo</button>
                  <button type="button"
                    className={forceAvatarType === 'icon' ? 'is-active' : ''}
                    onClick={() => { setForceAvatarType('icon'); if (!forceAvatarIconName) setForceAvatarIconName(icons[0]); }}
                  >Icône</button>
                </div>
              </div>
              {forceAvatarType === 'icon' && (
                <div className="cp-form-field">
                  <span>Icône forcée</span>
                  <div className="cp-avatar-icons">
                    {icons.map(name => (
                      <button type="button"
                        key={name}
                        className={`cp-avatar-icon-btn ${forceAvatarIconName === name ? 'is-active' : ''}`}
                        onClick={() => setForceAvatarIconName(name)}
                        style={{ background: forceAvatarIconName === name ? 'var(--accent)' : 'transparent' }}
                        title={name}
                      >
                        <Icon name={name} size={14} color={forceAvatarIconName === name ? '#fff' : 'currentColor'} />
                      </button>
                    ))}
                  </div>
                </div>
              )}
              {forceAvatarType && (
                <div className="cp-form-hint" style={{ background: 'rgba(99,102,241,.08)', borderColor: 'rgba(99,102,241,.3)' }}>
                  <Icon name="alert" size={11} color="#6366F1" />
                  <span>
                    L'apparence est forcée visuellement. Les valeurs <b>par entrée</b>
                    {' '}restent stockées et seront restaurées si vous repassez sur « Aucun ».
                  </span>
                </div>
              )}
            </div>

            <div className="cp-form-section">
              <div className="cp-section-head"><h3>Comportement de la sidebar</h3></div>
              <div className="cp-form-toggle">
                <span>Déplier les dossiers au clic</span>
                <button type="button" className="twk-toggle"
                        data-on={autoExpandFolders ? '1' : '0'}
                        onClick={() => setAutoExpandFolders(v => !v)}><i /></button>
              </div>
              <div className="cp-form-toggle">
                <span>Replier le dossier précédent à la sélection</span>
                <button type="button" className="twk-toggle"
                        data-on={autoCollapseFolders ? '1' : '0'}
                        onClick={() => setAutoCollapseFolders(v => !v)}><i /></button>
              </div>
              <div className="cp-form-toggle">
                <span>
                  Afficher les entrées des sous-dossiers
                  <em style={{ display: 'block', fontSize: 10.5, color: 'var(--text-3)', fontStyle: 'normal', marginTop: 2 }}>
                    Ex : « SAPI » montre aussi les entrées de « SAPI / Office BOITE »
                  </em>
                </span>
                <button type="button" className="twk-toggle"
                        data-on={showSubfolderEntries ? '1' : '0'}
                        onClick={() => setShowSubfolderEntries(v => !v)}><i /></button>
              </div>
            </div>

            <div className="cp-form-section">
              <div className="cp-section-head"><h3>Comportement de la liste</h3></div>
              <div className="cp-form-toggle">
                <span>Déplier les comptes multiples au clic</span>
                <button type="button" className="twk-toggle"
                        data-on={autoExpandAccounts ? '1' : '0'}
                        onClick={() => setAutoExpandAccounts(v => !v)}><i /></button>
              </div>
              <div className="cp-form-toggle">
                <span>Replier l'ancienne sélection au changement</span>
                <button type="button" className="twk-toggle"
                        data-on={autoCollapseAccounts ? '1' : '0'}
                        onClick={() => setAutoCollapseAccounts(v => !v)}><i /></button>
              </div>
              <div className="cp-form-toggle">
                <span>
                  Afficher la pastille de force du mot de passe
                  <em style={{ display: 'block', fontSize: 10.5, color: 'var(--text-3)', fontStyle: 'normal', marginTop: 2 }}>
                    Le petit point coloré (rouge / orange / vert) à gauche de l'identifiant
                  </em>
                </span>
                <button type="button" className="twk-toggle"
                        data-on={showStrengthDots ? '1' : '0'}
                        onClick={() => setShowStrengthDots(v => !v)}><i /></button>
              </div>
            </div>

            <div className="cp-form-section">
              <div className="cp-section-head"><h3>Sécurité</h3></div>
              <label className="cp-form-field">
                <span>Verrouillage automatique après inactivité</span>
                <select
                  className="cp-form-input"
                  value={String(autoLockMinutes)}
                  onChange={(e) => setAutoLockMinutes(Number(e.target.value))}
                >
                  <option value="1">1 minute</option>
                  <option value="5">5 minutes</option>
                  <option value="15">15 minutes</option>
                  <option value="30">30 minutes</option>
                  <option value="60">1 heure</option>
                  <option value="0">Jamais (déconseillé)</option>
                </select>
              </label>
            </div>

            {error && <div className="cp-form-error"><Icon name="alert" size={12} /><span>{error}</span></div>}

            {/* Zone de danger */}
            {onWipe && (
              <div className="cp-form-section cp-danger-zone">
                <div className="cp-section-head">
                  <h3>Zone de danger</h3>
                </div>
                <div className="cp-danger-row">
                  <div className="cp-danger-text">
                    <div className="cp-danger-title">Supprimer toutes les données</div>
                    <div className="cp-danger-sub">
                      Efface mots de passe, codes 2FA, Wi-Fi et notes. Le coffre
                      reste utilisable, les dossiers sont réinitialisés.
                    </div>
                  </div>
                  <button type="button" className="cp-btn cp-btn-danger-outline"
                          onClick={() => setWipeOpen(true)}>
                    <Icon name="trash" size={13} />
                    <span>Tout supprimer…</span>
                  </button>
                </div>
              </div>
            )}
          </form>
          <div className="cp-modal-foot">
            <button type="button" className="cp-btn" onClick={onCancel}>Annuler</button>
            <button type="submit" form="settings-form" className="cp-btn cp-btn-soft" disabled={busy}>
              {busy ? 'Sauvegarde…' : 'Enregistrer'}
            </button>
          </div>
        </div>
        {wipeOpen && (
          <WipeConfirmModal
            onConfirm={async () => { await onWipe(); setWipeOpen(false); }}
            onCancel={() => setWipeOpen(false)}
          />
        )}
      </div>
    );
  };

  global.SettingsModal = SettingsModal;
})(window);