// ============================================================================
// Work Order — internal crew + equipment assignment for a job.
// Submits a tier-1 work_order_assign approval row.
// ============================================================================

const CREW_POOL = [
  { id: 'R-VEGA',  name: 'R. Vega',  role: 'Foreman · HVAC',  rate: 78, busy: 'Cypress Run (PM)' },
  { id: 'L-PARK',  name: 'L. Park',  role: 'Journeyman',      rate: 62, busy: null },
  { id: 'J-COLE',  name: 'J. Cole',  role: 'Superintendent',  rate: 95, busy: 'Bay Bldg 4' },
  { id: 'M-DIAZ',  name: 'M. Diaz',  role: 'Apprentice 2yr',  rate: 38, busy: null },
  { id: 'K-OWENS', name: 'K. Owens', role: 'Sheet metal lead',rate: 72, busy: null },
  { id: 'A-NAVA',  name: 'A. Nava',  role: 'Apprentice 1yr',  rate: 32, busy: null },
];

const EQUIP_POOL = [
  { id: 'TRK-04',   name: 'Truck #04 · F-350',        kind: 'truck',   day: 0,    busy: null },
  { id: 'LIFT-02',  name: 'Scissor Lift · 26ft',      kind: 'lift',    day: 220,  busy: null },
  { id: 'GEN-08',   name: 'Generator · 8kW',          kind: 'gen',     day: 95,   busy: null },
  { id: 'BRAKE-01', name: 'Sheet metal brake · 10ft', kind: 'brake',   day: 140,  busy: 'Sunset Plaza' },
  { id: 'WELD-03',  name: 'Welder · Miller 211',      kind: 'welder',  day: 55,   busy: null },
  { id: 'CART-12',  name: 'Job cart + ladders',       kind: 'cart',    day: 0,    busy: null },
];

