// Supplier Contacts — vendor directory for Recon & Rework.
//
// Model:
//   Types       — one or more of Exterior / Interior / Internal (a supplier can serve several)
//   Categories  — one or more service categories; the list is extensible (add anytime)
//   Jobs        — free-text list the supplier handles
//   Alias is the unique key; one alias can hold MULTIPLE correspondence contacts.
//   Type, Category and Job are chosen SEPARATELY (independent multi-select + job list).

const SUPPLIER_TYPES = ['Exterior', 'Interior', 'Internal'];
const SUPPLIER_TYPE_ABBR = { 'Exterior': 'Ex', 'Interior': 'In', 'Internal': 'Int' };
const SUPPLIER_TYPE_TONE = { 'Exterior': 'blue', 'Interior': 'gold', 'Internal': 'zinc' };

// Service categories — a flat, extensible list (users can add new ones anytime).
// A supplier may belong to several categories.
let SUPPLIER_CATEGORIES = [
  'Garage',
  'Spray/Bodywork (Exterior)',
  'Spray/Bodywork (Interior)',
  'Detailing/Hygiene',
  'Tires/Rims',
  'Stockist',
  'Sticker Wrap',
  'Interior Surface Covering (Leather/Fabric/Alcantara)',
  'Wiring/Sound/Electronics',
];
function addSupplierCategory(name) {
  const v = (name || '').trim();
  if (v && !SUPPLIER_CATEGORIES.some((c) => c.toLowerCase() === v.toLowerCase())) {
    SUPPLIER_CATEGORIES = [...SUPPLIER_CATEGORIES, v];
    window.SUPPLIER_CATEGORIES = SUPPLIER_CATEGORIES;
  }
  return v;
}

