// Left-pane category list for Settings. Keeps selection in
// store.settingsPage so switching away and back preserves place.

import React from 'react';
import { useStore, type SettingsPage } from '@/lib/store';

interface Row {
  key:   SettingsPage;
  label: string;
  hint:  string;
}

const ROWS: Row[] = [
  { key: 'node',     label: 'Node',     hint: 'URL, connection status'         },
  { key: 'identity', label: 'Identity', hint: 'Your keys and address'          },
  { key: 'devices',  label: 'Devices',  hint: 'Linked devices, pair a new one' },
  { key: 'about',    label: 'About',    hint: 'Version, links'                 },
];

export function SettingsNav(): React.ReactElement {
  const page    = useStore(s => s.settingsPage);
  const setPage = useStore(s => s.setSettingsPage);
  return (
    <div style={{ padding: 10 }}>
      {ROWS.map(r => (
        <NavEntry
          key={r.key}
          label={r.label}
          hint={r.hint}
          active={page === r.key}
          onClick={() => setPage(r.key)}
        />
      ))}
    </div>
  );
}

function NavEntry({
  label, hint, active, onClick,
}: { label: string; hint: string; active: boolean; onClick: () => void }) {
  return (
    <div
      onClick={onClick}
      style={{
        padding: '10px 12px', borderRadius: 10, cursor: 'pointer',
        background: active ? '#0a1a29' : 'transparent',
        border: active ? '1px solid #1d9bf022' : '1px solid transparent',
      }}
      onMouseEnter={e => { if (!active) (e.currentTarget as HTMLDivElement).style.background = '#0a0a0a'; }}
      onMouseLeave={e => { if (!active) (e.currentTarget as HTMLDivElement).style.background = 'transparent'; }}
    >
      <div style={{
        color: active ? '#1d9bf0' : '#fff',
        fontSize: 14, fontWeight: 700,
      }}>{label}</div>
      <div style={{ color: '#6a6a6a', fontSize: 11, marginTop: 2 }}>
        {hint}
      </div>
    </div>
  );
}