// ── Profile + Settings screens ───────────────────────────────────
const { Icon, Photo, FormScreen, NavRow, ToggleRow, Group, ME } = window;

function Profile({ onBack, onNavigate, savedCount, requestCount, listingCount }) {
  return (
    <FormScreen title="Profile" onBack={onBack} action="Edit" onAction={() => {}}>
      {/* identity */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 4px 22px' }}>
        <div style={{ width: 72, height: 72, borderRadius: 999, overflow: 'hidden', flexShrink: 0 }}>
          <Photo hue={ME.hue} label={false} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 22, fontWeight: 700, letterSpacing: -0.4,
            color: 'var(--ink)' }}>{ME.name}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--muted)', marginTop: 1 }}>{ME.firm}</div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 8, height: 26,
            padding: '0 10px', borderRadius: 999, background: 'var(--accent-soft)', fontFamily: 'var(--sans)',
            fontSize: 12, fontWeight: 600, color: 'var(--accent)' }}>
            <Icon name="check" size={13} s="var(--accent)" sw={2.6} /> Verified {ME.role}</span>
        </div>
      </div>

      <Group header="Selling">
        <NavRow icon="chart" label="Manage listings" detail={String(listingCount)} onClick={() => onNavigate('manage')} />
        <NavRow icon="plus" label="List a new property" onClick={() => onNavigate('listing')} isLast />
      </Group>

      <Group header="Buying & renting">
        <NavRow icon="search" label="My requests" detail={String(requestCount)} onClick={() => onNavigate('requests')} />
        <NavRow icon="heart" label="Saved homes" detail={String(savedCount)} onClick={() => onNavigate('saved')} isLast />
      </Group>

      <Group header="App">
        <NavRow icon="gear" label="Settings" onClick={() => onNavigate('settings')} />
        <NavRow icon="bell" label="Notifications" onClick={() => onNavigate('settings')} />
        <NavRow icon="help" label="Help & support" onClick={() => {}} isLast />
      </Group>

      <div style={{ marginTop: 22 }}>
        <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line)' }}>
          <NavRow icon="logout" label="Log out" danger chevron={false} isLast onClick={() => {}} />
        </div>
      </div>
      <div style={{ textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)',
        marginTop: 18 }}>Haven · v1.0.0</div>
    </FormScreen>
  );
}

function Settings({ onBack }) {
  const [n, setN] = React.useState({ matches: true, drops: true, saved: true, messages: true, marketing: false });
  const set = (k) => (v) => setN(s => ({ ...s, [k]: v }));
  return (
    <FormScreen title="Settings" onBack={onBack}>
      <Group header="Account">
        <NavRow icon="user" label="Personal info" sub="Name, photo, bio" onClick={() => {}} />
        <NavRow icon="card" label="Email & phone" detail="Verified" onClick={() => {}} />
        <NavRow icon="lock" label="Password & security" onClick={() => {}} isLast />
      </Group>

      <Group header="Preferences">
        <NavRow icon="theme" label="Appearance" detail="System" onClick={() => {}} />
        <NavRow icon="search" label="Default view" detail="Buy + Rent" onClick={() => {}} />
        <NavRow icon="globe" label="Currency & units" detail="USD · sqft" onClick={() => {}} isLast />
      </Group>

      <Group header="Notifications">
        <ToggleRow icon="sparkle" label="New matches" sub="Homes that fit your requests" value={n.matches} onChange={set('matches')} />
        <ToggleRow icon="arrowUp" label="Price drops" sub="On homes you've saved" value={n.drops} onChange={set('drops')} />
        <ToggleRow icon="heart" label="Saved home updates" value={n.saved} onChange={set('saved')} />
        <ToggleRow icon="msg" label="Messages" sub="Replies from agents & buyers" value={n.messages} onChange={set('messages')} />
        <ToggleRow icon="bell" label="Tips & offers" value={n.marketing} onChange={set('marketing')} isLast />
      </Group>

      <Group header="Privacy">
        <NavRow icon="pin" label="Location access" detail="While using" onClick={() => {}} />
        <NavRow icon="eye" label="Profile visibility" detail="Public" onClick={() => {}} />
        <NavRow icon="doc" label="Download my data" onClick={() => {}} isLast />
      </Group>

      <Group header="About">
        <NavRow icon="info" label="Terms of service" onClick={() => {}} />
        <NavRow icon="lock" label="Privacy policy" onClick={() => {}} isLast />
      </Group>
      <div style={{ height: 8 }} />
    </FormScreen>
  );
}

Object.assign(window, { Profile, Settings });