// alias = unique key · company-level: landline, address (addr), uen
// contacts[] = multiple correspondences, each { person, role, mobile, email }
const SUPPLIERS = [
  { id:'V-001', alias:'Sin Ming', name:'Sin Ming Auto Works', types:['Exterior','Internal'], categories:['Spray/Bodywork (Exterior)','Garage'], jobs:['Panel replacement','Frame straightening','Dent removal'],
    landline:'+65 6841 2200', uen:'199203344K', addr:'Blk 12 Sin Ming Drive #02-15',
    contacts:[{person:'Kelvin Tan', role:'Owner', mobile:'+65 9123 4567', email:'kelvin@sinmingauto.sg'},{person:'Mei Ling', role:'Admin', mobile:'+65 9820 1122', email:'admin@sinmingauto.sg'}],
    rating:5, notes:'Preferred — high-end European panels' },
  { id:'V-002', alias:'AutoFinish', name:'AutoFinish Spray Centre', types:['Exterior'], categories:['Spray/Bodywork (Exterior)'], jobs:['Full respray','Bumper respray','Spot respray'],
    landline:'+65 6745 8800', uen:'201145566M', addr:'8 Kaki Bukit Place #01-08',
    contacts:[{person:'James Lim', role:'Manager', mobile:'+65 9234 5678', email:'james@autofinish.sg'}],
    rating:5, notes:'Fast turnaround on full respray' },
  { id:'V-003', alias:'CarCare', name:'CarCare Detailing', types:['Exterior','Interior'], categories:['Detailing/Hygiene','Interior Surface Covering (Leather/Fabric/Alcantara)'], jobs:['Coating','FG polish','Engine bay clean','Buffing'],
    landline:'+65 6755 1188', uen:'201320077W', addr:'Ubi Ave 2 #03-22',
    contacts:[{person:'Aishah B.', role:'Owner', mobile:'+65 9345 6789', email:'aishah@carcare.sg'},{person:'Faizal', role:'Bookings', mobile:'+65 9655 2031', email:'booking@carcare.sg'}],
    rating:4, notes:'Interior + paint correction specialist' },
  { id:'V-004', alias:'Speedway', name:'Speedway Service', types:['Internal'], categories:['Garage'], jobs:['Major service','Timing belt / chain','Brakes','Gearbox overhaul'],
    landline:'+65 6452 7000', uen:'199805512E', addr:'10 Tagore Lane',
    contacts:[{person:'Daniel Goh', role:'Service advisor', mobile:'+65 9456 7890', email:'daniel@speedway.sg'},{person:'Suresh', role:'Parts', mobile:'+65 9712 4408', email:'parts@speedway.sg'}],
    rating:5, notes:'Major service incl. timing belt, brakes' },
  { id:'V-005', alias:'TyrePro', name:'TyrePro Singapore', types:['Exterior'], categories:['Tires/Rims'], jobs:['Tyre supply','Wheel alignment','Balancing','Rim refurb'],
    landline:'+65 6560 1212', uen:'200912388R', addr:'18 Jurong East St 12 #01-05',
    contacts:[{person:'Ahmad Rizal', role:'Manager', mobile:'+65 9567 8901', email:'rizal@tyrepro.sg'}],
    rating:4, notes:'Continental, Michelin, BS dealer' },
  { id:'V-006', alias:'CoolBreeze', name:'CoolBreeze Aircon', types:['Internal'], categories:['Wiring/Sound/Electronics'], jobs:['AC regas','Compressor','Electrical fault diagnosis'],
    landline:'+65 6368 4422', uen:'201507711C', addr:'45 Sungei Kadut Loop',
    contacts:[{person:'Tony Tan', role:'Technician', mobile:'+65 9678 9012', email:'tony@coolbreeze.sg'}],
    rating:4, notes:'AC regas + electrical fault diagnosis' },
  { id:'V-007', alias:'ClearView', name:'ClearView Auto Glass', types:['Exterior'], categories:['Garage'], jobs:['Windscreen replacement','Chip repair','ADAS recalibration'],
    landline:'+65 6383 4040', uen:'200611099D', addr:'56 Defu Lane 10',
    contacts:[{person:'Vincent Ng', role:'Owner', mobile:'+65 9789 0123', email:'vincent@clearview.sg'},{person:'Workshop desk', role:'Workshop', mobile:'+65 9203 7781', email:'workshop@clearview.sg'}],
    rating:5, notes:'OEM windscreen + ADAS recalibration' },
  { id:'V-008', alias:'WrapLab', name:'WrapLab Singapore', types:['Exterior'], categories:['Sticker Wrap'], jobs:['Full wrap','Accent wrap','Decal / sticker','PPF'],
    landline:'+65 6694 7373', uen:'201622133H', addr:'7 Mandai Link #02-01',
    contacts:[{person:'Sam Koh', role:'Owner', mobile:'+65 9012 3456', email:'sam@wraplab.sg'}],
    rating:4, notes:'Vinyl wrap + paint protection film' },
  { id:'V-009', alias:'PartsHub', name:'PartsHub Distributors', types:['Internal'], categories:['Stockist'], jobs:['OEM parts supply','Consumables','Filters & fluids'],
    landline:'+65 6555 1234', uen:'200499001B', addr:'island-wide',
    contacts:[{person:'Order desk', role:'Sales', mobile:'+65 9100 5566', email:'orders@partshub.sg'},{person:'Raju', role:'Logistics', mobile:'+65 9001 2233', email:'logistics@partshub.sg'}],
    rating:4, notes:'OEM + aftermarket parts stockist' },
  { id:'V-010', alias:'GL Workshop', name:'Workshop Bay 3 (GL Auto)', types:['Internal'], categories:['Garage'], jobs:['Major service','Oil leak repair','PDI'],
    landline:'+65 6280 1500', uen:'GL-INTERNAL', addr:'401 MacPherson Rd #01-15',
    contacts:[{person:'Ahmad Zaki', role:'In-house', mobile:'internal', email:'zaki@glauto.sg'}],
    rating:5, notes:'In-house workshop — light service & PDI' },
  { id:'V-011', alias:'LeatherLab', name:'LeatherLab Re-trim', types:['Interior'], categories:['Interior Surface Covering (Leather/Fabric/Alcantara)'], jobs:['Seat re-trim','Door card restitch','Roof lining'],
    landline:'+65 6369 8181', uen:'201733900F', addr:'4 Sungei Kadut Way',
    contacts:[{person:'Kumar S.', role:'Owner', mobile:'+65 9881 1010', email:'kumar@leatherlab.sg'}],
    rating:5, notes:'Seat re-trim · door card restitch' },
  { id:'V-012', alias:'PowerSeat', name:'PowerSeat Motors', types:['Interior'], categories:['Wiring/Sound/Electronics'], jobs:['Power steering','Power window','Power seat','Head unit'],
    landline:'+65 6453 7272', uen:'201288455G', addr:'Sin Ming Industrial Estate',
    contacts:[{person:'Tan K.', role:'Technician', mobile:'+65 9772 8181', email:'tan@powerseat.sg'}],
    rating:4, notes:'Power steering / window motor repair' },
];