const SXWorkOrder = ({ data, submitDraft, onJump }) => {
  const job = data.job;
  const [woNumber] = React.useState('WO-3318');
  const [scope, setScope] = React.useState('Bldg B duct hangers + return air rough-in · floors 2–3');
  const [date,  setDate]  = React.useState('05.13.26');
  const [shift, setShift] = React.useState('Day · 06:30–14:30');
  const [hours, setHours] = React.useState(8);
  const [crew,  setCrew]  = React.useState(['R-VEGA','L-PARK','M-DIAZ']);
  const [equip, setEquip] = React.useState(['TRK-04','LIFT-02','CART-12']);
  const [submitted, setSubmitted] = React.useState(false);

  function toggle(arr, setArr, id) {
    setArr(arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]);
  }

  const crewObjs = CREW_POOL.filter(c => crew.includes(c.id));
  const equipObjs = EQUIP_POOL.filter(e => equip.includes(e.id));
  const laborCost = crewObjs.reduce((s, c) => s + c.rate * Number(hours || 0), 0);
  const equipCost = equipObjs.reduce((s, e) => s + e.day, 0);
  const totalCents = Math.round((laborCost + equipCost) * 100);

  function submit() {
    submitDraft({
      id: 1700 + Math.floor(Math.random() * 99),
      kind: 'work_order_assign', tier: 1, department: 'pm', status: 'pending',
      summary: `${woNumber} · ${job.code} — ${scope} · ${crew.length} crew, ${equip.length} equip`,
      amount: fmtUSD(totalCents),
      amount_cents: totalCents,
      created_by: 'agent.pm',
      at: new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' }) + ' PT',
      payload: {
        wo_number: woNumber, project_code: job.code, date, shift, hours: Number(hours),
        crew: crewObjs.map(c => ({ id: c.id, name: c.name, role: c.role, rate: c.rate })),
        equipment: equipObjs.map(e => ({ id: e.id, name: e.name, day_rate: e.day })),
        labor_cost_cents: Math.round(laborCost * 100),
        equip_cost_cents: Math.round(equipCost * 100),
        total_cents: totalCents,
      },
      dri: 'M. Reyes (PM)',
    });
    setSubmitted(true);
  }

  return (
    <div style={{ flex: 1, padding: '24px 32px 80px', overflow: 'auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <Mono style={{ fontSize: 11, color: 'var(--steel-500)', letterSpacing: '0.18em', display: 'block', marginBottom: 4 }}>{job.code} · LAKESIDE HVAC RETROFIT</Mono>
          <h1 className="disp" style={{ fontSize: 42, color: 'var(--paper)', margin: 0 }}>{woNumber} · WORK ORDER</h1>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <Stamp color="var(--paper)">DRAFT</Stamp>
          <Stamp color="var(--signal)">TIER 1 · ROUTINE</Stamp>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        {/* LEFT — SCOPE + CREW + EQUIP */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>WHAT &amp; WHEN</Tick>
            <SXTextarea label="SCOPE" value={scope} onChange={setScope} rows={2} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 10 }}>
              <SXInput label="DATE"  value={date}  onChange={setDate} />
              <SXInput label="SHIFT" value={shift} onChange={setShift} />
              <SXNum   label="HOURS" value={hours} setValue={setHours} />
            </div>
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, flexWrap: 'wrap', gap: 8 }}>
              <Tick>CREW · TAP TO ASSIGN</Tick>
              <Mono style={{ fontSize: 10, color: 'var(--steel-500)' }}>{crew.length} ASSIGNED · {fmtUSD(laborCost * 100)} LABOR</Mono>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {CREW_POOL.map(c => {
                const on = crew.includes(c.id);
                return (
                  <button key={c.id} onClick={() => toggle(crew, setCrew, c.id)} style={{
                    textAlign: 'left', cursor: 'pointer',
                    background: on ? 'rgba(59,130,246,0.10)' : 'var(--ink-900)',
                    border: `1px solid ${on ? 'var(--signal)' : 'var(--line)'}`,
                    padding: '10px 12px',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <Mono style={{ fontSize: 10, color: on ? 'var(--signal)' : 'var(--steel-500)', letterSpacing: '0.14em' }}>{c.id}</Mono>
                      {c.busy ? <Dot color="var(--amber)" /> : <Dot color="var(--green)" />}
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--paper)', marginTop: 4 }}>{c.name}</div>
                    <Mono style={{ fontSize: 10, color: 'var(--paper-dim)', display: 'block', marginTop: 2 }}>
                      {c.role} · ${c.rate}/hr
                    </Mono>
                    {c.busy && <Mono style={{ fontSize: 9, color: 'var(--amber)', letterSpacing: '0.12em', display: 'block', marginTop: 4 }}>⨯ ON {c.busy.toUpperCase()}</Mono>}
                  </button>
                );
              })}
            </div>
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, flexWrap: 'wrap', gap: 8 }}>
              <Tick>EQUIPMENT</Tick>
              <Mono style={{ fontSize: 10, color: 'var(--steel-500)' }}>{equip.length} ASSIGNED · {fmtUSD(equipCost * 100)} / DAY</Mono>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {EQUIP_POOL.map(e => {
                const on = equip.includes(e.id);
                return (
                  <button key={e.id} onClick={() => toggle(equip, setEquip, e.id)} style={{
                    textAlign: 'left', cursor: 'pointer',
                    background: on ? 'rgba(59,130,246,0.10)' : 'var(--ink-900)',
                    border: `1px solid ${on ? 'var(--signal)' : 'var(--line)'}`,
                    padding: '10px 12px',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <Mono style={{ fontSize: 10, color: on ? 'var(--signal)' : 'var(--steel-500)', letterSpacing: '0.14em' }}>{e.id}</Mono>
                      {e.busy ? <Dot color="var(--amber)" /> : <Dot color="var(--green)" />}
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--paper)', marginTop: 4 }}>{e.name}</div>
                    <Mono style={{ fontSize: 10, color: 'var(--paper-dim)', display: 'block', marginTop: 2 }}>
                      {e.day === 0 ? 'no day rate' : `$${e.day}/day`}
                    </Mono>
                    {e.busy && <Mono style={{ fontSize: 9, color: 'var(--amber)', letterSpacing: '0.12em', display: 'block', marginTop: 4 }}>⨯ ON {e.busy.toUpperCase()}</Mono>}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* RIGHT — PREVIEW + SUBMIT */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-900)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 12 }}>JOB TICKET · WHAT THE FOREMAN SEES</Tick>
            <div style={{ background: 'var(--paper-bg)', color: 'var(--ink-900)', padding: 16, fontFamily: 'var(--font-body)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '2px solid var(--ink-900)', paddingBottom: 8, marginBottom: 8 }}>
                <div>
                  <Mono style={{ fontSize: 9, color: '#6b7785', letterSpacing: '0.18em' }}>WORK ORDER · {woNumber}</Mono>
                  <div className="disp" style={{ fontSize: 18, color: 'var(--ink-900)', marginTop: 4 }}>{job.code} · {date}</div>
                </div>
                <Mono style={{ fontSize: 9, color: '#6b7785', textAlign: 'right' }}>{shift}<br/>{hours} HRS</Mono>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-900)', lineHeight: 1.5 }}>
                <b>Scope:</b> {scope}
              </div>
              <div style={{ marginTop: 10 }}>
                <Mono style={{ fontSize: 9, color: '#6b7785', letterSpacing: '0.14em', display: 'block', marginBottom: 4 }}>CREW · {crewObjs.length}</Mono>
                {crewObjs.length === 0 ? <div style={{ fontSize: 11, color: '#6b7785' }}>—</div> : crewObjs.map(c => (
                  <div key={c.id} style={{ fontSize: 12, color: 'var(--ink-900)', padding: '2px 0' }}>· {c.name} <span style={{ color: '#6b7785' }}>({c.role})</span></div>
                ))}
              </div>
              <div style={{ marginTop: 10 }}>
                <Mono style={{ fontSize: 9, color: '#6b7785', letterSpacing: '0.14em', display: 'block', marginBottom: 4 }}>EQUIPMENT · {equipObjs.length}</Mono>
                {equipObjs.length === 0 ? <div style={{ fontSize: 11, color: '#6b7785' }}>—</div> : equipObjs.map(e => (
                  <div key={e.id} style={{ fontSize: 12, color: 'var(--ink-900)', padding: '2px 0' }}>· {e.name}</div>
                ))}
              </div>
              <Mono style={{ fontSize: 9, color: '#6b7785', marginTop: 12, display: 'block', letterSpacing: '0.16em', borderTop: '1px dashed rgba(14,22,32,0.18)', paddingTop: 6 }}>
                DRAFTED BY agent.pm · TIER 1 · AWAITING M. REYES
              </Mono>
            </div>
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>COST IMPACT</Tick>
            <SXMoneyRow label={`LABOR · ${crewObjs.length} × ${hours}h`} value={laborCost} />
            <SXMoneyRow label={`EQUIPMENT · DAY RATES`} value={equipCost} />
            <div style={{ height: 1, background: 'var(--line-strong)', margin: '12px 0 10px' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Mono style={{ fontSize: 11, color: 'var(--signal)', letterSpacing: '0.16em' }}>WO TOTAL</Mono>
              <span className="disp" style={{ fontSize: 28, color: 'var(--paper)' }}>{fmtUSD(totalCents)}</span>
            </div>
            <Mono style={{ fontSize: 10, color: 'var(--steel-500)', marginTop: 6, display: 'block' }}>
              POSTS TO JOB-COST WHEN WORK COMPLETES
            </Mono>
          </div>

          {!submitted ? (
            <div style={{ border: '1px solid var(--signal)', background: 'rgba(59,130,246,0.04)', padding: '18px 20px' }}>
              <Tick style={{ display: 'block', marginBottom: 10, color: 'var(--signal)' }}>ROUTING</Tick>
              <Mono style={{ fontSize: 11, color: 'var(--paper)', display: 'block', marginBottom: 12, lineHeight: 1.6 }}>
                TIER <span style={{ color: 'var(--signal)' }}>1</span> · DEPT pm · DRI M. REYES<br/>
                ↪ ROUTINE INTERNAL · TIME CARDS POST WHEN CREW CLOCKS IN
              </Mono>
              <Btn kind="primary" onClick={submit} style={{ width: '100%', padding: '12px 18px' }} disabled={crew.length === 0}>
                {crew.length === 0 ? 'Assign at least one crew member' : `Submit ${woNumber} for assignment`}
              </Btn>
            </div>
          ) : (
            <div style={{ border: '1px solid var(--green)', background: 'rgba(34,197,94,0.06)', padding: '18px 20px' }}>
              <Mono style={{ fontSize: 11, color: 'var(--green)', letterSpacing: '0.16em' }}>✓ {woNumber} DRAFTED &amp; QUEUED</Mono>
              <div style={{ fontSize: 13, color: 'var(--paper)', marginTop: 6, lineHeight: 1.55 }}>
                Routed to <Mono style={{ color: 'var(--signal)' }}>M. Reyes</Mono> as tier 1. Crew gets the ticket on their phones once approved.
              </div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <Btn kind="primary" onClick={() => onJump('queue')}>Open queue →</Btn>
                <Btn onClick={() => onJump('field')}>See it on the iPad →</Btn>
                <Btn onClick={() => setSubmitted(false)}>Draft another</Btn>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SXWorkOrder });