// Settings page — theme toggle + account info + access management.

function SettingsPageContent({ go }) {
    const cl = window.CP_CLIENT || {};
    const [theme, setTheme] = React.useState(() => HKTheme.current);

    React.useEffect(() => {
      const onT = (e) => setTheme(e.detail);
      window.addEventListener('hk:theme', onT);
      return () => window.removeEventListener('hk:theme', onT);
    }, []);

    return (
      <>
        <div style={{ maxWidth: 600 }}>
          {/* Appearance */}
          <Card style={{ marginBottom: 20 }}>
            <CardHead title="Appearance" subtitle="Customize how the portal looks on this device"/>
            <CardBody style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              <SettingRow
                label="Color scheme"
                description="Choose between light and dark mode"
                action={
                  <div style={{ display: 'flex', gap: 8 }}>
                    <ThemeButton active={theme === 'light'} label="Light" icon="sun"  onClick={() => { HKTheme.set('light'); }}/>
                    <ThemeButton active={theme === 'dark'}  label="Dark"  icon="moon" onClick={() => { HKTheme.set('dark');  }}/>
                  </div>
                }
              />
            </CardBody>
          </Card>

          {/* Account info */}
          <Card style={{ marginBottom: 20 }}>
            <CardHead title="Your account" subtitle="Information about your HiKit portal"/>
            <CardBody style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              <SettingRow label="Company"   value={cl.name || '—'}/>
              <SettingRow label="Domain"    value={cl.domain || '—'}/>
              <SettingRow label="Email"     value={cl.email || '—'}/>
              <SettingRow label="Plan"      value={cl.plan || 'Free SEO Audit'}/>
              <SettingRow label="Audit date" value={cl.auditDate || '—'}/>
            </CardBody>
          </Card>

          {/* Access */}
          <Card style={{ marginBottom: 20 }}>
            <CardHead title="Portal access" subtitle="Login credentials are managed by your HiKit account manager"/>
            <CardBody style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6 }}>
                To change your access password or share portal access with a team member, contact your account manager:
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {cl.managerEmail && (
                  <a href={`mailto:${cl.managerEmail}?subject=Portal%20access%20%E2%80%94%20${encodeURIComponent(cl.name || '')}`} style={{ textDecoration: 'none' }}>
                    <Btn size="sm" icon="external">Email account manager</Btn>
                  </a>
                )}
                {cl.bookingUrl && (
                  <a href={cl.bookingUrl} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                    <Btn size="sm" variant="ghost">Book a call</Btn>
                  </a>
                )}
              </div>
            </CardBody>
          </Card>

          {/* Sign out */}
          <Card>
            <CardHead title="Session"/>
            <CardBody>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>You are currently signed in.</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
                    Your session persists for 7 days. Signing out clears it from this device.
                  </div>
                </div>
                <Btn
                  variant="danger"
                  size="sm"
                  onClick={() => {
                    document.cookie = 'hk_cp=; max-age=0; path=/';
                    location.reload();
                  }}
                >
                  Sign out
                </Btn>
              </div>
            </CardBody>
          </Card>
        </div>
      </>
    );
}

CP_PAGES.settings = {
  title: 'Settings',
  component: SettingsPageContent,
};

function SettingRow({ label, value, description, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: '1px solid var(--border)' }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--ink)' }}>{label}</div>
        {description && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{description}</div>}
        {value && <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>{value}</div>}
      </div>
      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
    </div>
  );
}

function ThemeButton({ active, label, icon, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '6px 14px', border: '1px solid', borderRadius: 'var(--r-pill)',
        fontWeight: 500, fontSize: 13, cursor: 'pointer',
        background: active ? 'var(--ink)' : 'var(--surface)',
        color: active ? 'var(--paper)' : 'var(--ink-2)',
        borderColor: active ? 'var(--ink)' : 'var(--border-input)',
        transition: 'all .14s',
      }}
    >
      <Icon name={icon} size={14}/>
      {label}
    </button>
  );
}