/* global React, Icon, Button, Chip, ScreenHeader, Panel, SectionLabel, FitBadge, Pill, TONES, BOARD_JOBS, WayInBadge, NET_PROBES */
const { useState: useBoard } = React;

function ScrBoard({ onTailor, onWayIn }) {
  const [sponsorOnly, setSponsorOnly] = useBoard(false);
  const jobs = sponsorOnly ? BOARD_JOBS.filter(j => j.sponsor) : BOARD_JOBS;

  return (
    <div style={{ maxWidth: 1140, margin: "0 auto", padding: "8px 0 40px" }}>
      <ScreenHeader
        eyebrow="Discover"
        title="Your job board"
        lede="Roles Offerroom scored against your evidence, refreshed daily. The strongest matches rise to the top, no endless scrolling."
        actions={<Button variant="secondary" size="sm" icon="refresh">Updated 2h ago</Button>}
      />

      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
        <FilterChip active={!sponsorOnly} onClick={() => setSponsorOnly(false)} icon="target">All matches</FilterChip>
        <FilterChip active={sponsorOnly} onClick={() => setSponsorOnly(true)} icon="check">Sponsors my visa</FilterChip>
        <span style={{ width: 1, height: 20, background: "var(--ink-100)", margin: "0 4px" }}/>
        <FilterChip icon="pin">SF Bay Area</FilterChip>
        <FilterChip icon="briefcase">Senior PM</FilterChip>
        <span style={{ flex: 1 }}/>
        <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{jobs.length} roles</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {jobs.map(j => <BoardCard key={j.id} j={j} onTailor={onTailor} onWayIn={onWayIn}/>)}
      </div>
    </div>
  );
}

const FilterChip = ({ active, onClick, icon, children }) => (
  <button onClick={onClick} style={{
    display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 999, cursor: "pointer",
    fontSize: 12.5, fontWeight: 500, fontFamily: "var(--font-sans)",
    background: active ? "#8C1515" : "#fff", color: active ? "#fff" : "var(--fg-1)",
    border: active ? "1px solid transparent" : "1px solid var(--ink-100)", transition: "all 120ms",
  }}>
    <Icon name={icon} size={13}/>{children}
  </button>
);

const BoardCard = ({ j, onTailor, onWayIn }) => (
  <Panel pad={16} style={{ display: "flex", flexDirection: "column", gap: 0 }} accent={j.sponsored ? TONES.ochre.color : undefined}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
          {j.badge === "Sponsored" && <Pill tone="ochre"><Icon name="zap" size={11}/>Sponsored</Pill>}
          {j.badge === "High match" && <Pill tone="sage"><Icon name="target" size={11}/>High match</Pill>}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, letterSpacing: "-0.005em" }}>{j.title}</div>
        <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 3 }}>{j.co} · {j.loc}</div>
      </div>
      <FitBadge value={j.fit} size="sm"/>
    </div>

    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, flexWrap: "wrap" }}>
      <span style={{ fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--fg-1)", fontWeight: 500 }}>{j.comp}</span>
      {j.sponsor
        ? <span style={{ fontSize: 11.5, color: "var(--sage-text)", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="check" size={12}/>Sponsors visas</span>
        : <span style={{ fontSize: 11.5, color: "var(--fg-3)", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="close" size={12}/>No sponsorship</span>}
    </div>

    <div style={{ marginTop: 12 }}>
      <WayInBadge company={NET_PROBES[j.co]} onClick={() => onWayIn && onWayIn(j.co)}/>
    </div>

    <div style={{ display: "flex", gap: 8, marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--ink-50)" }}>
      <Button variant="primary" size="sm" icon="send" onClick={onTailor}>Tailor &amp; apply</Button>
      <Button variant="ghost" size="sm" icon="plus">Save</Button>
      <span style={{ flex: 1 }}/>
      <Button variant="ghost" size="sm" icon="link">Posting</Button>
    </div>
  </Panel>
);

window.ScrBoard = ScrBoard;