/* global React, Icon, Button, Chip, ScreenHeader, Panel, SectionLabel, AgentNote, Segmented, Pill, ProvBadge, TONES, PREP_QUESTIONS, PREP_DOSSIER */
const { useState: usePrep } = React;

function ScrPrep({ onBack }) {
  const [tab, setTab] = usePrep("behavioral");
  return (
    <div style={{ maxWidth: 1080, margin: "0 auto", padding: "8px 0 40px" }}>
      <ScreenHeader
        eyebrow="Prep · Stripe — Senior PM, Payments"
        title="Two hours of prep, on demand"
        lede="Built from everything we've done on this application, plus fresh research. Practice out loud, or just read the dossier before you walk in."
        actions={<Button variant="primary" size="sm" icon="mic">Start voice mock</Button>}
      />

      <AgentNote time="just now">
        Your onsite is Thursday at 2. Your interviewer, the format, and the likely questions are ready, with answers drafted from your own stories so they sound like you, not a script.
      </AgentNote>

      <Panel pad={14} style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 14 }}>
        <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--slate-tint)", color: "#2A3744", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name="message" size={17}/></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Got a recruiter email or new detail? Feed it in.</div>
          <div style={{ fontSize: 12, color: "var(--fg-2)", marginTop: 1, lineHeight: 1.45 }}>Paste replies, scheduling notes, or anything you learned, and the questions and dossier re-tune around it.</div>
        </div>
        <Button variant="secondary" size="sm" icon="plus" style={{ flexShrink: 0 }}>Add context</Button>
      </Panel>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16, marginTop: 16, alignItems: "start" }}>
        {/* Questions */}
        <div>
          <div style={{ marginBottom: 14 }}>
            <Segmented value={tab} onChange={setTab} options={[{ value: "behavioral", label: "Behavioral" }, { value: "technical", label: "Technical / case" }]}/>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {PREP_QUESTIONS[tab].map((q, i) => <QPrep key={tab + i} q={q} n={i + 1}/>)}
          </div>
          <Panel pad={16} style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ width: 38, height: 38, borderRadius: 999, background: "var(--cardinal-50)", color: "var(--cardinal)", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name="mic" size={18}/></span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Rehearse these out loud</div>
              <div style={{ fontSize: 12, color: "var(--fg-2)" }}>Offerroom runs the mock interview, drilling on your real stories.</div>
            </div>
            <Button variant="secondary" size="sm" icon="play">Start mock</Button>
          </Panel>
        </div>

        {/* Dossier */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 0 }}>
          <Panel pad={16}>
            <SectionLabel style={{ marginBottom: 12 }}>Your interviewer</SectionLabel>
            <div style={{ display: "flex", gap: 12 }}>
              <span style={{ width: 42, height: 42, borderRadius: 999, background: "var(--slate-tint)", color: "#2A3744", display: "grid", placeItems: "center", fontSize: 14, fontWeight: 600, flexShrink: 0 }}>PR</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{PREP_DOSSIER.interviewer.name}</div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", lineHeight: 1.4 }}>{PREP_DOSSIER.interviewer.role}</div>
              </div>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--fg-1)", marginTop: 12, padding: "10px 12px", background: "var(--paper)", borderRadius: 8, border: "1px solid var(--ink-50)", lineHeight: 1.5 }}>{PREP_DOSSIER.interviewer.note}</div>
          </Panel>

          <Panel pad={16}>
            <SectionLabel style={{ marginBottom: 10 }}>Company, fresh</SectionLabel>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
              {PREP_DOSSIER.company.map((c, i) => (
                <li key={i} style={{ display: "flex", gap: 8, fontSize: 12.5, lineHeight: 1.45, color: "var(--fg-1)" }}>
                  <Icon name="globe" size={13} style={{ color: "#5A7150", flexShrink: 0, marginTop: 2 }}/>{c}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 12, paddingTop: 10, borderTop: "1px solid var(--ink-50)", fontSize: 12, color: "var(--fg-2)" }}>
              <span style={{ fontWeight: 600, color: "var(--fg-1)" }}>Format · </span>{PREP_DOSSIER.format}
            </div>
          </Panel>

          <Panel pad={16}>
            <SectionLabel style={{ marginBottom: 10 }}>Smart questions to ask</SectionLabel>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {PREP_DOSSIER.ask.map((q, i) => (
                <div key={i} style={{ display: "flex", gap: 8, fontSize: 12.5, lineHeight: 1.45, color: "var(--fg-1)" }}>
                  <span style={{ fontFamily: "var(--font-mono)", color: "var(--cardinal)", fontSize: 11, flexShrink: 0 }}>0{i + 1}</span>{q}
                </div>
              ))}
            </div>
          </Panel>
          <Button variant="secondary" size="md" icon="download" style={{ width: "100%", justifyContent: "center" }}>Export one-page dossier</Button>
        </div>
      </div>
    </div>
  );
}

const QPrep = ({ q, n }) => {
  const [open, setOpen] = usePrep(n === 1);
  return (
    <Panel pad={0}>
      <button onClick={() => setOpen(o => !o)} style={{ width: "100%", textAlign: "left", background: "transparent", border: "none", cursor: "pointer", padding: "15px 18px", display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--font-sans)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-3)", flexShrink: 0 }}>{String(n).padStart(2, "0")}</span>
        <span style={{ flex: 1, fontSize: 14.5, fontWeight: 600, color: "var(--fg-1)", lineHeight: 1.35 }}>{q.q}</span>
        <Icon name="chevronDown" size={16} style={{ color: "var(--fg-3)", flexShrink: 0, transform: open ? "rotate(180deg)" : "none", transition: "transform 160ms" }}/>
      </button>
      {open && (
        <div className="cad-fade" style={{ padding: "0 18px 16px 42px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <Pill tone="cardinal">Your draft answer</Pill>
            <span style={{ fontSize: 11, color: "var(--fg-2)" }}>STAR · grounded in your memory</span>
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-700)", padding: "12px 14px", background: "var(--paper)", borderRadius: 8, border: "1px solid var(--ink-50)" }}>{q.star}</div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 10 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11.5, color: "var(--fg-2)" }}>Source: <ProvBadge db={q.source.startsWith("Web") ? "Web" : q.source.startsWith("Story") ? "Graph" : "Vault"} small/> {q.source}</span>
            <Button variant="ghost" size="sm" icon="mic">Practice this one</Button>
          </div>
        </div>
      )}
    </Panel>
  );
};

window.ScrPrep = ScrPrep;