// Suppliers.jsx — Master Data › Supplier. Parts & service supplier directory.
// Admin/Finance: edit. Other roles: view-only.

function SuppliersPage({ role }) {
  const canEdit = role === 'Admin' || role === 'Finance';
  const [q, setQ] = React.useState('');

  const rows = SUPPLIER_DIRECTORY.filter(s =>
    q === '' || (s.name + ' ' + s.category + ' ' + s.contact).toLowerCase().includes(q.toLowerCase())
  );

  return (
    <div className="page">
      <div className="note-banner">
        <Factory size={16} style={{color: 'var(--color-navy)'}}/>
        <div>
          <strong>Supplier</strong> — parts, lubricants and service vendors. These feed the supplier picker on workshop repair &amp; maintenance tickets. {canEdit ? 'You can add and edit suppliers.' : 'View-only.'}
        </div>
      </div>

      <div className="card">
        <div className="card__header">
          <div>
            <h3 className="card__title">Supplier Directory</h3>
            <div className="card__sub">{rows.length} of {SUPPLIER_DIRECTORY.length} suppliers</div>
          </div>
          {canEdit ? <button className="btn btn--primary"><Plus size={14}/> Add Supplier</button> : <span className="restricted-tag"><Lock size={11}/> View only</span>}
        </div>

        <div style={{padding: '12px 16px', borderBottom: '1px solid var(--color-grey-200)'}}>
          <div className="topbar__search" style={{maxWidth: 320, margin: 0}}>
            <Search size={16} className="topbar__search-icon"/>
            <input placeholder="Search supplier, category or contact..." value={q} onChange={e => setQ(e.target.value)}/>
          </div>
        </div>

        <div className="card__body" style={{padding: 0, overflowX: 'auto'}}>
          <table className="table">
            <thead><tr><th>ID</th><th>Supplier</th><th>Category</th><th>Contact</th><th>Phone</th><th>Email</th><th>Terms</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {rows.map(s => (
                <tr key={s.id}>
                  <td style={{fontFamily: 'monospace', fontSize: 12}}>{s.id}</td>
                  <td style={{fontWeight: 600}}>{s.name}</td>
                  <td>{s.category}</td>
                  <td>{s.contact}</td>
                  <td style={{fontFamily: 'monospace', fontSize: 12}}>{s.phone}</td>
                  <td style={{fontSize: 12, color: 'var(--color-grey-600)'}}>{s.email}</td>
                  <td>{s.terms}</td>
                  <td><span className={"status status--" + (s.status === 'Active' ? 'green' : 'yellow')}>{s.status}</span></td>
                  <td>{canEdit ? <button className="btn btn--ghost" style={{padding: '4px 10px', fontSize: 12}} onClick={() => window.askAdminPassword('Edit supplier record', () => {})}><Edit size={12}/></button> : null}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SuppliersPage });