// ScrollJob v2 — Mobile filter bottom-sheet + Mobile AI rewrite sheet.
// Loaded after v2-mobile-extra.jsx so it can reuse V2MobileShell/etc., but
// these are presentation-only frames meant to sit inside a 390×844 artboard.

// ────────────────────────────────────────────────────────────────────────
// V2MobileFiltersSheet — slides up from bottom, covers ~85% of viewport.
// We draw the resting state (sheet visible, backdrop darkened behind a
// faded mobile job list so the design reads as the actual interaction).
// ────────────────────────────────────────────────────────────────────────
function V2MobileFiltersSheet() {
  return (
    <div style={{
      width: 390, height: '100%', background: V2.bg,
      fontFamily: V2.font, color: V2.ink, position: 'relative', overflow: 'hidden',
    }}>
      {/* Dimmed faux job-list behind the sheet */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.25, pointerEvents: 'none' }}>
        <V2MobileJobListScreen />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(16,24,40,0.4)' }} />

      {/* Sheet — 85% viewport height, slides up from bottom */}
      <section style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        height: '85%',
        background: '#fff', borderRadius: '20px 20px 0 0',
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 -8px 32px rgba(16,24,40,0.18)',
      }}>
        {/* Drag handle */}
        <div style={{ padding: '12px 0', display: 'flex', justifyContent: 'center' }}>
          <span style={{ width: 40, height: 4, borderRadius: 999, background: V2.lineStrong }} />
        </div>

        {/* Sticky header */}
        <header style={{
          padding: '4px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderBottom: `1px solid ${V2.line}`,
        }}>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Filters
          </h2>
          <button style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: V2.primary, fontSize: 14, fontWeight: 500, fontFamily: V2.font,
          }}>Clear all</button>
        </header>

        {/* Scrollable body */}
        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '16px 20px 20px' }}>
          {/* 1. Distance (single-select chips) */}
          <FilterSection label="Distance from London">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[
                ['On-site only',     false],
                ['Within 1mi',       false],
                ['5mi',              false],
                ['10mi',             true],
                ['25mi',             false],
                ['50mi',             false],
                ['Anywhere in UK',   false],
                ['Remote OK',        false],
              ].map(([t, on]) => (
                <button key={t} style={chipStyle(on)}>{t}</button>
              ))}
            </div>
          </FilterSection>

          {/* 2. Employment type (multi-select chips with check) */}
          <FilterSection label="Employment type">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[
                ['Full-time',    true],
                ['Part-time',    true],
                ['Contract',     false],
                ['Temporary',    false],
                ['Internship',   false],
                ['Apprenticeship', false],
              ].map(([t, on]) => (
                <button key={t} style={chipMultiStyle(on)}>
                  {on && <Icon name="check" size={12} />}{t}
                </button>
              ))}
            </div>
          </FilterSection>

          {/* 3. Salary — segmented control + dual slider */}
          <FilterSection label="Salary range">
            <div style={{
              display: 'inline-flex', background: V2.bgAlt, borderRadius: 999, padding: 3, marginBottom: 14,
            }}>
              {[['Yearly', true], ['Hourly', false]].map(([t, on]) => (
                <button key={t} style={{
                  padding: '6px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
                  border: 'none', cursor: 'pointer', fontFamily: V2.font,
                  background: on ? '#fff' : 'transparent',
                  color: on ? V2.ink : V2.muted,
                  boxShadow: on ? V2.shadowSm : 'none',
                }}>{t}</button>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
              <span style={{ fontSize: 13, color: V2.muted }}>Range</span>
              <span style={{ fontSize: 15, fontWeight: 700, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>
                £18,000 – £45,000
              </span>
            </div>
            <div style={{ position: 'relative', height: 6, background: V2.line, borderRadius: 999, margin: '14px 14px' }}>
              <div style={{
                position: 'absolute', left: '18%', right: '32%', height: '100%',
                background: V2.primary, borderRadius: 999,
              }} />
              <span style={sliderThumbStyle('18%')} />
              <span style={sliderThumbStyle('68%')} />
            </div>
          </FilterSection>

          {/* 4. Work schedule — day-of-week tiles */}
          <FilterSection label="Work schedule">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
              {[
                ['Mon', true],  ['Tue', true],  ['Wed', true],
                ['Thu', true],  ['Fri', true],  ['Sat', false], ['Sun', false],
              ].map(([d, on]) => (
                <button key={d} style={{
                  height: 40, borderRadius: V2.rMd,
                  border: `1px solid ${on ? V2.primary : V2.line}`,
                  background: on ? V2.primarySoft : V2.bgAlt,
                  color: on ? V2.primaryInk : V2.muted,
                  fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: V2.font,
                }}>{d}</button>
              ))}
            </div>
          </FilterSection>

          {/* 5. Posted (radio group) */}
          <FilterSection label="Posted">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                ['Any time',       false],
                ['Last 24 hours',  false],
                ['Last 3 days',    true],
                ['Last 7 days',    false],
                ['Last 14 days',   false],
              ].map(([t, on]) => (
                <label key={t} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 0', borderBottom: `1px solid ${V2.lineSoft}`,
                  fontSize: 14, color: V2.text, fontWeight: on ? 600 : 500,
                  cursor: 'pointer',
                }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    border: `2px solid ${on ? V2.primary : V2.lineStrong}`,
                    background: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    {on && <span style={{ width: 8, height: 8, borderRadius: '50%', background: V2.primary }} />}
                  </span>
                  {t}
                </label>
              ))}
            </div>
          </FilterSection>

          {/* 6. Other — toggles */}
          <FilterSection label="Other">
            {[
              ['Sponsorship available', 'UK only', true],
              ['Disability confident employer', null, true],
              ['No CV required', null, false],
              ['Easy apply', '1-click apply available', true],
            ].map(([t, sub, on]) => (
              <div key={t} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 0', borderBottom: `1px solid ${V2.lineSoft}`,
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: V2.ink }}>{t}</div>
                  {sub && <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>{sub}</div>}
                </div>
                <V2Toggle on={on} />
              </div>
            ))}
          </FilterSection>
        </div>

        {/* Sticky footer */}
        <footer style={{
          padding: '12px 20px 22px', borderTop: `1px solid ${V2.line}`, background: '#fff',
        }}>
          <div style={{ textAlign: 'center', fontSize: 12, color: V2.muted, marginBottom: 8 }}>
            Tap to apply filters
          </div>
          <V2Button variant="primary" size="lg" full iconRight="arrow-right">
            Show 248 jobs
          </V2Button>
        </footer>
      </section>
    </div>
  );
}

