// screen-onboarding.jsx — initial workspace setup wizard
const { useState: useStateOnb } = React;

function Onboarding({ onFinish, onExit }) {
  const [step, setStep] = useStateOnb(0);
  const steps = ["Company", "Ideal customer", "Context", "Sources"];

  const next = () => step < 3 ? setStep(step + 1) : onFinish();
  const back = () => setStep(Math.max(0, step - 1));

  return (
    <div className="onb">
      <header className="onb-topbar">
        <button className="onb-brand" onClick={onExit} title="Back to dashboard" aria-label="Back to dashboard">
          <img src="assets/qcai-logo-badge.png" alt="Queen City AI" className="onb-brand-logo" />
        </button>
        <span className="onb-brand-product">AI Growth Engine</span>
        <div className="spacer" />
        <button className="onb-exit" onClick={onExit}><Icon name="chevLeft" size={15} />Exit setup</button>
      </header>
      <div className="onb-body">
      <div className="onb-card">
        <div style={{ padding: "20px 26px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 11 }}>
          <img src="assets/icon.png" alt="Queen City AI" style={{ width: 34, height: 34, borderRadius: 9, objectFit: "cover" }} />
          <div>
            <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em" }}>Welcome to Queen City AI</div>
            <div className="muted" style={{ fontSize: 12.5 }}>Set up your lead agent in 4 quick steps — no engineering needed.</div>
          </div>
        </div>

        <div className="onb-steps">
          {steps.map((s, i) => (
            <div key={i} className={"onb-step " + (i === step ? "active" : i < step ? "done" : "")}>
              <span className="onb-num">{i < step ? <Icon name="check" size={12} color="#fff" strokeWidth={3} /> : i + 1}</span>
              {s}
            </div>
          ))}
        </div>

        <div style={{ padding: 26, minHeight: 320 }}>
          {step === 0 && (
            <div>
              <h3 style={{ margin: "0 0 4px", fontSize: 18 }}>Tell us about your company</h3>
              <p className="muted" style={{ marginTop: 0, fontSize: 13 }}>This grounds how the agent positions you to prospects.</p>
              <div className="grid-2 mt-16">
                <div className="field"><label>Company name</label><input className="input" defaultValue="ABC B2B Company" /></div>
                <div className="field"><label>What you do</label><input className="input" defaultValue="Managed IT Services (MSP)" /></div>
              </div>
              <div className="field"><label>One-liner</label><textarea className="textarea" defaultValue="We keep Carolina healthcare, legal & finance teams secure, compliant, and running — without an in-house IT department." /></div>
            </div>
          )}
          {step === 1 && (
            <div>
              <h3 style={{ margin: "0 0 4px", fontSize: 18 }}>Who's your ideal customer?</h3>
              <p className="muted" style={{ marginTop: 0, fontSize: 13 }}>The agent scores every lead against this profile. You can refine it anytime.</p>
              <div className="field mt-16"><label>Target segments</label>
                <div className="row gap-8" style={{ flexWrap: "wrap" }}>{["Healthcare practices","Legal firms","Accounting / finance","Light manufacturing","Professional services"].map((s,i)=><span key={i} className="chip chip-accent"><Icon name="check" size={12} />{s}</span>)}<button className="chip" style={{ borderStyle: "dashed" }}><Icon name="plus" size={12} />Add</button></div>
              </div>
              <div className="grid-2">
                <div className="field"><label>Target geographies</label><input className="input" defaultValue="Charlotte, Raleigh, Greenville, Atlanta" /></div>
                <div className="field"><label>Company size (employees)</label><input className="input" defaultValue="25 – 300" /></div>
              </div>
              <div className="field" style={{ marginBottom: 0 }}><label className="row gap-6"><Icon name="bolt" size={14} color="var(--amber)" />Buying signals to prioritize</label>
                <div className="row gap-8" style={{ flexWrap: "wrap" }}>{["New office","Recent funding","Hiring IT roles","Aging infrastructure","Compliance pressure"].map((s,i)=><span key={i} className="chip"><Icon name="bolt" size={11} />{s}</span>)}</div>
              </div>
            </div>
          )}
          {step === 2 && (
            <div>
              <h3 style={{ margin: "0 0 4px", fontSize: 18 }}>Upload your context</h3>
              <p className="muted" style={{ marginTop: 0, fontSize: 13 }}>Service descriptions, case studies, messaging, and qualification criteria. The agent retrieves over these — it isn't fine-tuned.</p>
              <div className="dropzone mt-16"><Icon name="upload" size={26} color="var(--gray-400)" /><div style={{ fontWeight: 600, color: "var(--gray-600)", marginTop: 8 }}>Drop files or click to upload</div><div style={{ fontSize: 12.5 }}>PDF, DOCX, CSV, TXT · indexed automatically</div></div>
              <div className="col gap-8 mt-16">
                {["Service Catalog.pdf","ICP & Qualification Criteria.docx","Case Study — Lakeshore Dental.pdf"].map((n,i)=>(
                  <div key={i} className="row gap-8" style={{ fontSize: 13 }}><Icon name="file" size={15} color="var(--gray-400)" /><span style={{ flex: 1 }}>{n}</span><span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Indexed</span></div>
                ))}
              </div>
            </div>
          )}
          {step === 3 && (
            <div>
              <h3 style={{ margin: "0 0 4px", fontSize: 18 }}>Connect your sources</h3>
              <p className="muted" style={{ marginTop: 0, fontSize: 13 }}>Pick where the agent discovers and enriches leads. You can add more later.</p>
              <div className="col gap-12 mt-16">
                {window.CONNECTORS.sources.slice(0,4).map((c,i)=>(
                  <div key={i} className="intg" style={{ padding: 12 }}>
                    <span className="intg-logo" style={{ background: c.color, width: 34, height: 34, fontSize: 12 }}>{c.short}</span>
                    <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13.5 }}>{c.name}</div><div className="muted" style={{ fontSize: 12 }}>{c.kind}</div></div>
                    <span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Connected</span>
                  </div>
                ))}
                <div className="intg" style={{ padding: 12 }}>
                  <span className="intg-logo" style={{ background: "#ff7a59", width: 34, height: 34, fontSize: 12 }}>HS</span>
                  <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13.5 }}>HubSpot</div><div className="muted" style={{ fontSize: 12 }}>CRM · approval-based sync</div></div>
                  <span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Connected</span>
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ padding: "16px 26px", borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", background: "var(--gray-50)" }}>
          <button className="btn" onClick={back} disabled={step === 0}><Icon name="chevLeft" size={15} />Back</button>
          <div className="spacer" />
          <span className="muted" style={{ fontSize: 12.5, marginRight: 14 }}>Step {step + 1} of 4</span>
          <button className="btn btn-primary" onClick={next}>{step === 3 ? <>Finish & run first agent<Icon name="sparkle" size={15} /></> : <>Continue<Icon name="arrowRight" size={15} /></>}</button>
        </div>
      </div>
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;