// ScrollJob v2 — extra cabinet screens
// Saved searches · Recommendations · Notifications · Profile share

// Shared cabinet shell (reuses V2SeekerSidebar from v2-product.jsx)
function CabShell2({ active, title, sub, children, rightAction }) {
  const nav = [
    ['dashboard',    'Dashboard',     'home'],
    ['saved',        'Saved jobs',    'bookmark', 8],
    ['searches',     'Saved searches','search',   3],
    ['recommendations','Recommendations','sparkle', 24],
    ['applications', 'Applications',  'check',   12],
    ['history',      'Browse history','clock'],
    ['profile-share','Share profile', 'share'],
    ['resume',       'Resume',        'document'],
    ['notifications','Notifications', 'bell'],
    ['settings',     'Settings',      'sliders'],
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '260px minmax(0, 1fr)', gap: 32, alignItems: 'start' }}>
          <V2SeekerSidebar items={nav} active={active} />
          <div>
            <header style={{
              marginBottom: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16,
            }}>
              <div>
                <h1 style={{ margin: '0 0 4px', fontSize: 28, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>{title}</h1>
                <p style={{ margin: 0, fontSize: 15, color: V2.muted }}>{sub}</p>
              </div>
              {rightAction}
            </header>
            {children}
          </div>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

// ─── 1) SAVED SEARCHES + ALERTS ────────────────────────────────────────
function V2CabSavedSearchesScreen() {
  const searches = [
    {
      name: 'Care assistant · Bristol',
      chips: [['Healthcare', 'cat'], ['Bristol', 'loc'], ['Within 10mi', 'dist'], ['£12/hr+', 'sal'], ['Part-time', 'type']],
      freq: 'Daily', lastSent: '3 hours ago', active: true, count: 248,
    },
    {
      name: 'Warehouse · Greater Manchester',
      chips: [['Logistics', 'cat'], ['Manchester', 'loc'], ['Within 25mi', 'dist'], ['Day shift', 'shift']],
      freq: 'Daily', lastSent: 'Yesterday', active: true, count: 612,
    },
    {
      name: 'Remote customer support · UK',
      chips: [['Remote', 'cat'], ['UK only', 'reg'], ['£24k+', 'sal']],
      freq: 'Weekly', lastSent: '4 days ago', active: false, count: 318,
    },
  ];
  return (
    <CabShell2
      active="searches"
      title="Saved searches & alerts"
      sub="3 saved · 2 active · most recent run 3 hours ago"
      rightAction={<V2Button variant="primary" size="md" icon="plus">Create new search</V2Button>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {searches.map((s, i) => (
          <article key={i} style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18,
          }}>
            <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14, gap: 12 }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 8 }}>
                  <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: V2.ink }}>{s.name}</h3>
                  <V2Badge tone={s.active ? 'success' : 'neutral'} size="sm">
                    {s.active ? 'Active' : 'Paused'}
                  </V2Badge>
                  <V2Badge tone="info" size="sm" icon="bell">{s.freq} alerts</V2Badge>
                  <span style={{ fontSize: 12, color: V2.muted }}>·  {s.count} matching jobs</span>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {s.chips.map(([label, k]) => (
                    <span key={k} style={{
                      padding: '4px 10px', borderRadius: 999,
                      background: V2.bgAlt, color: V2.text,
                      fontSize: 12, fontWeight: 500,
                    }}>{label}</span>
                  ))}
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                <V2Toggle on={s.active} />
                <V2Button variant="secondary" size="sm">Edit</V2Button>
                <V2Button variant="destructive" size="sm">Delete</V2Button>
              </div>
            </header>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontSize: 12.5, color: V2.muted, paddingTop: 12, borderTop: `1px solid ${V2.lineSoft}`,
            }}>
              <span>Last sent <strong style={{ color: V2.text }}>{s.lastSent}</strong></span>
              <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                View results <Icon name="arrow-right" size={13} />
              </a>
            </div>
          </article>
        ))}
      </div>

      {/* Create new — collapsed form */}
      <div style={{
        marginTop: 18,
        background: V2.primarySoft, border: `1px dashed ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <span style={{
          width: 40, height: 40, borderRadius: 10, background: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="plus" size={18} color={V2.primary} />
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: V2.primaryInk }}>Create a new saved search</div>
          <div style={{ fontSize: 13, color: V2.text, marginTop: 2 }}>
            Mirror your job-list filters and choose how often to get alerts.
          </div>
        </div>
        <V2Button variant="primary" size="md" iconRight="arrow-right">Open builder</V2Button>
      </div>
    </CabShell2>
  );
}

// ─── 2) RECOMMENDATIONS ────────────────────────────────────────────────
function V2CabRecommendationsScreen() {
  const recs = [
    { job: V2_JOBS[1], score: 94, reasons: ['Care experience', 'Bristol', 'Part-time'] },
    { job: V2_JOBS[9], score: 88, reasons: ['Healthcare', 'NMC pipeline match', 'Day shift'] },
    { job: V2_JOBS[0], score: 82, reasons: ['Manchester reachable', 'Entry-level OK'] },
    { job: V2_JOBS[3], score: 78, reasons: ['Front-of-house experience', 'Part-time'] },
    { job: V2_JOBS[5], score: 74, reasons: ['Remote UK', 'Customer-facing'] },
    { job: V2_JOBS[6], score: 71, reasons: ['Office admin', 'Hybrid in Leeds'] },
  ];
  return (
    <CabShell2
      active="recommendations"
      title="Recommended for you"
      sub="24 personalized matches today · based on your activity, profile and saved searches"
    >
      {/* Why explainer */}
      <details style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 18, marginBottom: 18,
      }}>
        <summary style={{
          fontSize: 14, fontWeight: 700, color: V2.ink,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
        }}>
          Why these recommendations?
          <Icon name="chevron-down" size={16} color={V2.muted} />
        </summary>
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
            { icon: 'briefcase', label: 'Skills & experience', match: 'Senior · 4y care · NVQ L2' },
            { icon: 'pin',       label: 'Location',            match: 'Bristol + 25mi commute' },
            { icon: 'money',     label: 'Salary band',         match: '£11–14 /hr · part-time' },
            { icon: 'clock',     label: 'Working pattern',     match: 'Day shifts · weekdays + alt weekends' },
            { icon: 'bookmark',  label: 'Saved searches',      match: 'Care assistant · Bristol' },
            { icon: 'eye',       label: 'Recent activity',     match: 'Viewed 18 care roles last 7 days' },
          ].map((f) => (
            <div key={f.label} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <span style={{
                width: 30, height: 30, borderRadius: 8, background: V2.primarySoft,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <Icon name={f.icon} size={15} color={V2.primary} />
              </span>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: V2.ink }}>{f.label}</div>
                <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>{f.match}</div>
              </div>
            </div>
          ))}
        </div>
      </details>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
        {recs.map((r, i) => (
          <article key={i} style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 14, right: 14,
            }}><MatchScorePill score={r.score} reasons={r.reasons} /></div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', paddingRight: 110 }}>
              <V2CompanyAvatar name={r.job.company} category={r.job.category} size={44} radius={11} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <h3 style={{ margin: '0 0 4px', fontSize: 15.5, fontWeight: 700, color: V2.ink, lineHeight: 1.3 }}>
                  {r.job.title}
                </h3>
                <div style={{ fontSize: 13, color: V2.text, fontWeight: 500 }}>{r.job.company}</div>
                <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 4 }}>
                  {r.job.location} · {r.job.salary} · {r.job.type}
                </div>
              </div>
            </div>
            <div style={{
              marginTop: 14, padding: '10px 12px', background: V2.bgAlt,
              borderRadius: V2.rMd, fontSize: 12, color: V2.text,
            }}>
              <strong style={{ color: V2.ink }}>Why for you:</strong>{' '}
              {r.reasons.map((rx, i, arr) => (
                <span key={rx}>{rx}{i < arr.length - 1 ? ' · ' : ''}</span>
              ))}
            </div>
            <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <a style={{ fontSize: 12.5, color: V2.muted, textDecoration: 'underline', cursor: 'pointer' }}>
                Show fewer like this
              </a>
              <V2Button variant="primary" size="sm" iconRight="arrow-right">View job</V2Button>
            </div>
          </article>
        ))}
      </div>
    </CabShell2>
  );
}

// ─── 3) NOTIFICATIONS ──────────────────────────────────────────────────
function V2CabNotificationsScreen() {
  const rows = [
    { event: 'New match for saved search',  desc: 'When a new job matches one of your saved searches' },
    { event: 'Application status update',   desc: 'Reviewed / Interview / Offer / Rejected from employer' },
    { event: 'Employer responds to message', desc: 'Direct reply to your application or follow-up' },
    { event: 'Weekly digest',                desc: 'Sunday evening summary of new jobs + activity' },
    { event: 'Swipe super-likes received',   desc: 'When an employer flags your profile as a top match' },
    { event: 'Resume profile views',         desc: 'When a recruiter views your hosted resume' },
  ];
  const channels = ['Email', 'Browser push', 'In-app'];
  return (
    <CabShell2
      active="notifications"
      title="Notification preferences"
      sub="Pick what you want to know — and where."
      rightAction={
        <V2Button variant="secondary" size="md" icon="bell">Send a test notification</V2Button>
      }
    >
      {/* Pause all */}
      <div style={{
        background: V2.warnBg, border: `1px solid ${V2.warnLine}`,
        borderRadius: V2.rLg, padding: 16, marginBottom: 18,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <Icon name="bell" size={20} color={V2.warn} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: V2.warn }}>Pause all notifications for 24 hours</div>
          <div style={{ fontSize: 12.5, color: V2.text, marginTop: 2 }}>
            Useful during interviews or focus time. Auto-resumes after 24h.
          </div>
        </div>
        <V2Toggle />
      </div>

      {/* Matrix */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              <th style={{ textAlign: 'left', padding: '14px 22px', color: V2.muted, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Event</th>
              {channels.map((c) => (
                <th key={c} style={{ width: 110, textAlign: 'center', padding: '14px 12px', color: V2.muted, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => {
              // arbitrary defaults
              const on = [
                [true,  true,  true],
                [true,  true,  true],
                [true,  false, true],
                [true,  false, false],
                [true,  true,  true],
                [false, false, true],
              ][i];
              return (
                <tr key={r.event} style={{ borderBottom: i < rows.length - 1 ? `1px solid ${V2.lineSoft}` : 'none' }}>
                  <td style={{ padding: '16px 22px' }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink }}>{r.event}</div>
                    <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 3 }}>{r.desc}</div>
                  </td>
                  {channels.map((c, ci) => (
                    <td key={c} style={{ padding: '14px 12px', textAlign: 'center' }}>
                      <V2Toggle on={on[ci]} />
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Channel-level controls */}
      <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {[
          { icon: 'mail',   t: 'Email',          v: 'emma.carter@example.com', cta: 'Change' },
          { icon: 'bell',   t: 'Browser push',   v: 'Enabled on this device',  cta: 'Manage devices' },
          { icon: 'globe',  t: 'In-app',         v: 'Always on while signed in', cta: '—' },
        ].map((b) => (
          <div key={b.t} style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, padding: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <Icon name={b.icon} size={16} color={V2.primary} />
              <span style={{ fontSize: 13, fontWeight: 700, color: V2.ink }}>{b.t}</span>
            </div>
            <div style={{ fontSize: 12.5, color: V2.muted, marginBottom: 10 }}>{b.v}</div>
            {b.cta !== '—' && (
              <a style={{ fontSize: 12.5, color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>{b.cta} →</a>
            )}
          </div>
        ))}
      </div>
    </CabShell2>
  );
}

// ─── 4) SHARE MY PROFILE ──────────────────────────────────────────────
function V2CabProfileShareScreen() {
  const fields = [
    ['Show email',                 'emma.carter@example.com', true],
    ['Show phone',                 '+44 7700 900 123',         false],
    ['Show salary expectation',    '£12.80–£14.00 / hour',    true],
    ['Show employment history',    'Sunrise, NHS, Sainsbury\u2019s', true],
    ['Show education',             'NVQ Level 2 in Care',     true],
    ['Show notice period',         '4 weeks',                  true],
  ];
  return (
    <CabShell2
      active="profile-share"
      title="Share my profile"
      sub="Generate a private link recruiters can view. Choose what's visible."
      rightAction={<V2Button variant="secondary" size="md" icon="eye">View as recruiter</V2Button>}
    >
      {/* Share link card */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22, marginBottom: 18,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <V2Badge tone="success" size="md" icon="check">Active</V2Badge>
          <span style={{ fontSize: 13, color: V2.muted }}>
            Created 14 May 2026 · 12 views in the last 7 days
          </span>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '14px 16px', background: V2.bgAlt,
          border: `1px solid ${V2.line}`, borderRadius: V2.rMd, marginBottom: 14,
        }}>
          <Icon name="globe" size={16} color={V2.muted} />
          <code style={{
            flex: 1, fontFamily: V2.fontMono, fontSize: 14,
            color: V2.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>scrolljob.org/profile/uK9-X42-pQz7vL3</code>
          <V2Button variant="primary" size="sm" icon="share">Copy link</V2Button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5, color: V2.muted }}>
          <span>Link expires never · password protection available on request</span>
          <button style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: V2.danger, fontSize: 12.5, fontWeight: 600, textDecoration: 'underline',
          }}>Generate new link (invalidates old)</button>
        </div>
      </div>

      {/* Visibility toggles */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
      }}>
        <h2 style={{ margin: '0 0 16px', fontSize: 16, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
          What recruiters can see
        </h2>
        {fields.map(([label, val, on], i, arr) => (
          <div key={label} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '14px 0', borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink }}>{label}</div>
              <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>
                {on ? `Visible: ${val}` : `Hidden`}
              </div>
            </div>
            <V2Toggle on={on} />
          </div>
        ))}
      </div>

      {/* Preview hint */}
      <div style={{
        marginTop: 18, padding: 16,
        background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rMd, display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <Icon name="eye" size={18} color={V2.primary} />
        <div style={{ flex: 1, fontSize: 13, color: V2.text }}>
          Click <strong>"View as recruiter"</strong> to see exactly what someone with your link will see — including what's hidden.
        </div>
        <V2Button variant="primary" size="sm">Open preview</V2Button>
      </div>
    </CabShell2>
  );
}

Object.assign(window, {
  V2CabSavedSearchesScreen, V2CabRecommendationsScreen,
  V2CabNotificationsScreen, V2CabProfileShareScreen,
});