// ScrollJob v2 — GDPR-compliant account deletion flow.
// Two screens — pre-deletion confirmation form + 14-day grace period
// pending screen. Both designed so the user can back out at any point.

// ─── (A) Confirm deletion ───────────────────────────────────────────────
function V2AccountDeleteScreen() {
  return (
    <CabShell2
      active="settings"
      title="Delete your account"
      sub="Before you go — review what stays, what's removed, and how to cancel."
    >
      {/* Danger banner */}
      <div style={{
        background: V2.dangerBg, border: `1px solid ${V2.dangerLine}`,
        borderRadius: V2.rLg, padding: 18, marginBottom: 22,
        display: 'flex', gap: 14, alignItems: 'flex-start',
      }}>
        <span style={{
          width: 36, height: 36, borderRadius: 10, background: '#fff', color: V2.danger,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          boxShadow: V2.shadowSm,
        }}>
          <WarningTriangleIcon />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: V2.danger }}>
            This action is permanent
          </div>
          <p style={{ margin: '4px 0 0', fontSize: 13.5, color: V2.text, lineHeight: 1.55 }}>
            We give you a 14-day grace period. After that, we cannot recover your account, your applications, or any of your saved data.
          </p>
        </div>
      </div>

      {/* What will be deleted */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 14,
      }}>
        <h2 style={delHeading()}>What will be deleted</h2>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
          {[
            { t: 'Profile, resume, saved jobs', sub: 'Immediate' },
            { t: 'Job applications you submitted', sub: 'Kept anonymized for employer records — see Privacy policy' },
            { t: 'Saved searches & alerts', sub: 'Immediate · email reminders stop within 5 minutes' },
            { t: 'Wallet credits (£22.50)', sub: 'Refunded to Visa •••• 4242 within 7 days' },
            { t: 'Browse history', sub: 'Immediate' },
            { t: 'Notification preferences', sub: 'Immediate' },
          ].map((it) => (
            <li key={it.t} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12,
              fontSize: 14, color: V2.text, lineHeight: 1.55,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: V2.dangerBg, color: V2.danger,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, marginTop: 1,
              }}>
                <Icon name="x" size={13} strokeWidth={2.5} />
              </span>
              <div>
                <div style={{ fontWeight: 600, color: V2.ink }}>{it.t}</div>
                <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>{it.sub}</div>
              </div>
            </li>
          ))}
        </ul>
      </section>

      {/* What stays */}
      <section style={{
        background: V2.bgAlt, border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 22,
      }}>
        <h2 style={delHeading()}>What stays</h2>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
          {[
            'Anonymized application records (legal retention)',
            'Anonymized aggregate analytics (cannot be tied to you)',
            'Payment records if required by tax law',
          ].map((t) => (
            <li key={t} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              fontSize: 13.5, color: V2.text, lineHeight: 1.55,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: V2.muted, flexShrink: 0,
              }} />
              {t}
            </li>
          ))}
        </ul>
      </section>

      {/* Why leaving */}
      <section style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 22,
      }}>
        <h2 style={delHeading()}>Why are you leaving? <span style={{ fontWeight: 500, color: V2.muted, fontSize: 13 }}>· optional</span></h2>
        <p style={{ margin: '0 0 16px', fontSize: 13, color: V2.muted }}>
          Helps us improve. Your answer is anonymous.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            ['Found a job',                false],
            ['Not finding relevant jobs',  true],
            ['Too many emails',            false],
            ['Privacy concerns',           false],
            ['Other',                      false, true],
          ].map(([label, on, hasTextarea]) => (
            <React.Fragment key={label}>
              <label style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 0', borderBottom: `1px solid ${V2.lineSoft}`,
                fontSize: 14, fontWeight: on ? 600 : 500,
                color: on ? V2.ink : V2.text, cursor: 'pointer',
              }}>
                <span style={{
                  width: 18, height: 18, borderRadius: '50%',
                  border: `2px solid ${on ? V2.primary : V2.lineStrong}`,
                  background: '#fff', flexShrink: 0,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {on && <span style={{ width: 8, height: 8, borderRadius: '50%', background: V2.primary }} />}
                </span>
                {label}
              </label>
              {hasTextarea && (
                <div style={{ padding: '14px 0 6px' }}>
                  <textarea
                    placeholder="Tell us a bit more (optional)…"
                    rows={3}
                    style={{
                      width: '100%', padding: '10px 12px',
                      border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
                      fontSize: 13.5, color: V2.ink, background: '#fff',
                      fontFamily: V2.font, outline: 'none', resize: 'vertical', boxSizing: 'border-box',
                    }}
                  />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* Confirmation block */}
      <section style={{
        background: '#fff', border: `2px solid ${V2.dangerLine}`, borderRadius: V2.rLg,
        padding: 22, marginBottom: 14,
      }}>
        <h2 style={delHeading()}>Confirm deletion</h2>

        <div style={{ marginBottom: 14 }}>
          <label style={delLabel()}>
            Type <strong style={{ color: V2.danger, fontFamily: V2.fontMono, letterSpacing: '0.04em' }}>DELETE</strong> to confirm
          </label>
          <input
            defaultValue="DELETE"
            style={{
              width: '100%', padding: '12px 14px',
              border: `2px solid ${V2.danger}`, borderRadius: V2.rMd,
              fontSize: 15, fontFamily: V2.fontMono, fontWeight: 700,
              color: V2.danger, letterSpacing: '0.08em',
              outline: 'none', boxSizing: 'border-box',
              boxShadow: `0 0 0 4px ${V2.dangerBg}`,
              background: '#fff',
            }}
          />
          <div style={{
            marginTop: 6, fontSize: 12, color: V2.success, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <Icon name="check" size={12} /> Match — required to enable the button below.
          </div>
        </div>

        <div style={{ marginBottom: 18 }}>
          <label style={delLabel()}>Confirm your password</label>
          <input
            type="password"
            defaultValue="········"
            style={{
              width: '100%', padding: '12px 14px',
              border: `1px solid ${V2.lineStrong}`, borderRadius: V2.rMd,
              fontSize: 14, color: V2.ink, background: '#fff',
              fontFamily: V2.font, outline: 'none', boxSizing: 'border-box',
            }}
          />
          <div style={{ marginTop: 6, fontSize: 12, color: V2.muted }}>
            Skipped automatically if you signed up with Google or LinkedIn.
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <V2Button variant="destructive" size="lg">Delete my account</V2Button>
          <V2Button variant="ghost" size="lg">Keep my account</V2Button>
        </div>
      </section>

      <p style={{
        margin: '0 0 24px', fontSize: 12.5, color: V2.muted, lineHeight: 1.55,
      }}>
        Need help instead? <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>Contact support</a> before deleting — most issues take less than 24h to resolve. Read our <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>retention policy</a>.
      </p>
    </CabShell2>
  );
}

// ─── (B) Pending — shown for 14 days after submitting (A) ───────────────
function V2AccountDeletePendingScreen() {
  return (
    <div style={{
      background: V2.bg, fontFamily: V2.font, color: V2.ink,
      minHeight: '100%',
    }}>
      <header style={{
        padding: '20px 32px', borderBottom: `1px solid ${V2.line}`, background: '#fff',
      }}>
        <V2Logo />
      </header>

      <main style={{
        maxWidth: 560, margin: '0 auto', padding: '48px 32px 80px',
      }}>
        <article style={{
          background: V2.warnBg, border: `1px solid ${V2.warnLine}`,
          borderRadius: V2.rXl, padding: '36px 32px',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
            <HourglassIllo />
          </div>

          <h1 style={{
            margin: '0 0 8px', fontSize: 28, fontWeight: 800,
            color: V2.ink, letterSpacing: '-0.02em', textAlign: 'center', lineHeight: 1.15,
          }}>
            Your account is scheduled for deletion
          </h1>
          <p style={{
            margin: '0 0 6px', fontSize: 15.5, color: V2.warn, fontWeight: 700,
            textAlign: 'center',
          }}>
            Final deletion: 2 June 2026 · in 11 days
          </p>
          <p style={{
            margin: '0 0 26px', fontSize: 14, color: V2.text, lineHeight: 1.6,
            textAlign: 'center', maxWidth: 420, marginLeft: 'auto', marginRight: 'auto',
          }}>
            You're signed in during the grace period. After <strong style={{ color: V2.ink }}>2 June 2026</strong>, your data will be permanently removed — wallet credits refunded to Visa •••• 4242 within 7 days.
          </p>

          {/* Actions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <V2Button variant="primary" size="lg" full iconRight="arrow-right">
              Cancel deletion
            </V2Button>
            <V2Button variant="secondary" size="lg" full icon="document">
              Download my data (.zip)
            </V2Button>
            <button style={{
              padding: 12, background: 'transparent', border: 'none',
              color: V2.muted, fontSize: 13, fontWeight: 500,
              cursor: 'pointer', fontFamily: V2.font,
              textDecoration: 'underline', textDecorationColor: V2.lineStrong, textUnderlineOffset: 3,
            }}>
              Log out and finish later
            </button>
          </div>
        </article>

        {/* Timeline */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 22, marginTop: 22,
        }}>
          <h3 style={{
            margin: '0 0 14px', fontSize: 12, fontWeight: 700,
            color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.08em',
          }}>
            Grace period · 14 days
          </h3>
          {[
            { day: 'Today',       date: '19 May',  label: 'You here',                state: 'current' },
            { day: 'Day 7',       date: '26 May',  label: '1st reminder email',      state: 'pending' },
            { day: 'Day 13',      date: '1 Jun',   label: 'Final reminder email',    state: 'pending' },
            { day: 'Day 14',      date: '2 Jun',   label: 'Permanent deletion',      state: 'final' },
          ].map((it, i, arr) => {
            const c = it.state === 'current' ? V2.warn :
                      it.state === 'final'   ? V2.danger : V2.muted;
            const bg = it.state === 'current' ? V2.warnBg :
                       it.state === 'final'   ? V2.dangerBg : V2.bgAlt;
            return (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: bg, color: c,
                    border: `2px solid ${c}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    marginTop: 2,
                  }}>
                    {it.state === 'current' && <span style={{ width: 6, height: 6, borderRadius: '50%', background: c }} />}
                    {it.state === 'final'   && <Icon name="x" size={9} strokeWidth={3} />}
                  </span>
                  {i < arr.length - 1 && (
                    <span style={{ width: 2, height: 28, background: V2.line, marginTop: 2 }} />
                  )}
                </div>
                <div style={{ paddingBottom: i < arr.length - 1 ? 14 : 0, flex: 1 }}>
                  <div style={{
                    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10,
                  }}>
                    <span style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink }}>{it.label}</span>
                    <span style={{
                      fontSize: 12, color: V2.muted, fontVariantNumeric: 'tabular-nums',
                      fontFamily: V2.fontMono,
                    }}>{it.day} · {it.date}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </section>

        <p style={{
          margin: '24px 0 0', textAlign: 'center', fontSize: 12, color: V2.muted, lineHeight: 1.55,
        }}>
          Read our <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>retention policy</a> · <a style={{ color: V2.primary, fontWeight: 600, textDecoration: 'none' }}>contact support</a>
        </p>
      </main>
    </div>
  );
}

// ─── helpers ────────────────────────────────────────────────────────────
function delHeading() {
  return {
    margin: '0 0 14px', fontSize: 16, fontWeight: 700,
    color: V2.ink, letterSpacing: '-0.01em',
  };
}
function delLabel() {
  return {
    display: 'block', fontSize: 13, fontWeight: 600, color: V2.ink2, marginBottom: 6,
  };
}

function WarningTriangleIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 L22 20 L2 20 Z" />
      <path d="M12 10 V14" />
      <circle cx="12" cy="17" r="0.8" fill="currentColor" />
    </svg>
  );
}

function HourglassIllo({ size = 80 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" fill="none"
         stroke={V2.warn} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 10 H58" />
      <path d="M22 70 H58" />
      <path d="M24 10 V20 L40 38 L24 56 V70" />
      <path d="M56 10 V20 L40 38 L56 56 V70" />
      {/* Sand falling */}
      <path d="M30 18 H50 L40 30 Z" fill={V2.warn} opacity="0.85" stroke="none" />
      <path d="M30 64 Q40 40 50 64 Z" fill={V2.warn} opacity="0.6" stroke="none" />
      <circle cx="40" cy="44" r="1.2" fill={V2.warn} stroke="none" />
    </svg>
  );
}

Object.assign(window, {
  V2AccountDeleteScreen, V2AccountDeletePendingScreen,
});