// ScrollJob v2 expansion #3 — Seeker cabinet (Billing, Notifications, Profile editor)
// Uses CabShell2 from v2-cabinet-extra.jsx so all sidebar links match.

// ─── 1) BILLING + WALLET ─────────────────────────────────────────────────
function V2CabBillingScreen() {
  const txns = [
    { date: '14 May 2026', type: 'Plan',     desc: 'Pro plan — monthly',         amount: '−£12.00',  status: 'Paid' },
    { date: '10 May 2026', type: 'Wallet',   desc: 'Wallet top-up',              amount: '+£20.00',  status: 'Completed' },
    { date: '08 May 2026', type: 'Refund',   desc: 'Refund for unused boost',    amount: '+£4.50',   status: 'Completed' },
    { date: '14 Apr 2026', type: 'Plan',     desc: 'Pro plan — monthly',         amount: '−£12.00',  status: 'Paid' },
    { date: '02 Apr 2026', type: 'Wallet',   desc: 'Wallet top-up',              amount: '+£10.00',  status: 'Completed' },
    { date: '14 Mar 2026', type: 'Plan',     desc: 'Pro plan — monthly',         amount: '−£12.00',  status: 'Paid' },
  ];
  return (
    <CabShell2
      active="settings"
      title="Billing & wallet"
      sub="Plan, payment method, wallet balance and transaction history"
      rightAction={<V2Button variant="secondary" size="md" icon="document">Download invoices</V2Button>}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, marginBottom: 18 }}>
        {/* Plan card */}
        <section style={{
          background: V2.brandGradient, color: '#fff',
          borderRadius: V2.rLg, padding: 22, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px', borderRadius: 999,
            background: 'rgba(255,255,255,0.18)',
            fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>Pro plan · active</div>
          <h2 style={{ margin: '0 0 6px', fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>
            £12.00 <span style={{ opacity: 0.85, fontSize: 16, fontWeight: 600 }}>/ month</span>
          </h2>
          <p style={{ margin: '0 0 18px', fontSize: 13.5, opacity: 0.92, lineHeight: 1.55, maxWidth: 360 }}>
            Renews 14 June 2026 · Visa •••• 4242. Cancel anytime, your benefits run to end of period.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <V2Button variant="secondary" size="sm">Change plan</V2Button>
            <button style={{
              padding: '8px 14px', borderRadius: 8,
              background: 'rgba(255,255,255,0.12)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.30)',
              fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
            }}>Cancel plan</button>
          </div>
        </section>

        {/* Wallet card */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
        }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>
            Wallet balance
          </div>
          <div style={{ fontSize: 36, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>
            £22.50
          </div>
          <p style={{ margin: '10px 0 18px', fontSize: 13, color: V2.muted, lineHeight: 1.55 }}>
            Use wallet credit for boosts, premium features or applications.
          </p>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="primary" size="md" icon="plus">Add funds</V2Button>
            <V2Button variant="secondary" size="md">Send refund</V2Button>
          </div>
        </section>
      </div>

      {/* Payment method */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 18, marginBottom: 18,
        display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
      }}>
        <span style={{
          width: 48, height: 32, background: V2.ink, color: '#fff',
          borderRadius: 6, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, fontWeight: 800, letterSpacing: '0.04em',
        }}>VISA</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>Visa •••• 4242</div>
          <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>Expires 09/28 · default</div>
        </div>
        <V2Button variant="secondary" size="sm">Update card</V2Button>
        <V2Button variant="ghost" size="sm">Add payment method</V2Button>
      </section>

      {/* Transactions table */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
      }}>
        <header style={{
          padding: '14px 22px', borderBottom: `1px solid ${V2.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <h2 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.ink }}>Transaction history</h2>
          <div style={{ display: 'flex', gap: 6 }}>
            {['All', 'Plan', 'Wallet', 'Refunds'].map((t, i) => (
              <button key={t} style={{
                padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600,
                border: `1px solid ${i === 0 ? V2.ink : V2.line}`,
                background: i === 0 ? V2.ink : '#fff', color: i === 0 ? '#fff' : V2.text,
                cursor: 'pointer', fontFamily: V2.font,
              }}>{t}</button>
            ))}
          </div>
        </header>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              {['Date', 'Type', 'Description', 'Amount', 'Status', ''].map((h) => (
                <th key={h} style={{
                  textAlign: 'left', padding: '12px 22px',
                  color: V2.muted, fontWeight: 700, fontSize: 11,
                  textTransform: 'uppercase', letterSpacing: '0.06em',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {txns.map((t, i, arr) => (
              <tr key={i} style={{ borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none' }}>
                <td style={{ padding: '14px 22px', color: V2.text }}>{t.date}</td>
                <td style={{ padding: '14px 22px' }}>
                  <V2Badge tone={t.type === 'Wallet' ? 'primary' : t.type === 'Refund' ? 'success' : 'neutral'} size="sm">{t.type}</V2Badge>
                </td>
                <td style={{ padding: '14px 22px', color: V2.ink, fontWeight: 600 }}>{t.desc}</td>
                <td style={{
                  padding: '14px 22px', fontWeight: 700,
                  color: t.amount.startsWith('+') ? V2.success : V2.ink,
                  fontVariantNumeric: 'tabular-nums',
                }}>{t.amount}</td>
                <td style={{ padding: '14px 22px' }}>
                  <V2Badge tone="success" size="sm">{t.status}</V2Badge>
                </td>
                <td style={{ padding: '14px 22px' }}>
                  <a style={{ color: V2.primary, fontWeight: 600, fontSize: 13, textDecoration: 'none' }}>
                    Receipt →
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </CabShell2>
  );
}

// ─── 2) NOTIFICATION INBOX ───────────────────────────────────────────────
function V2CabNotificationInboxScreen() {
  const groups = [
    ['Today', [
      { icon: 'sparkle',  iconBg: V2.primarySoft, iconColor: V2.primary,
        title: '3 new matches for "Care assistant · Bristol"',
        body: 'Lavender House Care, Sunrise Senior Living and Caremark are hiring.',
        time: '3h ago', unread: true, kind: 'match' },
      { icon: 'check',    iconBg: V2.successBg, iconColor: V2.success,
        title: 'Your application is being reviewed',
        body: 'Mercury Couriers · Delivery Driver. Recruiter has opened your CV.',
        time: '5h ago', unread: true, kind: 'application' },
      { icon: 'mail',     iconBg: '#FEF6E6', iconColor: '#B45309',
        title: 'New message from Lavender House Care',
        body: '"Hi Emma — can you do a quick call Wednesday afternoon?"',
        time: '8h ago', unread: false, kind: 'application' },
    ]],
    ['Yesterday', [
      { icon: 'briefcase', iconBg: V2.bgAlt, iconColor: V2.ink,
        title: 'Interview scheduled — Mercury Couriers',
        body: 'Phone screen confirmed for Thursday 16 May, 14:00 UK.',
        time: 'Yesterday, 17:42', unread: false, kind: 'application' },
      { icon: 'bookmark', iconBg: V2.primarySoft, iconColor: V2.primary,
        title: 'A job you saved is closing in 24 hours',
        body: 'Senior Care Assistant — Sunrise Senior Living. Apply soon.',
        time: 'Yesterday, 09:08', unread: false, kind: 'match' },
    ]],
    ['This week', [
      { icon: 'shield',   iconBg: V2.warnBg, iconColor: V2.warn,
        title: 'Security: new sign-in from Bristol',
        body: 'Chrome on macOS, IP 86.4.···. Was this you?',
        time: '2 days ago', unread: false, kind: 'system' },
      { icon: 'document', iconBg: '#FCE7F3', iconColor: '#9D174D',
        title: 'CV parsed successfully',
        body: '12 work items, 4 education entries, 9 skills detected. Review now?',
        time: '3 days ago', unread: false, kind: 'system' },
    ]],
    ['Earlier', [
      { icon: 'bell',     iconBg: V2.bgAlt, iconColor: V2.muted,
        title: 'Your weekly digest is ready',
        body: '24 new jobs match your saved searches this week.',
        time: '1 week ago', unread: false, kind: 'match' },
    ]],
  ];
  return (
    <CabShell2
      active="settings"
      title="Inbox"
      sub="In-app notifications · 4 unread"
      rightAction={
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="md" icon="check">Mark all read</V2Button>
          <V2Button variant="ghost" size="md" icon="sliders">Settings</V2Button>
        </div>
      }
    >
      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
        {[['All', 8, true], ['Job matches', 4], ['Applications', 3], ['System', 2]].map(([t, n, on]) => (
          <button key={t} style={{
            padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
            border: `1px solid ${on ? V2.ink : V2.line}`,
            background: on ? V2.ink : '#fff', color: on ? '#fff' : V2.text,
            cursor: 'pointer', fontFamily: V2.font,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>{t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span></button>
        ))}
      </div>

      {/* Grouped list */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
      }}>
        {groups.map(([day, items], gi) => (
          <div key={day}>
            <div style={{
              padding: '12px 22px', background: V2.bgAlt,
              borderBottom: `1px solid ${V2.line}`,
              fontSize: 11, fontWeight: 700, color: V2.muted,
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>{day}</div>
            {items.map((n, i, arr) => (
              <a key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                padding: '16px 22px',
                borderBottom: i < arr.length - 1 || gi < groups.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                background: n.unread ? '#fafbff' : '#fff',
                textDecoration: 'none', color: 'inherit',
                position: 'relative',
              }}>
                <span style={{
                  width: 40, height: 40, borderRadius: 10, background: n.iconBg, color: n.iconColor,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <Icon name={n.icon} size={18} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 14.5, fontWeight: n.unread ? 700 : 600, color: V2.ink }}>{n.title}</span>
                    {n.unread && (
                      <span style={{ width: 7, height: 7, borderRadius: '50%', background: V2.primary, flexShrink: 0 }} />
                    )}
                  </div>
                  <div style={{ fontSize: 13, color: V2.muted, marginTop: 4, lineHeight: 1.5 }}>{n.body}</div>
                </div>
                <span style={{ fontSize: 12, color: V2.muted, whiteSpace: 'nowrap', flexShrink: 0 }}>{n.time}</span>
              </a>
            ))}
          </div>
        ))}
      </div>
    </CabShell2>
  );
}

// ─── 3) STRUCTURED PROFILE EDITOR ────────────────────────────────────────
function V2CabProfileEditorScreen() {
  const sections = [
    { key: 'experience',     label: 'Experience',     icon: 'briefcase', count: 3, complete: true,  open: true },
    { key: 'education',      label: 'Education',      icon: 'graduate',  count: 2, complete: true },
    { key: 'skills',         label: 'Skills',         icon: 'star',      count: 7, complete: false, hint: 'Add 2 more for better matches' },
    { key: 'languages',      label: 'Languages',      icon: 'globe',     count: 2, complete: true },
    { key: 'projects',       label: 'Projects',       icon: 'sparkle',   count: 0, complete: false, hint: 'Optional · helps stand out' },
    { key: 'certifications', label: 'Certifications', icon: 'shield',    count: 2, complete: true },
    { key: 'contact',        label: 'Contact',        icon: 'mail',      count: 4, complete: true },
  ];
  return (
    <CabShell2
      active="resume"
      title="Profile"
      sub="Structured data drives your match score and the resumes you publish"
      rightAction={
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Badge tone="success" size="md" icon="check">Saved 4s ago</V2Badge>
          <V2Button variant="primary" size="md" icon="eye">Preview profile</V2Button>
        </div>
      }
    >
      {/* Completion + match insight */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap',
      }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>Profile completeness</span>
            <span style={{ fontSize: 14, color: V2.muted }}>
              <strong style={{ color: V2.primary }}>65%</strong> complete
            </span>
          </div>
          <div style={{ height: 8, background: V2.line, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '65%', height: '100%', background: V2.brandGradient, borderRadius: 999 }} />
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, color: V2.muted, lineHeight: 1.55 }}>
            Add <strong style={{ color: V2.ink }}>2 more skills</strong> and a <strong style={{ color: V2.ink }}>project</strong> to reach 80%. Profiles above 80% get 2.6× more recruiter views.
          </p>
        </div>
        <V2Button variant="secondary" size="md" icon="sparkle">Auto-improve with AI</V2Button>
      </div>

      {/* Upload-to-autofill dropzone */}
      <div style={{
        background: V2.primarySoft, border: `2px dashed ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22, marginBottom: 18,
        display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
      }}>
        <span style={{
          width: 44, height: 44, borderRadius: 12, background: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name="document" size={22} color={V2.primary} />
        </span>
        <div style={{ flex: 1, minWidth: 220 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: V2.primaryInk }}>
            Drop your CV here to auto-fill every section
          </div>
          <div style={{ fontSize: 12.5, color: V2.text, marginTop: 4 }}>
            PDF or DOCX · we parse experience, education, skills and projects. You review every field before saving.
          </div>
        </div>
        <V2Button variant="primary" size="md" icon="document">Choose file…</V2Button>
      </div>

      {/* Section accordions */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {sections.map((s) => <ProfileSectionAccordion key={s.key} section={s} />)}
      </div>
    </CabShell2>
  );
}

function ProfileSectionAccordion({ section }) {
  return (
    <article style={{
      background: '#fff', border: `1px solid ${section.open ? V2.primaryRing : V2.line}`,
      borderRadius: V2.rLg, overflow: 'hidden',
    }}>
      <header style={{
        padding: '16px 20px',
        display: 'flex', alignItems: 'center', gap: 14,
        borderBottom: section.open ? `1px solid ${V2.line}` : 'none',
        cursor: 'pointer',
      }}>
        <Icon name="menu" size={16} color={V2.faint} style={{ cursor: 'grab' }} />
        <span style={{
          width: 36, height: 36, borderRadius: 10,
          background: section.complete ? V2.successBg : V2.bgAlt,
          color: section.complete ? V2.success : V2.muted,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={section.icon} size={17} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.ink }}>{section.label}</h3>
            <span style={{ fontSize: 12, color: V2.muted }}>{section.count} item{section.count === 1 ? '' : 's'}</span>
            {section.complete
              ? <V2Badge tone="success" size="sm" icon="check">Complete</V2Badge>
              : <V2Badge tone="warn" size="sm">Needs attention</V2Badge>}
          </div>
          {section.hint && (
            <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 4 }}>{section.hint}</div>
          )}
        </div>
        <V2Button variant="secondary" size="sm" icon="plus">Add</V2Button>
        <Icon name={section.open ? 'chevron-down' : 'chevron-right'} size={18} color={V2.muted} />
      </header>

      {section.open && (
        <div style={{ padding: '8px 20px 20px' }}>
          {/* Experience items */}
          {[
            { role: 'Care Assistant',            co: 'Sunrise Care Home', range: 'Mar 2022 – Present', loc: 'Bristol' },
            { role: 'Healthcare Support Worker', co: 'NHS Trust',         range: 'Sep 2020 – Feb 2022', loc: 'Bath' },
            { role: 'Retail Assistant',          co: "Sainsbury's",       range: 'Jun 2019 – Aug 2020', loc: 'Bristol' },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 0',
              borderTop: `1px solid ${V2.lineSoft}`,
            }}>
              <Icon name="menu" size={14} color={V2.faint} style={{ cursor: 'grab' }} />
              <div style={{
                width: 36, height: 36, borderRadius: 10, background: V2.bgAlt,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="briefcase" size={15} color={V2.muted} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{r.role}</div>
                <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>
                  {r.co} · {r.range} · {r.loc}
                </div>
              </div>
              <V2Button variant="ghost" size="sm" icon="edit">Edit</V2Button>
              <V2Button variant="ghost" size="sm" icon="x" />
            </div>
          ))}
          <button style={{
            marginTop: 14, padding: '10px 14px', borderRadius: 10,
            border: `1px dashed ${V2.lineStrong}`, background: 'transparent',
            color: V2.text, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
            fontFamily: V2.font, display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <Icon name="plus" size={14} /> Add experience
          </button>
        </div>
      )}
    </article>
  );
}

Object.assign(window, {
  V2CabBillingScreen, V2CabNotificationInboxScreen, V2CabProfileEditorScreen,
});