// ScrollJob v2 — Extras: shared components used across the new expansion screens
// Loaded AFTER v2-system.jsx, BEFORE the new screen files.

// ────────────────────────────────────────────────────────────────────────
// Star rating — used on reviews, company hero
// ────────────────────────────────────────────────────────────────────────
function StarRating({ value, size = 'md', max = 5, interactive }) {
  const sz = { sm: 12, md: 16, lg: 20 }[size];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
      {Array.from({ length: max }).map((_, i) => {
        const filled = value >= i + 1;
        const half   = !filled && value > i;
        return (
          <span key={i} style={{ position: 'relative', display: 'inline-block', width: sz, height: sz }}>
            <Icon name="star" size={sz} color={V2.lineStrong} strokeWidth={1.5} />
            {(filled || half) && (
              <span style={{
                position: 'absolute', inset: 0,
                width: half ? sz / 2 : sz, overflow: 'hidden',
              }}>
                <Icon name="starFill" size={sz} color="#D97706" />
              </span>
            )}
          </span>
        );
      })}
    </span>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Match score pill (recommendations, swipe stack)
// ────────────────────────────────────────────────────────────────────────
function MatchScorePill({ score, reasons }) {
  const tone = score >= 80 ? 'primary' : score >= 60 ? 'info' : 'neutral';
  const map = {
    primary: { bg: V2.primarySoft, fg: V2.primaryInk, ring: V2.primaryRing },
    info:    { bg: V2.infoBg,      fg: V2.info,       ring: V2.infoLine },
    neutral: { bg: V2.bgAlt,       fg: V2.text,       ring: V2.line },
  };
  const t = map[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: t.bg, color: t.fg, border: `1px solid ${t.ring}`,
      fontSize: 12, fontWeight: 700,
    }} title={reasons ? reasons.join(' · ') : undefined}>
      <Icon name="target" size={12} /> {score}% match
    </span>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Application stage badge — used in interview pipeline
// ────────────────────────────────────────────────────────────────────────
function ApplicationStageBadge({ stage }) {
  const map = {
    applied:   { tone: 'info',    label: 'Applied' },
    screening: { tone: 'warn',    label: 'Screening' },
    interview: { tone: 'primary', label: 'Interview' },
    offer:     { tone: 'success', label: 'Offer' },
    hired:     { tone: 'success', label: 'Hired' },
    rejected:  { tone: 'danger',  label: 'Rejected' },
    withdrawn: { tone: 'neutral', label: 'Withdrawn' },
  }[stage] || { tone: 'neutral', label: stage };
  return <V2Badge tone={map.tone} size="sm">{map.label}</V2Badge>;
}

// ────────────────────────────────────────────────────────────────────────
// Language switcher — for V2Header, no URL prefix
// ────────────────────────────────────────────────────────────────────────
function V2LanguageSwitcher({ current = 'en' }) {
  const langs = [
    { code: 'en',  label: 'English',  flag: '🇬🇧' },
    { code: 'uk',  label: 'Українська', flag: '🇺🇦' },
    { code: 'de',  label: 'Deutsch',  flag: '🇩🇪' },
    { code: 'fr',  label: 'Français', flag: '🇫🇷' },
    { code: 'pl',  label: 'Polski',   flag: '🇵🇱' },
  ];
  const c = langs.find((l) => l.code === current) || langs[0];
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px', borderRadius: 8,
      background: 'transparent', border: 'none', cursor: 'pointer',
      color: V2.text, fontSize: 13, fontWeight: 500, fontFamily: V2.font,
    }}>
      <Icon name="globe" size={14} color={V2.muted} />
      {c.label}
      <Icon name="chevron-down" size={12} color={V2.muted} />
    </button>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Saved search pill — appears above results when filters are active
// ────────────────────────────────────────────────────────────────────────
function SavedSearchPill({ name, isNew }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '8px 12px 8px 14px', borderRadius: 999,
      background: V2.primarySoft, color: V2.primaryInk,
      border: `1px solid ${V2.primaryRing}`,
      fontSize: 13, fontWeight: 600,
    }}>
      <Icon name="bookmark" size={14} color={V2.primary} />
      {isNew ? (
        <>
          Save this search
          <V2Button variant="primary" size="sm">Save</V2Button>
        </>
      ) : (
        <>
          Saved search: <strong style={{ fontWeight: 700 }}>{name}</strong>
          <span style={{ color: V2.faint, fontSize: 12 }}>· daily alerts on</span>
          <button aria-label="Edit" style={{
            padding: 2, background: 'transparent', border: 'none', cursor: 'pointer', color: V2.primaryInk,
          }}><Icon name="edit" size={13} /></button>
        </>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Notification permission card — bottom-right, dismissible
// ────────────────────────────────────────────────────────────────────────
function NotificationPermissionCard() {
  return (
    <div style={{
      width: 360,
      background: '#fff', border: `1px solid ${V2.line}`,
      borderRadius: V2.rLg, padding: 18,
      boxShadow: V2.shadowXl,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <span style={{
          width: 38, height: 38, borderRadius: 10, background: V2.primarySoft,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name="bell" size={18} color={V2.primary} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink, marginBottom: 4 }}>
            Don't miss new matches
          </div>
          <div style={{ fontSize: 13, color: V2.text, lineHeight: 1.5 }}>
            Get a browser notification when a new role matches your saved search.
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
            <V2Button variant="primary" size="sm">Enable</V2Button>
            <V2Button variant="ghost" size="sm">Maybe later</V2Button>
          </div>
        </div>
        <button aria-label="Dismiss" style={{
          padding: 2, background: 'transparent', border: 'none', cursor: 'pointer', color: V2.muted,
        }}><Icon name="x" size={14} /></button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Verified employer pill — small variant for inline use
// ────────────────────────────────────────────────────────────────────────
function VerifiedInline() {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 7px', borderRadius: 999,
      background: V2.successBg, color: V2.success,
      border: `1px solid ${V2.successLine}`,
      fontSize: 11, fontWeight: 700,
    }}>
      <Icon name="check" size={10} /> Verified
    </span>
  );
}

Object.assign(window, {
  StarRating, MatchScorePill, ApplicationStageBadge,
  V2LanguageSwitcher, SavedSearchPill, NotificationPermissionCard,
  VerifiedInline,
});