// Repairs.jsx
function RepairsPage() {
  const priorityColor = { 'High': 'red', 'Medium': 'orange', 'Low': 'gray' };
  const statusColor = { 'In Progress': 'orange', 'Awaiting Parts': 'yellow', 'Completed': 'green' };

  return (
    <div className="content">
      <div className="stats-grid" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
        <StatCard icon="Wrench" iconKind="yellow" label="Open Tickets" value="3" delta="2 high priority"/>
        <StatCard icon="Clock" label="Avg Repair Time" value="2.4d" delta="-0.6d vs Mar" deltaDir="up"/>
        <StatCard icon="DollarSign" iconKind="red" label="Repair Spend (Apr)" value="RM 12.4k" delta="+RM 2.1k" deltaDir="down"/>
        <StatCard icon="Activity" iconKind="green" label="Fleet Uptime" value="94%"/>
      </div>

      <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}}>
          <div style={{flex: 1}}>
            <div className="card__title">Workshop Repair Tickets</div>
            <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginTop: 4}}>Mechanic-assigned repairs across the fleet</div>
          </div>
          <button className="btn btn--ghost"><Filter size={14}/> Filter</button>
          <button className="btn btn--primary"><Plus size={14}/> New Ticket</button>
        </div>

        <div style={{overflowX: 'auto'}}>
          <table className="table">
            <thead>
              <tr>
                <th>Ticket</th><th>Machine</th><th>Issue</th><th>Priority</th>
                <th>Mechanic</th><th>Parts / Supplier</th><th>Cost</th><th>Status</th>
              </tr>
            </thead>
            <tbody>
              {REPAIR_TICKETS.map(t => (
                <tr key={t.id}>
                  <td style={{fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--color-navy)', fontSize: 13}}>{t.id}</td>
                  <td>
                    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                      <div style={{width: 28, height: 28, background: 'var(--color-grey-100)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--color-navy)', flexShrink: 0}}>
                        <Crane size={14}/>
                      </div>
                      <div style={{fontWeight: 600, fontSize: 13}}>{t.machine}</div>
                    </div>
                  </td>
                  <td style={{maxWidth: 220, fontSize: 13, color: 'var(--color-grey-700)'}}>{t.issue}</td>
                  <td><span className={"badge badge--" + priorityColor[t.priority]}>{t.priority}</span></td>
                  <td style={{fontSize: 13}}>{t.mechanic}</td>
                  <td>
                    <div style={{fontSize: 13}}>{t.parts}</div>
                    <div style={{fontSize: 12, color: 'var(--color-grey-500)'}}>{t.supplier}</div>
                  </td>
                  <td style={{fontWeight: 600, fontSize: 13}}>{t.cost}</td>
                  <td><span className={"badge badge--" + statusColor[t.status]}>{t.status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card" style={{marginTop: 24}}>
        <div className="card__header">
          <div className="card__title">Ticket Detail · RT-0142</div>
          <span className="badge badge--orange">In Progress</span>
        </div>
        <div className="form-grid">
          <div className="field">
            <label>Machine Number</label>
            <input defaultValue="PLC-007 — Liebherr LTM 1090" disabled/>
          </div>
          <div className="field">
            <label>Issue Reported</label>
            <input defaultValue="Hydraulic line leak — boom cylinder"/>
          </div>
          <div className="field">
            <label>Priority</label>
            <div className="radio-group">
              {['Low', 'Medium', 'High'].map(p => (
                <button key={p} className={"radio-chip " + (p === 'High' ? "radio-chip--active" : "")}>{p}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Assigned Mechanic</label>
            <select defaultValue="Faizal Rahman"><option>Faizal Rahman</option><option>Boon Heng</option><option>Suresh</option></select>
          </div>
          <div className="field">
            <label>Spare Parts Used</label>
            <input defaultValue="Hydraulic seal kit, 2L ATF"/>
          </div>
          <div className="field">
            <label>Supplier</label>
            <input defaultValue="Hydratek JB"/>
          </div>
          <div className="field">
            <label>Cost (RM)</label>
            <input defaultValue="1,840.00"/>
          </div>
          <div className="field">
            <label>Repair Status</label>
            <select defaultValue="In Progress">
              <option>Reported</option><option>Awaiting Parts</option><option>In Progress</option><option>Completed</option>
            </select>
          </div>
          <div className="field full">
            <label>Completion Remarks</label>
            <textarea placeholder="Pending — will fill on completion."/>
          </div>
        </div>
        <div style={{display: 'flex', gap: 12, justifyContent: 'flex-end', marginTop: 20}}>
          <button className="btn btn--ghost">Save</button>
          <button className="btn btn--primary"><Check size={16}/> Mark Complete</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RepairsPage });