// OnboardingScreen — most state-rich Phase 1 screen.
// Toggles between three of the nine states (success kyc_approved + manual_review + sanctions_hit).

function OnboardingScreen() {
  const [state, setState] = React.useState("kyc_approved");

  const states = {
    kyc_approved: {
      activeStep: 4,
      heroIcon: "ti-badge-check",
      heroTone: "success",
      heroTitle: "อนุมัติแล้ว",
      heroBody: "พร้อมเริ่มขายสินค้าบนแพลตฟอร์ม คุณสามารถเข้าสู่แดชบอร์ดได้แล้ว",
      cta: "ไปยังแดชบอร์ด",
      trust: null,
    },
    manual_review: {
      activeStep: 3,
      heroIcon: "ti-clock-cog",
      heroTone: "warning",
      heroTitle: "อยู่ระหว่างการตรวจสอบโดยทีมงาน",
      heroBody: "ทีมงานกำลังตรวจสอบเอกสารของคุณด้วยตนเอง ตรวจสอบเสร็จภายใน 16 ชั่วโมง",
      cta: null,
      trust: "การตรวจสอบนี้เป็นส่วนหนึ่งของการปฏิบัติตามกฎหมายสากล",
    },
    sanctions_hit: {
      activeStep: 3,
      heroIcon: "ti-alert-triangle",
      heroTone: "danger",
      heroTitle: "ต้องตรวจสอบเพิ่มเติม",
      heroBody: "ข้อมูลของคุณตรงกับรายชื่อในระบบตรวจสอบ ทีมงานจะติดต่อกลับภายใน 2 วันทำการ",
      cta: null,
      trust: "การตรวจสอบนี้ไม่ได้หมายความว่าคุณทำผิด",
    },
  };
  const s = states[state];

  const steps = [
    { i: 1, label: "เริ่ม" },
    { i: 2, label: "ข้อมูล" },
    { i: 3, label: "ตรวจ" },
    { i: 4, label: "KYC" },
    { i: 5, label: "เสร็จ" },
  ];

  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">สถานะการเปิดบัญชี</h1>
        <div className="page-sub">Khao Hom Thai · เริ่ม 14 มี.ค. 2569</div>
      </div>

      {/* State toggles for prototype walkthrough */}
      <div className="quick-row" style={{gridTemplateColumns:"repeat(3, 1fr)"}}>
        {[
          { id: "kyc_approved",  label: "Approved" },
          { id: "manual_review", label: "Review"   },
          { id: "sanctions_hit", label: "Hit"      },
        ].map(o => (
          <div key={o.id} className={"chip" + (state===o.id ? " active":"")} style={{height:28, justifyContent:"center", borderRadius:6, border: "0.5px solid var(--outline-variant)", background: state===o.id ? "var(--thaihao-primary-tint)":"var(--surface-container-lowest)", color: state===o.id ? "var(--thaihao-primary)":"var(--on-surface)", display:"flex", alignItems:"center", fontFamily:"var(--font-sans)", fontSize:12, fontWeight:500, cursor:"pointer"}} onClick={() => setState(o.id)}>{o.label}</div>
        ))}
      </div>

      <div className="list" style={{padding:"14px 16px"}}>
        <div className="pipeline">
          {steps.map((st, idx) => (
            <React.Fragment key={st.i}>
              {idx > 0 && <div className={"seg" + (st.i <= s.activeStep ? " done" : "")}></div>}
              <div className="step">
                <div className={"node" + (st.i < s.activeStep ? " done" : st.i === s.activeStep ? " active" : "")}>
                  {st.i < s.activeStep ? <i className="ti ti-check" style={{fontSize:12}}></i> : st.i}
                </div>
                <div className={"label" + (st.i === s.activeStep ? " active" : "")}>{st.label}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="hero">
        <div className={"ic-large " + s.heroTone}><i className={"ti " + s.heroIcon}></i></div>
        <h3>{s.heroTitle}</h3>
        <p>{s.heroBody}</p>
        {s.cta && <button className="btn-primary" style={{alignSelf:"center", marginTop:4}}>{s.cta}</button>}
        {s.trust && (
          <div style={{display:"flex", alignItems:"center", gap:6, justifyContent:"center", marginTop:6, color:"var(--on-surface-variant)", fontSize:12}}>
            <i className="ti ti-shield-check" style={{fontSize:14, color:"var(--color-text-on-info)"}}></i>
            <span>{s.trust}</span>
          </div>
        )}
      </div>

      <div className="section">
        <div className="section-head"><h2>ประวัติการเปลี่ยนแปลง</h2></div>
        <div className="list">
          <div className="list-row" style={{gridTemplateColumns:"36px 1fr auto"}}>
            <div className="ic" style={{background:"var(--color-background-success)", color:"var(--color-text-on-success)"}}><i className="ti ti-check"></i></div>
            <div><div className="title">ส่งข้อมูลธุรกิจแล้ว</div><div className="sub">15 มี.ค. 2569 · 09:42 ICT</div></div>
            <div><span className="pill success sm">ผ่าน</span></div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"36px 1fr auto"}}>
            <div className="ic" style={{background:"var(--color-background-success)", color:"var(--color-text-on-success)"}}><i className="ti ti-shield-check"></i></div>
            <div><div className="title">ตรวจสอบรายชื่อต้องห้าม</div><div className="sub">15 มี.ค. 2569 · 09:42 ICT</div></div>
            <div><span className="pill success sm">ผ่าน</span></div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"36px 1fr auto"}}>
            <div className="ic" style={{background:"var(--color-background-info)", color:"var(--color-text-on-info)"}}><i className="ti ti-clock"></i></div>
            <div><div className="title">รอตรวจสอบ KYC</div><div className="sub">15 มี.ค. 2569 · 09:51 ICT</div></div>
            <div><span className="pill info sm">รอ</span></div>
          </div>
        </div>
      </div>

      <div style={{height: 8}}></div>
    </React.Fragment>
  );
}

window.OnboardingScreen = OnboardingScreen;