function FilterSection({ label, children }) {
  return (
    <section style={{ marginBottom: 22 }}>
      <h3 style={{
        margin: '0 0 12px', fontSize: 11.5, fontWeight: 700,
        color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em',
      }}>{label}</h3>
      {children}
    </section>
  );
}

function chipStyle(on) {
  return {
    padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
    border: `1px solid ${on ? V2.primary : V2.line}`,
    background: on ? V2.primary : '#fff',
    color: on ? '#fff' : V2.ink,
    cursor: 'pointer', fontFamily: V2.font,
  };
}

function chipMultiStyle(on) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
    border: `1px solid ${on ? V2.primaryRing : V2.line}`,
    background: on ? V2.primarySoft : '#fff',
    color: on ? V2.primaryInk : V2.ink,
    cursor: 'pointer', fontFamily: V2.font,
  };
}

function sliderThumbStyle(left) {
  return {
    position: 'absolute', top: '50%', left,
    width: 24, height: 24, borderRadius: '50%',
    background: '#fff',
    boxShadow: V2.shadowMd,
    transform: 'translate(-50%, -50%)',
    border: `2px solid ${V2.primary}`,
  };
}

// ────────────────────────────────────────────────────────────────────────
// V2MobileAIRewriteSheet — full-screen mobile variant of the desktop modal.
// Vertical stack instead of side-by-side; tone selector horizontal scroller;
// apply button pinned to bottom.
// ────────────────────────────────────────────────────────────────────────
function V2MobileAIRewriteSheet() {
  return (
    <div style={{
      width: 390, height: '100%', background: V2.bg,
      fontFamily: V2.font, color: V2.ink,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Sticky header */}
      <header style={{
        flexShrink: 0,
        padding: '14px 16px', borderBottom: `1px solid ${V2.line}`,
        background: 'rgba(255,255,255,0.95)',
        backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <button aria-label="Close" style={{
          width: 40, height: 40, borderRadius: 10, background: V2.bgAlt,
          border: 'none', cursor: 'pointer', color: V2.ink,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name="x" size={18} />
        </button>
        <h3 style={{ flex: 1, margin: 0, fontSize: 17, fontWeight: 600, color: V2.ink, textAlign: 'center' }}>
          Rewrite with AI
        </h3>
        <span style={{
          padding: '4px 10px', borderRadius: 999,
          background: V2.bgAlt, color: V2.muted,
          fontSize: 11.5, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
        }}>3 of 10</span>
      </header>

      {/* Sticky tone selector */}
      <div style={{
        flexShrink: 0, padding: '10px 0 0', borderBottom: `1px solid ${V2.line}`, background: '#fff',
      }}>
        <div style={{
          display: 'flex', gap: 6, padding: '0 16px 0', overflowX: 'auto',
          scrollSnapType: 'x mandatory',
        }}>
          {[
            ['Professional', true],
            ['Casual',       false],
            ['Enthusiastic', false],
            ['Concise',      false],
          ].map(([t, on]) => (
            <div key={t} style={{ scrollSnapAlign: 'start' }}>
              <button style={{
                padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                border: 'none', cursor: 'pointer', fontFamily: V2.font, whiteSpace: 'nowrap',
                background: on ? V2.primary : V2.bgAlt,
                color: on ? '#fff' : V2.text,
              }}>{t}</button>
              <div style={{
                height: 3, marginTop: 8,
                background: on ? V2.primary : 'transparent',
                borderRadius: '3px 3px 0 0',
              }} />
            </div>
          ))}
        </div>
      </div>

      {/* Scrollable body */}
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '14px 16px 16px' }}>
        {/* Collapsible Original */}
        <details style={{
          background: V2.bgAlt, border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
          marginBottom: 14,
        }}>
          <summary style={{
            padding: '12px 14px', cursor: 'pointer',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            listStyle: 'none',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, color: V2.ink2 }}>
              <Icon name="chevron-right" size={14} color={V2.muted} />
              Original
            </span>
            <span style={{ fontSize: 11.5, color: V2.muted, fontFamily: V2.fontMono }}>1,184 chars</span>
          </summary>
          <div style={{
            padding: '0 14px 14px', fontSize: 13, color: V2.muted, lineHeight: 1.65,
            fontFamily: V2.fontMono,
          }}>
            Lavender House is a residential care home in Bristol. We are looking for a care assistant to join our team. The role involves helping our residents with daily living tasks and providing companionship…
          </div>
        </details>

        {/* Rewritten */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8,
        }}>
          <h4 style={{ margin: 0, fontSize: 13, fontWeight: 700, color: V2.ink2,
            textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            Rewritten
          </h4>
          <a style={{ color: V2.primary, fontSize: 12, fontWeight: 600, textDecoration: 'none' }}>
            Try another tone
          </a>
        </div>
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 18, boxShadow: V2.shadowSm, marginBottom: 14,
        }}>
          <p style={{ margin: '0 0 12px', fontSize: 14, color: V2.text, lineHeight: 1.65 }}>
            <span style={inlineGreen}>Join Lavender House</span>, a family-owned residential care home in central Bristol, as a full-time Care Assistant supporting <span style={inlineGreen}>24 older adults including those living with dementia</span>.
          </p>
          <p style={{ margin: '0 0 12px', fontSize: 14, color: V2.text, lineHeight: 1.65 }}>
            You'll deliver personal care, support mobility, assist at mealtimes and provide companionship. <span style={inlineRed}>The role involves</span> a structured two-on / two-off rota (7am–3pm) — predictable hours and proper recovery time.
          </p>
          <p style={{ margin: 0, fontSize: 14, color: V2.text, lineHeight: 1.65 }}>
            <span style={inlineGreen}>No prior care experience required.</span> Full paid induction, NVQ Level 2 sponsorship for the right candidate, weekly pay, workplace pension and a £250 refer-a-friend bonus.
          </p>
        </div>

        {/* Skeleton/loading sample below — design reference for the loading state.
            Subtle dashed border distinguishes it from real content. */}
        <div style={{
          background: '#fff', border: `1px dashed ${V2.lineStrong}`, borderRadius: V2.rLg,
          padding: 18, marginBottom: 14, opacity: 0.6,
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '4px 10px', borderRadius: 999,
            background: V2.primarySoft, color: V2.primaryInk,
            fontSize: 11.5, fontWeight: 700, marginBottom: 14,
          }}>
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: V2.primary,
              animation: 'sjShimmer 1.4s ease-in-out infinite',
            }} />
            Rewriting in "Casual" tone…
          </div>
          <ShimmerLine width="90%" />
          <ShimmerLine width="76%" />
          <ShimmerLine width="84%" />
          <ShimmerLine width="62%" />
          <style>{`
            @keyframes sjShimmer {
              0%, 100% { opacity: 0.4; }
              50% { opacity: 1; }
            }
            @keyframes sjShimmerLine {
              0% { background-position: -200px 0; }
              100% { background-position: 200px 0; }
            }
          `}</style>
        </div>

        {/* Privacy notice */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 11.5, color: V2.muted, lineHeight: 1.55,
        }}>
          <Icon name="shield" size={13} color={V2.muted} />
          Sent to our AI partner only. Not stored for training.
        </div>
      </div>

      {/* Sticky action bar */}
      <footer style={{
        flexShrink: 0, padding: '12px 16px 16px', borderTop: `1px solid ${V2.line}`, background: '#fff',
      }}>
        <button style={{
          width: '100%', height: 56,
          background: V2.primary, color: '#fff',
          border: 'none', borderRadius: V2.rMd,
          fontSize: 16, fontWeight: 700, cursor: 'pointer',
          fontFamily: V2.font,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          boxShadow: V2.shadowSm,
        }}>
          Apply rewrite <Icon name="check" size={18} />
        </button>
        <p style={{
          margin: '8px 0 0', textAlign: 'center', fontSize: 11.5, color: V2.muted,
        }}>
          Replaces current job description
        </p>
      </footer>
    </div>
  );
}

const inlineGreen = {
  background: V2.successBg,
  color: V2.text,
  padding: '0 4px', borderRadius: 3,
  textDecorationLine: 'underline', textDecorationColor: V2.success, textUnderlineOffset: 2,
};
const inlineRed = {
  background: V2.dangerBg,
  color: V2.muted,
  padding: '0 4px', borderRadius: 3,
  textDecoration: 'line-through', textDecorationColor: V2.danger,
};

function ShimmerLine({ width }) {
  return (
    <div style={{
      width, height: 12, borderRadius: 4, marginBottom: 8,
      background: `linear-gradient(90deg, ${V2.line} 0%, ${V2.lineSoft} 50%, ${V2.line} 100%)`,
      backgroundSize: '400px 100%',
      animation: 'sjShimmerLine 1.4s linear infinite',
    }} />
  );
}

Object.assign(window, { V2MobileFiltersSheet, V2MobileAIRewriteSheet });