/* Personal Settings — profile, notifications, security, appearance.
   Spec: global-navigation §2.7 (User Menu → Settings), tenant-login-and-2fa. */
const { useState: useStateSet } = React;

function Settings({ role, dark, onToggleDark, onToast }) {
  const [section, setSection] = useStateSet('profile');
  const sections = [
    { id: 'profile',       icon: 'user',        label: 'Profile' },
    { id: 'notifications', icon: 'bell',        label: 'Notifications' },
    { id: 'security',      icon: 'shield-check',label: 'Security & 2FA' },
    { id: 'appearance',    icon: 'palette',     label: 'Appearance' },
  ];
  return (
    <React.Fragment>
      <div className="mn-page-h">
        <div className="mn-page-title"><h1 className="title-1">Settings</h1><span className="mn-page-count">{role} · Acme</span></div>
      </div>
      <div className="mn-admin-grid">
        <aside className="mn-admin-side">
          {sections.map(s => (
            <button key={s.id} type="button" className={'mn-admin-side-item' + (section === s.id ? ' mn-admin-side-item--active' : '')} onClick={() => setSection(s.id)}>
              <Icon name={s.icon} size="sm" /><span>{s.label}</span>
            </button>
          ))}
        </aside>
        <div>
          {section === 'profile' && <ProfileSettings onToast={onToast} />}
          {section === 'notifications' && <NotificationSettings onToast={onToast} />}
          {section === 'security' && <SecuritySettings onToast={onToast} />}
          {section === 'appearance' && <AppearanceSettings dark={dark} onToggleDark={onToggleDark} />}
        </div>
      </div>
    </React.Fragment>
  );
}