// Derive primary contact + phone for back-compat with the R&R supplier picker,
// and normalise types/categories to arrays.
SUPPLIERS.forEach((s) => {
  if (!s.types) s.types = s.type ? [s.type] : [];
  if (!s.categories) s.categories = s.category ? [s.category] : [];
  s.type = s.types[0];          // primary, for any legacy reads
  s.category = s.categories[0];
  const c = (s.contacts && s.contacts[0]) || {};
  s.contact = c.person || '—';
  s.phone = c.mobile || s.landline || '—';
});

window.SUPPLIERS = SUPPLIERS;
window.SUPPLIER_TYPES = SUPPLIER_TYPES;
window.SUPPLIER_CATEGORIES = SUPPLIER_CATEGORIES;

function ContactsCell({ contacts }) {
  if (!contacts || !contacts.length) return <span className="text-zinc-400">—</span>;
  return (
    <div className="space-y-2">
      {contacts.map((c, i) => (
        <div key={i} className="leading-tight">
          <div className="flex items-baseline gap-2">
            <span className="text-sm text-zinc-800">{c.person}</span>
            {c.role && <span className="text-[10px] text-zinc-400 uppercase tracking-wide">{c.role}</span>}
          </div>
          <div className="mono text-xs text-zinc-500">{c.mobile || '—'}</div>
          {c.email && <div className="text-xs text-zinc-500">{c.email}</div>}
        </div>
      ))}
    </div>
  );
}

