// MasterData.jsx — Machinery master data: Machines + Categories tabs.
// (Customers → Customer page · Operators/Riggers → Employees page.)
// Admin: full CRUD. Other roles: view-only.

function MasterDataPage({ role }) {
  const [tab, setTab] = React.useState('machines');
  const [adding, setAdding] = React.useState(false);
  const isAdmin = role === 'Admin';

  return (
    <div className="page">
      <div className="note-banner">
        <Truck size={16} style={{color: 'var(--color-navy)'}}/>
        <div>
          <strong>Machinery</strong> — the fleet master: every crane, its plate, category and live availability. {isAdmin ? 'You can add, edit and remove records.' : 'View-only — only Admin can edit master data.'}
        </div>
      </div>

      <div className="tab-bar">
        <button className={"tab-btn " + (tab === 'machines' ? 'tab-btn--active' : '')} onClick={() => setTab('machines')}>
          <Truck size={14}/> Machines ({MACHINES.length})
        </button>
        <button className={"tab-btn " + (tab === 'categories' ? 'tab-btn--active' : '')} onClick={() => setTab('categories')}>
          <Layers size={14}/> Categories ({CATEGORIES.length})
        </button>
      </div>

      {tab === 'machines' ? (
        <div className="card">
          <div className="card__header">
            <div>
              <h3 className="card__title">Fleet Machines</h3>
              <div className="card__sub">Plate numbers, categories and live availability</div>
            </div>
            {isAdmin ? <button className="btn btn--primary" onClick={() => setAdding(true)}><Plus size={14}/> Add Machine</button> : <span className="restricted-tag"><Lock size={11}/> Admin only</span>}
          </div>
          <div className="card__body" style={{padding: 0, overflowX: 'auto'}}>
            <table className="table">
              <thead><tr><th>ID</th><th>Status</th><th>Machine</th><th>Plate</th><th>Category</th><th>Tonnage / Reach</th><th></th></tr></thead>
              <tbody>
                {[...MACHINES].sort((a, b) => {
                  const order = { available: 0, occupied: 1, unavailable: 2 };
                  return (order[a.status] ?? 3) - (order[b.status] ?? 3);
                }).map(m => (
                  <tr key={m.id}>
                    <td style={{fontFamily: 'monospace', fontSize: 12}}>{m.id}</td>
                    <td><span className={"mdot mdot--" + m.status}/> <span style={{fontSize: 12, color: 'var(--color-grey-700)', textTransform: 'capitalize'}}>{m.status}</span></td>
                    <td style={{fontWeight: 600}}>{m.name}</td>
                    <td style={{fontFamily: 'monospace'}}>{m.plate}</td>
                    <td>{m.category}</td>
                    <td>{m.tonnage}</td>
                    <td>{isAdmin ? <button className="btn btn--ghost" style={{padding: '4px 10px', fontSize: 12}} onClick={() => window.askAdminPassword('Edit master data record', () => {})}><Edit size={12}/></button> : null}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : null}

      {tab === 'categories' ? (
        <div className="card">
          <div className="card__header">
            <div>
              <h3 className="card__title">Machine Categories</h3>
              <div className="card__sub">Used for grouping in bookings list and analytics</div>
            </div>
            {isAdmin ? <button className="btn btn--primary"><Plus size={14}/> Add Category</button> : <span className="restricted-tag"><Lock size={11}/> Admin only</span>}
          </div>
          <div className="card__body" style={{padding: 0, overflowX: 'auto'}}>
            <table className="table">
              <thead><tr><th>Color</th><th>Name</th><th>Machines in fleet</th><th></th></tr></thead>
              <tbody>
                {CATEGORIES.map(c => {
                  const count = MACHINES.filter(m => m.category === c.name).length;
                  return (
                    <tr key={c.id}>
                      <td><div style={{width: 28, height: 28, borderRadius: 6, background: c.color}}/></td>
                      <td style={{fontWeight: 600}}>{c.name}</td>
                      <td>{count} machine{count === 1 ? '' : 's'}</td>
                      <td>{isAdmin ? <button className="btn btn--ghost" style={{padding: '4px 10px', fontSize: 12}} onClick={() => window.askAdminPassword('Edit master data record', () => {})}><Edit size={12}/></button> : null}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      ) : null}
    </div>
  );
}

Object.assign(window, { MasterDataPage });