function ProfileSettings({ onToast }) {
  const [f, setF] = useStateSet({ first: 'Maria', last: 'Lis', email: 'maria@monolit.app', phone: '+380 67 100 22 33', language: 'English', tz: 'UTC+3 · Europe/Kyiv' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  return (
    <Card title="Profile" eyebrow="Your personal details" padding="md"
          action={<Button variant="primary" size="sm" icon="check" onClick={() => onToast('Profile saved')}>Save</Button>}>
      <div className="mn-row" style={{ gap: 14, marginBottom: 16 }}>
        <Avatar user={{ initials: 'ML', color: 'teal' }} size={56} />
        <div><Button variant="ghost" size="sm" icon="upload">Upload photo</Button>
          <div style={{ font: 'var(--font-weight-medium) 11px/15px var(--font-sans)', color: 'var(--text-3)', marginTop: 4 }}>PNG or JPG, up to 2 MB.</div></div>
      </div>
      <div className="mn-form-grid">
        <Field label="First name" required><Input fullWidth value={f.first} onChange={(v) => set('first', v)} /></Field>
        <Field label="Last name"><Input fullWidth value={f.last} onChange={(v) => set('last', v)} /></Field>
        <Field label="Email" hint="Changing email requires 2FA"><Input fullWidth icon="mail" value={f.email} onChange={(v) => set('email', v)} /></Field>
        <Field label="Phone"><Input fullWidth icon="phone" value={f.phone} onChange={(v) => set('phone', v)} /></Field>
        <Field label="Language"><Select fullWidth value={f.language} onChange={(v) => set('language', v)} options={['English', 'Українська', 'Deutsch', 'Español']} /></Field>
        <Field label="Timezone"><Select fullWidth value={f.tz} onChange={(v) => set('tz', v)} options={['UTC+3 · Europe/Kyiv', 'UTC+1 · Europe/Berlin', 'UTC+0 · London', 'UTC+9 · Tokyo']} /></Field>
      </div>
    </Card>
  );
}

const NOTIF_TYPES = [
  { id: 'assignment', label: 'Lead assigned to me', hint: 'When a record is assigned to you' },
  { id: 'status', label: 'Status change (my records)', hint: 'Status updates on records you own' },
  { id: 'overdue', label: 'Overdue next step', hint: 'When a next step passes its due date' },
  { id: 'comment', label: 'New comment / mention', hint: 'When someone comments or @mentions you' },
  { id: 'bulk', label: 'Bulk action finished', hint: 'Import / bulk assign results' },
  { id: 'system', label: 'System notices', hint: 'Technical and admin announcements' },
];
function NotificationSettings({ onToast }) {
  const [on, setOn] = useStateSet({ assignment: true, status: true, overdue: true, comment: true, bulk: false, system: true });
  const enabled = Object.values(on).filter(Boolean).length;
  function toggle(id) {
    if (on[id] && enabled === 1) { onToast('At least one notification type must stay on'); return; }
    setOn(s => ({ ...s, [id]: !s[id] }));
  }
  return (
    <Card title="Notifications" eyebrow={`${enabled} of ${NOTIF_TYPES.length} enabled · at least one required`} padding="md">
      <div className="mn-stack-lg">
        {NOTIF_TYPES.map(n => (
          <div key={n.id} className="mn-row" style={{ justifyContent: 'space-between' }}>
            <div><div style={{ font: 'var(--font-weight-strong) 14px/20px var(--font-sans)' }}>{n.label}</div>
              <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>{n.hint}</div></div>
            <button type="button" onClick={() => toggle(n.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer' }}>
              <Toggle on={on[n.id]} />
            </button>
          </div>
        ))}
      </div>
    </Card>
  );
}

function SecuritySettings({ onToast }) {
  const sessions = [
    { device: 'Chrome · macOS', where: 'Kyiv, UA · current', at: 'now', current: true },
    { device: 'Safari · iPhone', where: 'Kyiv, UA', at: '2 h ago', current: false },
    { device: 'Firefox · Windows', where: 'Warsaw, PL', at: 'yesterday', current: false },
  ];
  return (
    <div className="mn-stack-lg">
      <Card title="Password & 2FA" eyebrow="Two-factor is mandatory" padding="md">
        <div className="mn-stack-lg">
          <div className="mn-row" style={{ justifyContent: 'space-between' }}>
            <div><div style={{ font: 'var(--font-weight-strong) 14px/20px var(--font-sans)' }}>Authenticator app (TOTP)</div>
              <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>Enrolled · 8 backup codes generated</div></div>
            <div className="mn-row" style={{ gap: 8 }}><span className="mn-chip mn-chip--md mn-chip--st-qual"><Icon name="shield-check" size="xs" stroke="2" />Active</span><Button variant="ghost" size="sm" onClick={() => onToast('2FA reset requires re-auth')}>Reconfigure</Button></div>
          </div>
          <div className="mn-row" style={{ justifyContent: 'space-between' }}>
            <div><div style={{ font: 'var(--font-weight-strong) 14px/20px var(--font-sans)' }}>Password</div>
              <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>Last changed 34 days ago · ≥12 chars policy</div></div>
            <Button variant="ghost" size="sm" icon="key-round" onClick={() => onToast('Password change requires 2FA')}>Change password</Button>
          </div>
          <div className="mn-row" style={{ justifyContent: 'space-between' }}>
            <div><div style={{ font: 'var(--font-weight-strong) 14px/20px var(--font-sans)' }}>Backup codes</div>
              <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>6 of 8 remaining</div></div>
            <Button variant="ghost" size="sm" icon="refresh-cw" onClick={() => onToast('New backup codes generated')}>Regenerate</Button>
          </div>
        </div>
      </Card>
      <Card title="Active sessions" eyebrow="Sign out individual devices" padding="md"
            action={<Button variant="ghost" size="sm" icon="log-out" onClick={() => onToast('Signed out of all other devices')}>Log out all others</Button>}>
        <div className="mn-stack">
          {sessions.map((s, i) => (
            <div key={i} className="mn-row" style={{ justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed var(--border-1)' }}>
              <div className="mn-row" style={{ gap: 10 }}><span className="mn-feed-icon"><Icon name="monitor" size="sm" /></span>
                <div><div style={{ font: 'var(--font-weight-strong) 13px/18px var(--font-sans)' }}>{s.device}{s.current ? <span className="mn-chip mn-chip--st-qual" style={{ marginLeft: 6 }}>this device</span> : null}</div>
                  <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>{s.where} · {s.at}</div></div></div>
              {!s.current ? <IconButton icon="x" size="sm" title="Revoke session" /> : null}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function AppearanceSettings({ dark, onToggleDark }) {
  return (
    <Card title="Appearance" eyebrow="Saved per user" padding="md">
      <div className="mn-row" style={{ justifyContent: 'space-between' }}>
        <div><div style={{ font: 'var(--font-weight-strong) 14px/20px var(--font-sans)' }}>Dark mode</div>
          <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>Switch the interface theme. Applies instantly, no reload.</div></div>
        <button type="button" onClick={() => onToggleDark(!dark)} style={{ border: 0, background: 'transparent', cursor: 'pointer' }}><Toggle on={dark} /></button>
      </div>
    </Card>
  );
}

Object.assign(window, { Settings });