// WorkOrders.jsx
function WorkOrders({ setPage }) {
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Today', 'Pending', 'In Progress', 'Completed', 'Issues'];
  const filtered = WORK_ORDERS.filter(w => {
    if (filter === 'All') return true;
    if (filter === 'Today') return w.date === TODAY;
    if (filter === 'Pending') return ['Assigned', 'Accepted'].includes(w.status);
    if (filter === 'In Progress') return ['On the Way', 'Arrived Site', 'Job Started'].includes(w.status);
    if (filter === 'Completed') return w.status === 'Job Completed';
    if (filter === 'Issues') return ['Pending Issue', 'Cancelled'].includes(w.status);
    return true;
  });

  return (
    <div className="content">
      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <div style={{padding: '20px 24px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap'}}>
          <div style={{flex: 1, minWidth: 200}}>
            <div className="card__title">Work Orders</div>
            <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginTop: 4}}>{filtered.length} of {WORK_ORDERS.length} jobs</div>
          </div>
          <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
            {filters.map(f => (
              <button key={f} className={"radio-chip " + (filter === f ? "radio-chip--active" : "")}
                onClick={() => setFilter(f)} style={{flex: 'none', padding: '8px 14px'}}>{f}</button>
            ))}
          </div>
          <button className="btn btn--ghost"><Filter size={14}/> Filters</button>
          <button className="btn btn--primary" onClick={() => setPage('create')}><Plus size={14}/> New WO</button>
        </div>
        <div style={{overflowX: 'auto'}}>
          <table className="table">
            <thead>
              <tr>
                <th>WO ID</th><th>Customer</th><th>Location</th><th>Crane</th><th>Job Date / Time</th><th>Operator</th><th>Status</th><th>Urgency</th><th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(w => {
                const s = STATUS_MAP[w.status];
                return (
                  <tr key={w.id}>
                    <td style={{fontWeight: 600, color: 'var(--color-navy)'}}>{w.id}</td>
                    <td>
                      <div style={{fontWeight: 600}}>{w.customer}</div>
                      <div style={{fontSize: 12, color: 'var(--color-grey-500)'}}>{w.contact}</div>
                    </td>
                    <td style={{maxWidth: 220}}>
                      <div style={{display: 'flex', alignItems: 'center', gap: 4, color: 'var(--color-grey-700)'}}>
                        <MapPin size={12}/> <span style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{w.location}</span>
                      </div>
                    </td>
                    <td>
                      <span className="badge badge--gray badge--no-dot" style={{fontFamily: 'var(--font-mono)'}}>{w.tonnage}</span>
                    </td>
                    <td>
                      <div style={{fontSize: 13}}>{new Date(w.date).toLocaleDateString('en-MY', {day: '2-digit', month: 'short'})}</div>
                      <div style={{fontSize: 12, color: 'var(--color-grey-500)'}}>{w.start} – {w.end}</div>
                    </td>
                    <td style={{fontSize: 13}}>{w.operator}</td>
                    <td><span className={"badge badge--" + s.color}>{s.label}</span></td>
                    <td>
                      {w.urgency === 'urgent'
                        ? <span className="badge badge--red"><AlertTriangle size={11}/> Urgent</span>
                        : <span style={{color: 'var(--color-grey-400)', fontSize: 12}}>—</span>}
                    </td>
                    <td>
                      <button className="btn btn--ghost" style={{height: 32, padding: '0 12px', fontSize: 12}}>
                        <Eye size={12}/> View
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WorkOrders });