// Customer.jsx — Master Data › Customer. Customer directory + negotiated
// price list (moved here from Account & Finance). Admin: full CRUD.

function CustomerPage({ role }) {
  const [tab, setTab] = React.useState('directory');
  const isAdmin = role === 'Admin';

  return (
    <div className="page">
      <div className="note-banner">
        <Users size={16} style={{color: 'var(--color-navy)'}}/>
        <div>
          <strong>Customer</strong> — master customer directory and each account's negotiated day-rates. {isAdmin ? 'You can add, edit and remove records.' : 'View-only — only Admin can edit customer master data.'}
        </div>
      </div>

      <div className="tab-bar">
        <button className={"tab-btn " + (tab === 'directory' ? 'tab-btn--active' : '')} onClick={() => setTab('directory')}>
          <Users size={14}/> Directory ({CUSTOMERS.length})
        </button>
        <button className={"tab-btn " + (tab === 'pricelist' ? 'tab-btn--active' : '')} onClick={() => setTab('pricelist')}>
          <DollarSign size={14}/> Price List
        </button>
      </div>

      {tab === 'directory' ? (
        <div className="card">
          <div className="card__header">
            <div>
              <h3 className="card__title">Customers</h3>
              <div className="card__sub">Master customer list — only Admin can add or edit</div>
            </div>
            {isAdmin ? <button className="btn btn--primary"><Plus size={14}/> Add Customer</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>Customer</th><th>Email</th><th>Contacts</th><th>Locations</th><th>Jobs</th><th></th></tr></thead>
              <tbody>
                {CUSTOMERS.map(c => (
                  <tr key={c.id}>
                    <td style={{fontFamily: 'monospace', fontSize: 12}}>{c.id}</td>
                    <td style={{fontWeight: 600}}>{c.name}</td>
                    <td style={{fontSize: 13}}>
                      <a href={'mailto:' + c.email} style={{color: 'var(--color-navy)', textDecoration: 'none'}}>{c.email}</a>
                    </td>
                    <td style={{fontSize: 13, color: 'var(--color-grey-700)'}}>
                      {c.contacts.map(ct => (
                        <div key={ct.name}>{ct.name} · <span style={{color: 'var(--color-grey-500)'}}>{ct.phone}</span></div>
                      ))}
                    </td>
                    <td style={{fontSize: 12, color: 'var(--color-grey-600)'}}>
                      {c.locations.map(l => <div key={l}>{l}</div>)}
                    </td>
                    <td><span className="status status--blue">{c.jobs}</span></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 === 'pricelist' ? <PriceListPage role={role}/> : null}
    </div>
  );
}

Object.assign(window, { CustomerPage });