const AltLoginsSection = () => {
  const { user, refresh } = useSession();
  const [faceModalOpen, setFaceModalOpen] = React.useState(false);
  const [passkeys, setPasskeys] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');

  const reloadPasskeys = React.useCallback(async () => {
    try {
      const { credentials } = await api.passkey.list();
      setPasskeys(credentials || []);
    } catch { setPasskeys([]); }
    setLoading(false);
  }, []);

  React.useEffect(() => { reloadPasskeys(); }, [reloadPasskeys]);

  const onFaceRegistered = async () => { setError(''); await refresh(); };
  const removeFace = async () => {
    if (!confirm('Удалить Face ID?')) return;
    try { await api.face.remove(); await refresh(); }
    catch (e) { setError('Не удалось удалить: ' + (e.message || e.status)); }
  };
  const addPasskey = async () => {
    setError('');
    try {
      const ua = navigator.userAgent;
      const name = (ua.match(/\(([^)]+)\)/)?.[1]?.split(';')[0] || 'Устройство').trim();
      await registerPasskey(name);
      await reloadPasskeys();
    } catch (e) {
      const msg = e?.message || String(e);
      if (msg.toLowerCase().includes('abort') || msg.toLowerCase().includes('cancel')) return;
      setError('Не удалось добавить Passkey: ' + msg);
    }
  };
  const removePasskey = async (id) => {
    if (!confirm('Удалить этот Passkey?')) return;
    try { await api.passkey.remove(id); await reloadPasskeys(); }
    catch (e) { setError('Не удалось удалить: ' + (e.message || e.status)); }
  };

  return (
    <Card>
      <SectionTitle eyebrow="БЕЗОПАСНОСТЬ" title="Альтернативные входы"/>
      {error && (
        <div style={{ padding: 10, borderRadius: 10, background:'#FBE1DA', color:'#9A3218', fontSize: 13, marginBottom: 14 }}>{error}</div>
      )}

      <div style={{ display:'flex', alignItems:'center', gap: 14, padding: '12px 0', borderBottom: '1px solid var(--border)' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 14, background:'var(--surface-2)',
          border:'1px solid var(--border)', display:'grid', placeItems:'center', color:'var(--accent)'
        }}>
          <IconFace size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Face ID</div>
          <div style={{ fontSize: 13, color:'var(--fg-muted)', marginTop: 2 }}>
            {user?.hasFace ? 'Настроен — используется как быстрый вход' : 'Не настроен'}
          </div>
        </div>
        {user?.hasFace
          ? (<div style={{ display:'flex', gap: 6 }}>
              <Button variant="ghost" size="sm" onClick={()=> setFaceModalOpen(true)}>Обновить</Button>
              <Button variant="danger" size="sm" onClick={removeFace}>Удалить</Button>
            </div>)
          : <Button variant="primary" size="sm" onClick={()=> setFaceModalOpen(true)} leading={<IconPlus size={14}/>}>Настроить</Button>
        }
      </div>

      <div style={{ padding: '12px 0' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 14, marginBottom: 10 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 14, background:'var(--surface-2)',
            border:'1px solid var(--border)', display:'grid', placeItems:'center', color:'var(--accent)'
          }}>
            <IconLock size={22}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Passkey</div>
            <div style={{ fontSize: 13, color:'var(--fg-muted)', marginTop: 2 }}>
              {passkeys.length === 0 ? 'Не настроено ни одного устройства' : `Устройств: ${passkeys.length}`}
            </div>
          </div>
          <Button variant="primary" size="sm" onClick={addPasskey} leading={<IconPlus size={14}/>}>Добавить</Button>
        </div>
        {!loading && passkeys.length > 0 && (
          <div style={{ display:'flex', flexDirection:'column', gap: 2, paddingLeft: 58 }}>
            {passkeys.map((p) => (
              <div key={p.id} style={{ display:'flex', alignItems:'center', gap: 10, padding:'8px 0', borderTop:'1px solid var(--border)' }}>
                <div style={{ flex:1, fontSize: 13 }}>{p.name || 'Устройство'}</div>
                <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)' }}>
                  {new Date(p.createdAt * 1000).toLocaleDateString('ru-RU')}
                </div>
                <Button variant="ghost" size="sm" onClick={()=> removePasskey(p.id)}>Удалить</Button>
              </div>
            ))}
          </div>
        )}
      </div>

      <FaceRegisterModal open={faceModalOpen} onClose={()=> setFaceModalOpen(false)} onRegistered={onFaceRegistered}/>
    </Card>
  );
};

Object.assign(window, { AltLoginsSection });