function SupplierContactsModule() {
  const [q, setQ] = React.useState('');
  const [typeF, setTypeF] = React.useState('All');
  const [catF, setCatF] = React.useState('All');
  const [showAdd, setShowAdd] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [, forceRefresh] = React.useReducer((x) => x + 1, 0);
  // Archive: suppliers can be archived (hidden from active directory & R&R pickers)
  // and restored. `archived` is tracked in local state, seeded from the data.
  const [archivedIds, setArchivedIds] = React.useState(() =>
    new Set(SUPPLIERS.filter((s) => s.archived).map((s) => s.id)));
  const [view, setView] = React.useState('Active'); // 'Active' | 'Archived'

  const isArchived = (s) => archivedIds.has(s.id);
  const setArchived = (id, on) => {
    setArchivedIds((prev) => {
      const next = new Set(prev);
      if (on) next.add(id); else next.delete(id);
      // keep the global flag in sync so the R&R supplier picker excludes archived
      const s = SUPPLIERS.find((x) => x.id === id);
      if (s) s.archived = on;
      return next;
    });
  };

  // Category filter options — the full extensible list.
  const catOptions = ['All', ...SUPPLIER_CATEGORIES];

  const archivedCount = SUPPLIERS.filter((s) => isArchived(s)).length;

  const rows = SUPPLIERS.filter((s) => {
    if (view === 'Active' && isArchived(s)) return false;
    if (view === 'Archived' && !isArchived(s)) return false;
    if (typeF !== 'All' && !(s.types || []).includes(typeF)) return false;
    if (catF !== 'All' && !(s.categories || []).includes(catF)) return false;
    if (q) {
      const t = q.toLowerCase();
      const hay = [s.name, s.alias, (s.types||[]).join(' '), (s.categories||[]).join(' '), s.uen, s.landline, s.addr, (s.jobs || []).join(' '),
        ...(s.contacts || []).map((c) => [c.person, c.role, c.mobile, c.email].join(' '))].join(' ').toLowerCase();
      if (!hay.includes(t)) return false;
    }
    return true;
  });

  return (
    <div className="space-y-6">
      <PageHeader title="Supplier Contacts"
        actions={<>
          <Btn variant="outline" icon={Icons.Download} size="sm">Export</Btn>
          <Btn variant="primary" icon={Icons.Plus} onClick={()=>setShowAdd(true)}>Add Supplier</Btn>
        </>}/>

      <Card className="overflow-hidden">
        {/* Active / Archived tabs */}
        <div className="px-4 pt-3 border-b border-zinc-100 flex items-end gap-1">
          {[['Active', SUPPLIERS.length - archivedCount], ['Archived', archivedCount]].map(([v, n]) => {
            const active = view === v;
            return (
              <button key={v} onClick={()=>setView(v)}
                className={`px-3.5 py-2 text-sm font-semibold rounded-t-lg border-b-2 -mb-px transition ${
                  active ? 'border-[#D4A93A] text-zinc-900' : 'border-transparent text-zinc-500 hover:text-zinc-800'
                }`}>
                {v}
                <span className={`ml-1.5 text-[11px] px-1.5 py-0.5 rounded-full ${active ? 'bg-[#FDD551] text-black' : 'bg-zinc-100 text-zinc-500'}`}>{n}</span>
              </button>
            );
          })}
        </div>

        <div className="p-4 flex flex-wrap items-center gap-3 border-b border-zinc-100">
          <div className="flex-1 min-w-[200px] relative">
            <Icons.Search className="w-4 h-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2"/>
            <Input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search alias, company, job, contact…" className="pl-9"/>
          </div>
          {/* Type segmented filter */}
          <div className="inline-flex rounded-lg border border-zinc-300 overflow-hidden">
            {['All', ...SUPPLIER_TYPES].map((t) => (
              <button key={t} onClick={()=>setTypeF(t)}
                className={`px-3 py-1.5 text-xs font-semibold transition ${typeF===t ? 'grad-gold text-black' : 'bg-white text-zinc-600 hover:bg-zinc-50'}`}>
                {t}
              </button>
            ))}
          </div>
          <Select value={catF} onChange={e=>setCatF(e.target.value)} options={catOptions}/>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left tbl-stack">
            <thead>
              <tr className="border-b border-zinc-200 bg-zinc-50/60">
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Alias</th>
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Type</th>
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Category</th>
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Jobs</th>
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Correspondence</th>
                <th className="text-left font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Company (landline · UEN · address)</th>
                <th className="text-right font-semibold text-zinc-600 px-4 py-3 text-xs uppercase tracking-wider">Action</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((s) => (
                <tr key={s.id} className={`border-b border-zinc-100 hover:bg-[#FFFDF3] align-top ${isArchived(s) ? 'opacity-60' : ''}`}>
                  <td className="px-4 py-3">
                    <div className="font-semibold text-sm flex items-center gap-2">{s.alias}{isArchived(s) && <Chip tone="zinc">Archived</Chip>}</div>
                    <div className="text-[11px] text-zinc-500 mt-0.5">{s.name}</div>
                    {s.notes && <div className="text-[11px] text-zinc-400 mt-0.5">{s.notes}</div>}
                  </td>
                  <td data-label="Type" className="px-4 py-3">
                    <div className="flex flex-wrap gap-1 lg:max-w-[160px]">
                      {(s.types || []).map((tp) => <Chip key={tp} tone={SUPPLIER_TYPE_TONE[tp]}>{tp}</Chip>)}
                    </div>
                  </td>
                  <td data-label="Category" className="px-4 py-3 lg:max-w-[200px]">
                    <div className="flex flex-wrap gap-1">
                      {(s.categories || []).map((c) => <Chip key={c} tone="zinc">{c}</Chip>)}
                    </div>
                  </td>
                  <td data-label="Jobs" className="px-4 py-3">
                    <div className="flex flex-wrap gap-1 lg:max-w-[200px]">
                      {(s.jobs || []).map((j) => <Chip key={j} tone="zinc">{j}</Chip>)}
                    </div>
                  </td>
                  <td data-label="Correspondence" className="px-4 py-3"><ContactsCell contacts={s.contacts}/></td>
                  <td data-label="Company" className="px-4 py-3 lg:max-w-[220px]">
                    <div className="space-y-0.5 text-xs">
                      <div className="flex items-center gap-1.5 text-zinc-700"><Icons.Phone className="w-3 h-3 text-zinc-400 shrink-0"/><span className="mono">{s.landline || '—'}</span></div>
                      <div className="text-zinc-500">UEN <span className="mono">{s.uen || '—'}</span></div>
                      <div className="text-zinc-500 truncate" title={s.addr}>{s.addr || '—'}</div>
                    </div>
                  </td>
                  <td data-label="" className="px-4 py-3 text-right">
                    <div className="inline-flex items-center gap-1 justify-end">
                      {isArchived(s) ? (
                        <Btn variant="outline" size="sm" icon={Icons.RefreshCw} onClick={()=>setArchived(s.id, false)}>Restore</Btn>
                      ) : (
                        <>
                          <Btn variant="ghost" size="sm" icon={Icons.Edit} onClick={()=>setEditing(s)}>Edit</Btn>
                          <button onClick={()=>setArchived(s.id, true)} title="Archive — hide from active list & R&R picker"
                            className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700">
                            <Icons.Archive className="w-4 h-4"/>
                          </button>
                        </>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
              {rows.length===0 && (
                <tr><td colSpan={7} className="px-4 py-12 text-center text-sm text-zinc-500">{view==='Archived' ? 'No archived suppliers.' : 'No suppliers match the filter.'}</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      <SupplierAddModal open={showAdd || !!editing} editing={editing}
        onClose={()=>{ setShowAdd(false); setEditing(null); }}
        onSave={()=>{ setShowAdd(false); setEditing(null); forceRefresh(); }}/>
    </div>
  );
}

function SupplierAddModal({ open, onClose, onSave, editing }) {
  const isEdit = !!editing;
  const [types, setTypes] = React.useState([SUPPLIER_TYPES[0]]);
  const [categories, setCategories] = React.useState([]);
  const [catList, setCatList] = React.useState(SUPPLIER_CATEGORIES);
  const [newCat, setNewCat] = React.useState('');
  const [alias, setAlias] = React.useState('');
  const [name, setName] = React.useState('');
  const [addr, setAddr] = React.useState('');
  const [landline, setLandline] = React.useState('');
  const [uen, setUen] = React.useState('');
  const [notes, setNotes] = React.useState('');
  const [jobs, setJobs] = React.useState([]);
  const [jobInput, setJobInput] = React.useState('');
  const [contacts, setContacts] = React.useState([{ person: '', role: '', mobile: '', email: '' }]);

  // Prefill when opening (edit = existing supplier, add = blank).
  React.useEffect(() => {
    if (!open) return;
    setCatList(SUPPLIER_CATEGORIES);
    setNewCat('');
    if (editing) {
      setTypes([...(editing.types || (editing.type ? [editing.type] : []))]);
      setCategories([...(editing.categories || (editing.category ? [editing.category] : []))]);
      setAlias(editing.alias); setName(editing.name || '');
      setAddr(editing.addr || ''); setLandline(editing.landline || ''); setUen(editing.uen || ''); setNotes(editing.notes || '');
      setJobs([...(editing.jobs || [])]);
      setContacts(editing.contacts && editing.contacts.length ? editing.contacts.map((c) => ({ person:'', role:'', mobile:'', email:'', ...c })) : [{ person: '', role: '', mobile: '', email: '' }]);
    } else {
      setTypes([SUPPLIER_TYPES[0]]); setCategories([]);
      setAlias(''); setName(''); setAddr(''); setLandline(''); setUen(''); setNotes('');
      setJobs([]); setContacts([{ person: '', role: '', mobile: '', email: '' }]);
    }
    setJobInput('');
  }, [open, editing]);

  const toggleType = (t) => setTypes((ts) => ts.includes(t) ? ts.filter((x) => x !== t) : [...ts, t]);
  const toggleCat = (c) => setCategories((cs) => cs.includes(c) ? cs.filter((x) => x !== c) : [...cs, c]);
  const addCategory = () => {
    const v = newCat.trim();
    if (!v) return;
    const existing = catList.find((c) => c.toLowerCase() === v.toLowerCase());
    const canonical = existing || v;
    if (!existing) { addSupplierCategory(canonical); setCatList((l) => [...l, canonical]); }
    setCategories((cs) => cs.includes(canonical) ? cs : [...cs, canonical]);
    setNewCat('');
  };

  const aliasTaken = alias.trim() && SUPPLIERS.some((s) => s.alias.toLowerCase() === alias.trim().toLowerCase() && (!editing || s.id !== editing.id));

  const addJob = () => {
    const v = jobInput.trim();
    if (v && !jobs.includes(v)) setJobs([...jobs, v]);
    setJobInput('');
  };
  const removeJob = (j) => setJobs(jobs.filter((x) => x !== j));

  const setContact = (i, patch) => setContacts((cs) => cs.map((c, k) => k === i ? { ...c, ...patch } : c));
  const addContact = () => setContacts((cs) => [...cs, { person: '', role: '', mobile: '', email: '' }]);
  const delContact = (i) => setContacts((cs) => cs.length > 1 ? cs.filter((_, k) => k !== i) : cs);

  const canSave = !aliasTaken && alias.trim() && types.length > 0;

  const save = () => {
    const cleanContacts = contacts.filter((c) => (c.person || '').trim() || (c.mobile || '').trim());
    if (isEdit) {
      Object.assign(editing, {
        types: [...types], categories: [...categories], type: types[0], category: categories[0],
        alias: alias.trim(), name: name.trim(),
        addr: addr.trim(), landline: landline.trim(), uen: uen.trim(), notes: notes.trim(), jobs: [...jobs], contacts: cleanContacts
      });
      const c0 = cleanContacts[0] || {};
      editing.contact = c0.person || '—';
      editing.phone = c0.mobile || editing.landline || '—';
    } else {
      const id = 'V-' + String(SUPPLIERS.length + 1).padStart(3, '0');
      const c0 = cleanContacts[0] || {};
      SUPPLIERS.push({
        id, alias: alias.trim(), name: name.trim(), types: [...types], categories: [...categories], type: types[0], category: categories[0],
        jobs: [...jobs], contacts: cleanContacts, addr: addr.trim(), landline: landline.trim(), uen: uen.trim(), notes: notes.trim(),
        rating: 4, archived: false, contact: c0.person || '—', phone: c0.mobile || landline.trim() || '—'
      });
    }
    onSave ? onSave() : onClose();
  };

  return (
    <Modal open={open} onClose={onClose} wide title={isEdit ? 'Edit Supplier' : 'Add Supplier'}
      footer={<>
        <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
        <Btn variant="primary" icon={isEdit ? Icons.Check : Icons.Plus} disabled={!canSave} onClick={save}>{isEdit ? 'Save changes' : 'Add to directory'}</Btn>
      </>}>
      <div className="space-y-5">
        <div className="grid grid-cols-2 gap-4">
          <Field label="Alias" required hint="Unique short name shown in dropdowns">
            <Input value={alias} onChange={e=>setAlias(e.target.value)} placeholder="e.g. Sin Ming"/>
            {aliasTaken && <div className="text-[11px] text-red-600 mt-1">This alias is already in use — alias must be unique.</div>}
          </Field>
          <Field label="Company name" required><Input value={name} onChange={e=>setName(e.target.value)} placeholder="e.g. Sin Ming Auto Works"/></Field>
        </div>

        {/* Company-level details */}
        <div className="rounded-lg border border-zinc-200 bg-zinc-50/60 p-4">
          <div className="text-xs font-semibold text-zinc-600 mb-3">Company details</div>
          <div className="grid grid-cols-2 gap-4">
            <Field label="Company landline"><Input value={landline} onChange={e=>setLandline(e.target.value)} placeholder="+65 6xxx xxxx" className="mono"/></Field>
            <Field label="UEN"><Input value={uen} onChange={e=>setUen(e.target.value)} placeholder="e.g. 199203344K" className="mono"/></Field>
          </div>
          <div className="mt-3">
            <Field label="Address" required><Textarea rows={2} value={addr} onChange={e=>setAddr(e.target.value)} placeholder="Blk · Street · Unit"/></Field>
          </div>
        </div>

        {/* Type of work — multi-select (a supplier can serve several) */}
        <div>
          <div className="text-xs font-semibold text-zinc-600 mb-1.5">Type of work <span className="font-normal text-zinc-400">· tick all that apply</span></div>
          <div className="flex flex-wrap gap-2">
            {SUPPLIER_TYPES.map((t) => {
              const on = types.includes(t);
              return (
                <button key={t} type="button" onClick={()=>toggleType(t)}
                  className={`inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border text-sm font-semibold transition ${on ? 'bg-emerald-50 border-emerald-300 text-emerald-700' : 'bg-white border-zinc-300 text-zinc-600 hover:border-zinc-400'}`}>
                  <span className={`w-4 h-4 rounded flex items-center justify-center border ${on ? 'bg-emerald-500 border-emerald-500' : 'border-zinc-400 bg-white'}`}>
                    {on && <Icons.Check className="w-3 h-3 text-white"/>}
                  </span>
                  {t} <span className="text-[10px] opacity-60">({SUPPLIER_TYPE_ABBR[t]})</span>
                </button>
              );
            })}
          </div>
          {types.length === 0 && <div className="text-[11px] text-red-600 mt-1">Pick at least one type.</div>}
        </div>

        {/* Categories — multi-select + add new anytime */}
        <div>
          <div className="text-xs font-semibold text-zinc-600 mb-1.5">Categories of service <span className="font-normal text-zinc-400">· tick all that apply · add new anytime</span></div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mb-2">
            {catList.map((c) => {
              const on = categories.includes(c);
              return (
                <button key={c} type="button" onClick={()=>toggleCat(c)}
                  className={`inline-flex items-center gap-2 px-3 py-2 rounded-lg border text-sm text-left transition ${on ? 'bg-emerald-50 border-emerald-300 text-emerald-800' : 'bg-white border-zinc-300 text-zinc-700 hover:border-zinc-400'}`}>
                  <span className={`w-4 h-4 rounded flex items-center justify-center border flex-shrink-0 ${on ? 'bg-emerald-500 border-emerald-500' : 'border-zinc-400 bg-white'}`}>
                    {on && <Icons.Check className="w-3 h-3 text-white"/>}
                  </span>
                  <span className="leading-tight">{c}</span>
                </button>
              );
            })}
          </div>
          <div className="flex gap-2">
            <Input value={newCat} onChange={e=>setNewCat(e.target.value)}
              onKeyDown={(e)=>{ if(e.key==='Enter'){ e.preventDefault(); addCategory(); } }}
              placeholder="Add a new category…"/>
            <Btn variant="outline" icon={Icons.Plus} onClick={addCategory}>Add category</Btn>
          </div>
        </div>

        {/* Job list — separate from type/category */}
        <div>
          <div className="text-xs font-semibold text-zinc-600 mb-1.5">Job list <span className="font-normal text-zinc-400">· type a job and press Enter</span></div>
          <div className="flex gap-2">
            <Input value={jobInput} onChange={e=>setJobInput(e.target.value)}
              onKeyDown={(e)=>{ if(e.key==='Enter'){ e.preventDefault(); addJob(); } }}
              placeholder="e.g. Full respray"/>
            <Btn variant="outline" icon={Icons.Plus} onClick={addJob}>Add</Btn>
          </div>
          {jobs.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-2">
              {jobs.map((j) => (
                <span key={j} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#FFF8DE] border border-[#F4D98A] text-xs font-medium text-[#8A651F]">
                  {j}
                  <button type="button" onClick={()=>removeJob(j)} className="text-[#8A651F]/60 hover:text-[#8A651F]"><Icons.X className="w-3 h-3"/></button>
                </span>
              ))}
            </div>
          )}
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <div className="text-sm font-semibold">Correspondence contacts <span className="font-normal text-zinc-400 text-xs">· one alias, multiple correspondences</span></div>
            <Btn variant="outline" size="sm" icon={Icons.Plus} onClick={addContact}>Add contact</Btn>
          </div>
          <div className="space-y-3">
            {contacts.map((c, i) => (
              <div key={i} className="rounded-lg border border-zinc-200 p-3">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[11px] font-semibold text-zinc-500">Contact {i+1}</span>
                  <button type="button" onClick={()=>delContact(i)}
                    className={`w-7 h-7 flex items-center justify-center rounded-lg border border-zinc-200 text-zinc-400 hover:text-red-600 hover:border-red-200 ${contacts.length===1?'opacity-40 cursor-not-allowed':''}`}
                    title="Remove contact">
                    <Icons.Trash className="w-3.5 h-3.5"/>
                  </button>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <Field label="Contact person" required={i===0}>
                    <Input value={c.person} onChange={e=>setContact(i,{person:e.target.value})} placeholder="Full name"/>
                  </Field>
                  <Field label="Role">
                    <Input value={c.role} onChange={e=>setContact(i,{role:e.target.value})} placeholder="e.g. Owner"/>
                  </Field>
                  <Field label="Handphone" required={i===0}>
                    <Input value={c.mobile} onChange={e=>setContact(i,{mobile:e.target.value})} placeholder="+65 9xxx xxxx" className="mono"/>
                  </Field>
                  <Field label="Email">
                    <Input value={c.email} onChange={e=>setContact(i,{email:e.target.value})} placeholder="name@company.sg"/>
                  </Field>
                </div>
              </div>
            ))}
          </div>
        </div>

        <Field label="Notes" hint="Specialities, pricing, lead time…"><Textarea rows={2} value={notes} onChange={e=>setNotes(e.target.value)}/></Field>
      </div>
    </Modal>
  );
}

window.SupplierContactsModule = SupplierContactsModule;