// List + Detail pane — multi-comptes, multi-2FA, copy buttons, TOTP countdown.

const Avatar = ({ entry, size = 32 }) => {
  const initial = entry.name.charAt(0).toUpperCase();
  return (
    <div className="cp-avatar" style={{
      width: size, height: size,
      background: entry.color,
      fontSize: size * 0.42,
    }}>
      {initial}
    </div>
  );
};

const StrengthDot = ({ level }) => {
  const colors = { weak: '#EF4444', medium: '#F59E0B', strong: '#10B981' };
  return <span className="cp-strength" style={{ background: colors[level] }} />;
};

const PasswordList = ({ entries, selected, onSelect, sort, onSort, query, onQuery, count, title, onAdd, onAddWifi }) => {
  const [addOpen, setAddOpen] = React.useState(false);
  const addRef = React.useRef(null);
  React.useEffect(() => {
    if (!addOpen) return;
    const onDoc = (e) => { if (addRef.current && !addRef.current.contains(e.target)) setAddOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [addOpen]);
  return (
    <section className="cp-list">
      <div className="cp-list-head">
        <div className="cp-list-title">
          <h2>{title}</h2>
          <span className="cp-list-count">{count} élément{count > 1 ? 's' : ''}</span>
        </div>
        <div className="cp-list-tools">
          <button className="cp-tool-btn" title="Trier">
            <Icon name="sort" size={14} />
          </button>
          <div className="cp-more-wrap" ref={addRef}>
            <button className="cp-tool-btn cp-tool-add" title="Nouveau" onClick={() => setAddOpen(o => !o)}>
              <Icon name="plus" size={14} />
            </button>
            {addOpen && (
              <div className="cp-more-menu cp-more-menu-add">
                <button onClick={() => { setAddOpen(false); onAdd && onAdd(); }}>
                  <Icon name="key" size={13} />
                  <span>Mot de passe</span>
                </button>
                <button onClick={() => { setAddOpen(false); onAddWifi && onAddWifi(); }}>
                  <Icon name="wifi" size={13} />
                  <span>Réseau Wi-Fi</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="cp-search">
        <Icon name="search" size={14} />
        <input
          type="text"
          placeholder="Rechercher dans le coffre…"
          value={query}
          onChange={(e) => onQuery(e.target.value)}
        />
        <kbd>⌘K</kbd>
      </div>

      <div className="cp-list-scroll">
        {entries.length === 0 && (
          <div className="cp-empty">
            <div className="cp-empty-ico"><Icon name="search" size={28} /></div>
            <p>Aucun résultat</p>
          </div>
        )}
        {entries.map(entry => (
          <div
            key={entry.id}
            className={`cp-row ${selected === entry.id ? 'is-active' : ''}`}
            onClick={() => onSelect(entry.id)}
          >
            {entry.type === 'wifi' ? (
              <div className="cp-avatar" style={{ width: 32, height: 32, background: entry.color }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round">
                  <path d="M2 9a14 14 0 0 1 20 0"/>
                  <path d="M5 13a9 9 0 0 1 14 0"/>
                  <path d="M8.5 16.5a4.5 4.5 0 0 1 7 0"/>
                  <circle cx="12" cy="20" r="1.2" fill="#fff" stroke="none"/>
                </svg>
              </div>
            ) : <Avatar entry={entry} size={32} />}
            <div className="cp-row-body">
              <div className="cp-row-top">
                <span className="cp-row-name">{entry.name}</span>
                {entry.type === 'wifi' && (
                  <span className="cp-row-chip cp-chip-wifi">Wi-Fi</span>
                )}
                {entry.totp && entry.totp.length > 0 && (
                  <span className="cp-row-chip cp-chip-2fa">
                    <Icon name="shield" size={9} /> 2FA
                  </span>
                )}
                {entry.accounts.length > 1 && entry.type !== 'wifi' && (
                  <span className="cp-row-chip cp-chip-multi">{entry.accounts.length}</span>
                )}
              </div>
              <div className="cp-row-sub">
                <StrengthDot level={entry.strength} />
                <span>{entry.type === 'wifi' ? entry.ssid : entry.accounts[0].username}</span>
              </div>
            </div>
            {entry.shared && <Icon name="users" size={12} color="rgba(255,255,255,.45)" />}
          </div>
        ))}
      </div>
    </section>
  );
};

window.PasswordList = PasswordList;
window.Avatar = Avatar;