// Transporter Master Module — OM Group ERP
const { useState: tmSt, useEffect: tmEf, useContext: tmCtx, useMemo: tmMemo, useRef: tmRef } = React;

const TM_VEH_TYPES   = ['6 Wheeler','10 Wheeler','12 Wheeler','Trailer','Tipper','Tanker','Concrete Mixer','Pickup','Other'];
const TM_CAP_UOMS    = ['Ton','CUM','KG','Other'];
const TM_STATUSES    = ['Active','Inactive','Blocked'];
const TM_VEH_STATUSES= ['Active','Inactive','Under Maintenance','Sold','Blocked'];

const TmSH = ({title,action}) => (
  <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10,paddingBottom:7,borderBottom:'2px solid #FEF3E8'}}>
    <span style={{color:'var(--or)',fontWeight:700,fontSize:13}}>{title}</span>
    {action}
  </div>
);

const TmBadge = ({s}) => {
  const c = {Active:'bg-gn',Inactive:'bg-gy',Blocked:'bg-rd','Under Maintenance':'bg-yw',Sold:'bg-bl'}[s]||'bg-gy';
  return <span className={`bdg ${c}`}>{s}</span>;
};

const PRow = ({label,value}) => (
  <div style={{display:'flex',gap:8,alignItems:'flex-start',padding:'5px 0',borderBottom:'1px solid #F9FAFB'}}>
    <span style={{fontSize:11.5,color:'var(--txt2)',minWidth:125,flexShrink:0}}>{label}</span>
    <span style={{fontSize:12,fontWeight:500,color:'var(--txt)'}}>{value||'—'}</span>
  </div>
);

function buildVehStats(vehs) {
  const m = {};
  vehs.forEach(v => {
    if (!m[v.transporterId]) m[v.transporterId] = {total:0,active:0,inactive:0,maint:0,sold:0,blocked:0,types:{}};
    const s = m[v.transporterId]; s.total++;
    if      (v.status==='Active')            s.active++;
    else if (v.status==='Inactive')          s.inactive++;
    else if (v.status==='Under Maintenance') s.maint++;
    else if (v.status==='Sold')              s.sold++;
    else if (v.status==='Blocked')           s.blocked++;
    const tp = v.vehicleType||'Unknown';
    s.types[tp] = (s.types[tp]||0)+1;
  });
  return m;
}

// ── One-time demo seed ──────────────────────────────────────
// _tmSeeded is an in-memory guard (prevents double-seed within a single page session).
// Store.data._tmMasterSeeded is the persistent guard (survives page refresh) — once set,
// the seed never runs again regardless of how many records the user deletes.
let _tmSeeded = false;
function tmSeedDemo() {
  if (_tmSeeded) return; _tmSeeded = true;
  // Persistent flag: if seed has already run in a previous session, never run again.
  // This makes user deletions permanent — the seed cannot undo them on reload.
  if (Store.data._tmMasterSeeded) return;
  if (Store.all('transporterMaster','group').length > 0) {
    // Records already exist (e.g. from a prior session) — mark as seeded and exit.
    Store.data._tmMasterSeeded = true; Store.save('_tmMasterSeeded'); return;
  }
  [{name:'Premavati Transport',contactPerson:'Gautam Kubal',mobile:'7559484001',altMobile:'',gst:'',email:'',address:'Main Road',city:'Pernem',state:'Goa',pincode:'403512',status:'Active'},
   {name:'Mauli Transport',contactPerson:'Utkarsh',mobile:'9876543210',altMobile:'',gst:'',email:'',address:'',city:'Pernem',state:'Goa',pincode:'403512',status:'Active'},
   {name:'Kriyansh Transport',contactPerson:'Akshay',mobile:'9123456789',altMobile:'',gst:'30ABCDE1234F1ZG',email:'info@kriyansh.com',address:'Industrial Area',city:'Vasco',state:'Goa',pincode:'403802',status:'Active'},
  ].forEach(t => Store.add('transporterMaster', t));

  const all  = Store.all('transporterMaster','group');
  const prem = all.find(t=>t.name==='Premavati Transport');
  const maul = all.find(t=>t.name==='Mauli Transport');
  const kri  = all.find(t=>t.name==='Kriyansh Transport');

  const av = (tid,vn,type,cap,st,dt,fe,ie,pe) => Store.add('vehicleMaster',{
    transporterId:tid, vehicleNumber:vn, vehicleType:type, capacity:cap, capacityUOM:'Ton',
    registrationState:'Goa', owner:all.find(x=>x.id===tid)?.name||'',
    status:st, lastActivity:dt, fitnessExpiry:fe||'', insuranceExpiry:ie||'', permitExpiry:pe||'',
  });

  if (prem) {
    ['GA03AV9955','GA03AH8776','GA03AV5599','GA03V9075','GA03AB1122','GA03AB3344','GA03AB5566','GA03AB7788','GA03AB9900','GA03CD1234'].forEach(
      (vn,i) => av(prem.id, vn, '10 Wheeler', 20, 'Active', `2026-06-${String(18-i).padStart(2,'0')}`, '2027-03-01','2027-06-01','2027-01-01')
    );
    av(prem.id,'GA03EF5678','Trailer',30,'Inactive','2026-05-10');
    av(prem.id,'GA03GH9012','Tipper',10,'Under Maintenance','2026-05-25');
  }
  if (maul) {
    ['GA05AV1001','GA05AV1002','GA05AV1003','GA05AV1004','GA05AB2001','GA05AB2002','GA05AB2003'].forEach(
      (vn,i) => av(maul.id, vn, '10 Wheeler', 20, 'Active', `2026-06-${String(18-i).padStart(2,'0')}`)
    );
    av(maul.id,'GA05AB2008','Tipper',10,'Active','2026-06-11');
  }
  if (kri) {
    ['10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler',
     '10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler','10 Wheeler',
     '10 Wheeler','10 Wheeler','10 Wheeler','Trailer','Trailer','Tipper','Pickup'].forEach((tp,i) =>
      av(kri.id, `GA06T${1000+i+1}`, tp, tp==='Trailer'?30:tp==='Tipper'?10:20, 'Active', `2026-06-${String(Math.min(18,i+1)).padStart(2,'0')}`)
    );
    av(kri.id,'GA06TR024','Trailer',30,'Inactive','2026-05-10');
    av(kri.id,'GA06TR025','Trailer',30,'Inactive','2026-04-20');
  }
  // Mark seed as permanently done — prevents re-seeding after user deletes all transporters
  Store.data._tmMasterSeeded = true; Store.save('_tmMasterSeeded');
}

// ============================================================
// ROOT — manages sub-view state & shared data
// ============================================================
function TransporterMasterPage() {
  window.useStoreSync();
  const [view,setView]         = tmSt('list'); // 'list'|'profile'|'vehicles'
  const [selTm,setSelTm]       = tmSt(null);
  const [transporters,setTms]  = tmSt([]);
  const [vehicles,setVehs]     = tmSt([]);

  tmEf(() => { tmSeedDemo(); load(); }, []);

  function load() {
    setTms(Store.all('transporterMaster','group'));
    setVehs(Store.all('vehicleMaster','group'));
  }

  const vehStats = tmMemo(() => buildVehStats(vehicles), [vehicles]);

  if (view === 'profile' && selTm) {
    const freshTm  = transporters.find(t=>t.id===selTm.id) || selTm;
    const tmVehs   = vehicles.filter(v=>v.transporterId===selTm.id);
    const stats    = vehStats[selTm.id] || {total:0,active:0,inactive:0,maint:0,sold:0,blocked:0,types:{}};
    return <TransporterProfile
      transporter={freshTm} vehStats={stats} vehicles={tmVehs}
      onBack={() => { setSelTm(null); setView('list'); }}
      onManageVehicles={() => setView('vehicles')}
      onEdit={() => { load(); const fr=Store.all('transporterMaster','group').find(t=>t.id===selTm.id); if(fr)setSelTm(fr); }}
    />;
  }

  if (view === 'vehicles' && selTm) {
    const tmVehs = vehicles.filter(v=>v.transporterId===selTm.id);
    return <VehicleMasterPage
      transporter={selTm} vehicles={tmVehs}
      onBack={() => setView('profile')}
      onDataChange={load}
    />;
  }

  return <TransporterListView
    transporters={transporters} vehStats={vehStats}
    onProfile={t => { setSelTm(t); setView('profile'); }}
    onVehicles={t => { setSelTm(t); setView('vehicles'); }}
    onDataChange={load}
  />;
}

// ============================================================
// TRANSPORTER LIST VIEW
// ============================================================
function TransporterListView({transporters,vehStats,onProfile,onVehicles,onDataChange}) {
  const [search,setSearch]=tmSt('');const [fSt,setFSt]=tmSt('');const [fLoc,setFLoc]=tmSt('');const [fFleet,setFFleet]=tmSt('');
  const [pg,setPg]=tmSt(1);const [modal,setModal]=tmSt(false);const [editItem,setEditItem]=tmSt(null);const [delId,setDelId]=tmSt(null);
  const PER = 50;

  const locs     = tmMemo(() => [...new Set(transporters.map(t=>t.city).filter(Boolean))].sort(), [transporters]);
  const filtered = tmMemo(() => transporters.filter(t => {
    if (search) { const q=search.toLowerCase(); if(!['name','contactPerson','mobile','city'].some(k=>String(t[k]||'').toLowerCase().includes(q)))return false; }
    if (fSt    && t.status!==fSt) return false;
    if (fLoc   && t.city!==fLoc)  return false;
    if (fFleet) { const tot=(vehStats[t.id]||{}).total||0; if(fFleet==='sm'&&!(tot>=1&&tot<=10))return false; if(fFleet==='md'&&!(tot>=11&&tot<=50))return false; if(fFleet==='lg'&&tot<50)return false; }
    return true;
  }), [transporters,search,fSt,fLoc,fFleet,vehStats]);

  const totalPgs = Math.ceil(filtered.length/PER);
  const paged    = filtered.slice((pg-1)*PER, pg*PER);

  const kpi = tmMemo(() => ({
    total:      transporters.length,
    active:     transporters.filter(t=>t.status==='Active').length,
    inactive:   transporters.filter(t=>t.status==='Inactive').length,
    blocked:    transporters.filter(t=>t.status==='Blocked').length,
    totalVehs:  Object.values(vehStats).reduce((s,v)=>s+(v.total||0),0),
    activeVehs: Object.values(vehStats).reduce((s,v)=>s+(v.active||0),0),
  }), [transporters,vehStats]);

  function handleSaved(goVeh, saved) { onDataChange(); setModal(false); if(goVeh&&saved) onVehicles(saved); }
  function handleDelete() {
    Store.all('vehicleMaster','group').filter(v=>v.transporterId===delId).forEach(v=>Store.del('vehicleMaster',v.id));
    Store.del('transporterMaster',delId);
    Store.addLog('DELETE','Transporter Master','Deleted transporter and all associated vehicles');
    setDelId(null); onDataChange(); window.toast&&window.toast('Transporter deleted','ok');
  }
  function clearF() { setSearch('');setFSt('');setFLoc('');setFFleet('');setPg(1); }

  return (
    <div>
      <div className="ph">
        <div><h1>Transporter Master</h1><p>Central fleet database — {kpi.total} transporters · {kpi.totalVehs} vehicles registered</p></div>
        <div className="ph-act">
          <button className="btn btn-wh btn-sm" onClick={()=>{
            const hdr=['Name','Contact Person','Mobile','Location','Total Vehicles','Active Vehicles','Status','GST Number'];
            const rows=filtered.map(t=>[t.name||'',t.contactPerson||'',t.mobile||'',t.city||'',(vehStats[t.id]||{}).total||0,(vehStats[t.id]||{}).active||0,t.status||'Active',t.gstNumber||''].map(v=>'"'+String(v).replace(/"/g,'""')+'"'));
            const csv='\uFEFF'+[hdr.map(h=>'"'+h+'"').join(','),...rows.map(r=>r.join(','))].join('\r\n');
            const blob=new Blob([csv],{type:'text/csv;charset=utf-8'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='transporters.csv';document.body.appendChild(a);a.click();setTimeout(()=>{URL.revokeObjectURL(a.href);a.remove();},1500);
            window.toast&&window.toast('Exported '+filtered.length+' transporters','ok');
          }}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Export CSV</button>
          <button className="btn btn-or" onClick={()=>{setEditItem(null);setModal(true);}}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Transporter</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="g-kpi-row-6" style={{display:'grid',gap:8,marginBottom:12}}>
        {[
          {lbl:'Transporters',  val:kpi.total,      c:'var(--txt)'},
          {lbl:'Active',        val:kpi.active,     c:'var(--ok)'},
          {lbl:'Inactive',      val:kpi.inactive,   c:'var(--txt2)'},
          {lbl:'Blocked',       val:kpi.blocked,    c:'var(--err)'},
          {lbl:'Total Vehicles',val:kpi.totalVehs,  c:'var(--or)'},
          {lbl:'Active Vehicles',val:kpi.activeVehs,c:'var(--ok)'},
        ].map(k=>(
          <div key={k.lbl} className="kpi">
            <div className="kpi-val" style={{color:k.c}}>{k.val}</div>
            <div className="kpi-lbl">{k.lbl}</div>
          </div>
        ))}
      </div>

      {/* Filter row */}
      <div className="frow">
        <div className="fs"><svg className="fs-ic" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
          <input value={search} onChange={e=>{setSearch(e.target.value);setPg(1);}} placeholder="Search name, contact, mobile, location…"/></div>
        <window.FiltSelect placeholder="All Status" value={fSt} onChange={v=>{setFSt(v);setPg(1);}} options={TM_STATUSES.map(s=>({value:s,label:s}))}/>
        <window.FiltSelect placeholder="All Locations" value={fLoc} onChange={v=>{setFLoc(v);setPg(1);}} options={locs.map(l=>({value:l,label:l}))}/>
        <window.FiltSelect placeholder="All Fleet Sizes" value={fFleet} onChange={v=>{setFFleet(v);setPg(1);}} options={[{value:'sm',label:'1–10 Vehicles'},{value:'md',label:'11–50 Vehicles'},{value:'lg',label:'50+ Vehicles'}]}/>
        {(search||fSt||fLoc||fFleet)&&<button className="btn btn-gh btn-sm" onClick={clearF}>Clear</button>}
        <span className="f-cnt">{filtered.length} records</span>
      </div>

      {/* Table */}
      <div className="card">
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:46,textAlign:'center'}}>SR NO</th>
              <th>TRANSPORTER NAME</th>
              <th>CONTACT PERSON</th>
              <th>MOBILE NUMBER</th>
              <th>LOCATION</th>
              <th style={{textAlign:'center'}}>TOTAL VEHICLES</th>
              <th style={{textAlign:'center'}}>ACTIVE VEHICLES</th>
              <th>STATUS</th>
              <th>ACTIONS</th>
            </tr></thead>
            <tbody>
              {paged.length===0
                ? <tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:40,color:'var(--txt2)'}}>No transporters found. Click "+ Add Transporter" to create the first record.</td></tr>
                : paged.map((t,idx) => {
                    const s = vehStats[t.id]||{total:0,active:0};
                    return (
                      <tr key={t.id} style={{cursor:'pointer'}} onClick={()=>onProfile(t)}>
                        <td style={{textAlign:'center',color:'var(--txt2)',fontWeight:500}}>{(pg-1)*PER+idx+1}</td>
                        <td>
                          <div style={{fontWeight:600,fontSize:12.5}}>{t.name}</div>
                          {t.gst&&<div style={{fontSize:10.5,color:'var(--txt3)',fontFamily:'var(--font)',marginTop:1}}>{t.gst}</div>}
                        </td>
                        <td>{t.contactPerson||'—'}</td>
                        <td style={{fontFamily:'var(--font)',fontSize:12}}>{t.mobile||'—'}</td>
                        <td>{t.city||'—'}</td>
                        <td style={{textAlign:'center',fontWeight:700,fontSize:14}}>{s.total}</td>
                        <td style={{textAlign:'center'}}>
                          <span style={{fontWeight:700,fontSize:14,color:'var(--ok)'}}>{s.active}</span>
                          {s.total>0&&<span style={{fontSize:10.5,color:'var(--txt3)',marginLeft:3}}>/{s.total}</span>}
                        </td>
                        <td onClick={e=>e.stopPropagation()}><TmBadge s={t.status}/></td>
                        <td onClick={e=>e.stopPropagation()}>
                          <div className="ra">
                            <button className="btn btn-wh btn-sm" onClick={()=>onProfile(t)}>Profile</button>
                            <button className="btn btn-or btn-sm"  onClick={()=>onVehicles(t)}>Vehicles</button>
                            <button className="btn btn-wh btn-sm" onClick={()=>{setEditItem(t);setModal(true);}}>Edit</button>
                            <button className="btn btn-rd btn-sm"  onClick={()=>setDelId(t.id)}>Del</button>
                          </div>
                        </td>
                      </tr>
                    );
                  })
              }
            </tbody>
          </table>
        </div>
      </div>
      {totalPgs>1&&<div className="pag"><button className="pg-b" onClick={()=>setPg(1)} disabled={pg===1}>«</button><button className="pg-b" onClick={()=>setPg(p=>p-1)} disabled={pg===1}>‹</button><span className="pg-inf">Page {pg} of {totalPgs}</span><button className="pg-b" onClick={()=>setPg(p=>p+1)} disabled={pg===totalPgs}>›</button><button className="pg-b" onClick={()=>setPg(totalPgs)} disabled={pg===totalPgs}>»</button></div>}

      {modal&&<TransporterFormModal item={editItem} onSaved={handleSaved} onClose={()=>setModal(false)}/>}
      {delId&&<window.Confirm onOk={handleDelete} onCancel={()=>setDelId(null)}/>}
    </div>
  );
}

// ============================================================
// TRANSPORTER FORM MODAL
// ============================================================
function TransporterFormModal({item,onSaved,onClose}) {
  const blank = {name:'',contactPerson:'',mobile:'',altMobile:'',gst:'',email:'',address:'',city:'',state:'Goa',pincode:'',status:'Active'};
  const [form,setForm] = tmSt(item ? {...item} : {...blank});
  const goVehRef = tmRef(false);
  const formRef  = tmRef(null);
  const sf = (k,v) => setForm(p=>({...p,[k]:v}));
  const [_initFrmT]=tmSt(()=>JSON.stringify(form));
  const [_discardT,_setDiscardT]=tmSt(false);
  function _guardCloseT(){if(JSON.stringify(form)!==_initFrmT)_setDiscardT(true);else onClose();}

  function handleSubmit(e) {
    e.preventDefault();
    const goVeh = goVehRef.current; goVehRef.current = false;
    let saved;
    if (item) {
      Store.update('transporterMaster', item.id, form);
      Store.addLog('UPDATE','Transporter Master',`Updated: ${form.name}`);
      window.toast&&window.toast('Transporter updated','ok');
      saved = {...form, id:item.id};
    } else {
      Store.add('transporterMaster', form);
      Store.addLog('CREATE','Transporter Master',`Created: ${form.name}`);
      window.toast&&window.toast('Transporter created','ok');
      const all = Store.all('transporterMaster','group');
      saved = [...all].reverse().find(t=>t.name===form.name&&t.mobile===form.mobile) || all[all.length-1];
    }
    onSaved(goVeh, saved);
  }

  return (
    <>
    <div className="mbg">
      <div className="mod mod-lg" style={{maxHeight:'92vh'}}>
        <div className="mod-hd"><h2>{item?'Edit':'Add'} Transporter</h2><button className="mod-x" onClick={_guardCloseT}>×</button></div>
        <form ref={formRef} onSubmit={handleSubmit}>
          <div className="mod-bd">
            <div style={{marginBottom:16}}>
              <TmSH title="Transporter Information"/>
              <div className="fg">
                <div className="fld full"><label>Transporter Name <span className="req">*</span></label><input className="inp" value={form.name} onChange={e=>sf('name',e.target.value)} required placeholder="e.g. Premavati Transport"/></div>
                <div className="fld"><label>Contact Person</label><input className="inp" value={form.contactPerson} onChange={e=>sf('contactPerson',e.target.value)} placeholder="Primary contact name"/></div>
                <div className="fld"><label>Mobile Number</label><input className="inp" type="tel" value={form.mobile} onChange={e=>sf('mobile',e.target.value)} placeholder="9876543210"/></div>
                <div className="fld"><label>Alternative Number</label><input className="inp" type="tel" value={form.altMobile} onChange={e=>sf('altMobile',e.target.value)} placeholder="Alternate mobile"/></div>
                <div className="fld"><label>GST Number</label><input className="inp" value={form.gst} onChange={e=>sf('gst',e.target.value)} placeholder="30AABCX1234A1Z5"/></div>
                <div className="fld"><label>Email Address</label><input className="inp" type="email" value={form.email} onChange={e=>sf('email',e.target.value)} placeholder="contact@transport.com"/></div>
                <div className="fld"><label>Status</label><window.FormSelect value={form.status} onChange={v=>sf('status',v)} options={TM_STATUSES.map(s=>({value:s,label:s}))}/></div>
              </div>
            </div>
            <div>
              <TmSH title="Address Details"/>
              <div className="fg">
                <div className="fld full"><label>Address</label><input className="inp" value={form.address} onChange={e=>sf('address',e.target.value)} placeholder="Street / locality"/></div>
                <div className="fld"><label>City</label><input className="inp" value={form.city} onChange={e=>sf('city',e.target.value)} placeholder="e.g. Pernem"/></div>
                <div className="fld"><label>State</label><input className="inp" value={form.state} onChange={e=>sf('state',e.target.value)} placeholder="e.g. Goa"/></div>
                <div className="fld"><label>Pincode</label><input className="inp" value={form.pincode} onChange={e=>sf('pincode',e.target.value)} placeholder="403512" maxLength={6}/></div>
              </div>
            </div>
          </div>
          <div className="mod-ft">
            <button type="button" className="btn btn-wh" onClick={_guardCloseT}>Cancel</button>
            <button type="button" className="btn btn-wh" onClick={()=>{goVehRef.current=true;formRef.current?.requestSubmit();}}>Save &amp; Add Vehicles</button>
            <button type="submit" className="btn btn-or">{item?'Update':'Save'}</button>
          </div>
        </form>
      </div>
    </div>
    {_discardT&&<window.DiscardChangesModal onContinue={()=>_setDiscardT(false)} onDiscard={onClose}/>}
    </>
  );
}

// ============================================================
// TRANSPORTER PROFILE
// ============================================================
function TransporterProfile({transporter:t,vehStats,vehicles,onBack,onManageVehicles,onEdit}) {
  const [editModal,setEditModal] = tmSt(false);
  const fleetTypes = Object.entries(vehStats.types||{}).sort((a,b)=>b[1]-a[1]);

  return (
    <div>
      {/* Header nav */}
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:14,flexWrap:'wrap'}}>
        <button className="btn btn-wh btn-sm" onClick={onBack}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
          Back to List
        </button>
        <div style={{flex:1}}>
          <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
            <h1 style={{fontSize:17,fontWeight:700,display:'inline',margin:0}}>{t.name}</h1>
            <TmBadge s={t.status}/>
          </div>
          <p style={{fontSize:11.5,color:'var(--txt2)',marginTop:2}}>Transporter Profile · Master Record</p>
        </div>
        <button className="btn btn-wh btn-sm" onClick={()=>setEditModal(true)}>Edit Profile</button>
        <button className="btn btn-or" onClick={onManageVehicles}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
          Manage Vehicles
        </button>
      </div>

      {/* Vehicle stats */}
      <div style={{display:'flex',gap:8,marginBottom:12,flexWrap:'wrap'}}>
        {[
          {l:'Total Vehicles',v:vehStats.total||0,c:'var(--or)'},
          {l:'Active',v:vehStats.active||0,c:'var(--ok)'},
          {l:'Inactive',v:vehStats.inactive||0,c:'var(--txt2)'},
          {l:'Maintenance',v:vehStats.maint||0,c:'var(--warn)'},
          ...(vehStats.sold>0?[{l:'Sold',v:vehStats.sold,c:'var(--txt3)'}]:[]),
          ...(vehStats.blocked>0?[{l:'Blocked',v:vehStats.blocked,c:'var(--err)'}]:[]),
        ].map(k=>(
          <div key={k.l} className="kpi" style={{flex:1,minWidth:100}}>
            <div className="kpi-val" style={{color:k.c}}>{k.v}</div>
            <div className="kpi-lbl">{k.l}</div>
          </div>
        ))}
      </div>

      {/* Info cards grid */}
      <div className="dd-2col" style={{gap:10,marginBottom:10}}>
        <div className="card">
          <div className="card-hd"><h3>Basic Information</h3></div>
          <div style={{padding:'10px 14px'}}>
            <PRow label="Transporter Name" value={<strong>{t.name}</strong>}/>
            <PRow label="Status"           value={<TmBadge s={t.status}/>}/>
            {t.gst&&<PRow label="GST Number" value={<span style={{fontFamily:'var(--font)',fontSize:12}}>{t.gst}</span>}/>}
            {t.email&&<PRow label="Email" value={<a href={`mailto:${t.email}`} style={{color:'var(--or)',textDecoration:'none'}}>{t.email}</a>}/>}
          </div>
        </div>
        <div className="card">
          <div className="card-hd"><h3>Contact Information</h3></div>
          <div style={{padding:'10px 14px'}}>
            <PRow label="Contact Person" value={t.contactPerson}/>
            <PRow label="Mobile"         value={t.mobile&&<a href={`tel:${t.mobile}`} style={{color:'var(--or)',textDecoration:'none'}}>{t.mobile}</a>}/>
            {t.altMobile&&<PRow label="Alternate Mobile" value={t.altMobile}/>}
          </div>
        </div>
        <div className="card">
          <div className="card-hd"><h3>Address</h3></div>
          <div style={{padding:'10px 14px'}}>
            {t.address&&<PRow label="Street"  value={t.address}/>}
            <PRow label="City"     value={t.city}/>
            <PRow label="State"    value={t.state}/>
            {t.pincode&&<PRow label="Pincode" value={t.pincode}/>}
          </div>
        </div>
        <div className="card">
          <div className="card-hd"><h3>Fleet Type Breakdown</h3></div>
          <div style={{padding:'10px 14px'}}>
            {fleetTypes.length===0
              ? <div style={{fontSize:12,color:'var(--txt3)',fontStyle:'italic',padding:'6px 0'}}>No vehicles registered yet.</div>
              : fleetTypes.map(([type,count])=>(
                <div key={type} style={{display:'flex',alignItems:'center',gap:8,padding:'5px 0',borderBottom:'1px solid #F9FAFB'}}>
                  <span style={{fontSize:12,flex:1}}>{type}</span>
                  <window.PremiumProgress pct={Math.round((count/(vehStats.total||1))*100)} color="var(--or)" height={5} style={{width:72}} />
                  <span style={{fontSize:12,fontWeight:700,color:'var(--or)',minWidth:20,textAlign:'right'}}>{count}</span>
                </div>
              ))
            }
          </div>
        </div>
      </div>

      {/* Vehicle list preview */}
      {vehicles.length>0&&(
        <div className="card">
          <div className="card-hd">
            <h3>Fleet Overview ({vehicles.length} vehicles)</h3>
            <button className="btn btn-or btn-sm" onClick={onManageVehicles}>Manage All Vehicles</button>
          </div>
          <div className="tbl-w" style={{maxHeight:260}}>
            <table className="tbl">
              <thead><tr><th>VEHICLE NUMBER</th><th>TYPE</th><th>CAPACITY</th><th>UOM</th><th>OWNER</th><th>STATUS</th><th>LAST ACTIVITY</th></tr></thead>
              <tbody>
                {vehicles.slice(0,10).map(v=>(
                  <tr key={v.id}>
                    <td><span style={{fontFamily:'var(--font)',fontSize:12,fontWeight:700,background:'#F9FAFB',padding:'2px 6px',borderRadius:3}}>{v.vehicleNumber}</span></td>
                    <td><span className="bdg bg-or" style={{fontSize:10.5}}>{v.vehicleType}</span></td>
                    <td style={{fontWeight:600}}>{v.capacity}</td>
                    <td style={{color:'var(--txt2)'}}>{v.capacityUOM}</td>
                    <td style={{fontSize:11.5}}>{v.owner||t.name}</td>
                    <td><TmBadge s={v.status}/></td>
                    <td style={{fontSize:11.5,color:'var(--txt2)'}}>{v.lastActivity||'—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {vehicles.length>10&&(
            <div style={{padding:'7px 14px',fontSize:11.5,color:'var(--txt2)',borderTop:'1px solid var(--bdr)',display:'flex',alignItems:'center',gap:8}}>
              Showing 10 of {vehicles.length} vehicles.
              <button className="btn btn-wh btn-sm" onClick={onManageVehicles}>View All</button>
            </div>
          )}
        </div>
      )}

      {editModal&&<TransporterFormModal item={t} onSaved={()=>{setEditModal(false);onEdit();}} onClose={()=>setEditModal(false)}/>}
    </div>
  );
}

// ============================================================
// VEHICLE MASTER PAGE
// ============================================================
function VehicleMasterPage({transporter,vehicles:initVehs,onBack,onDataChange}) {
  const [vehs,setVehs]   = tmSt(initVehs);
  const [search,setSrch] = tmSt('');const [fType,setFType]=tmSt('');const [fSt,setFSt]=tmSt('');
  const [pg,setPg]       = tmSt(1);const [modal,setModal]=tmSt(false);const [editVeh,setEditVeh]=tmSt(null);const [delId,setDelId]=tmSt(null);
  const PER = 50;

  function loadVehs() {
    const fresh = Store.all('vehicleMaster','group').filter(v=>v.transporterId===transporter.id);
    setVehs(fresh); onDataChange();
  }

  const stats = tmMemo(()=>({
    total:   vehs.length,
    active:  vehs.filter(v=>v.status==='Active').length,
    inactive:vehs.filter(v=>v.status==='Inactive').length,
    maint:   vehs.filter(v=>v.status==='Under Maintenance').length,
    sold:    vehs.filter(v=>v.status==='Sold').length,
    blocked: vehs.filter(v=>v.status==='Blocked').length,
  }), [vehs]);

  const filtered = tmMemo(()=>vehs.filter(v=>{
    if(search){const q=search.toLowerCase();if(!['vehicleNumber','vehicleType','owner'].some(k=>String(v[k]||'').toLowerCase().includes(q)))return false;}
    if(fType&&v.vehicleType!==fType)return false;
    if(fSt&&v.status!==fSt)return false;
    return true;
  }),[vehs,search,fType,fSt]);
  const totalPgs=Math.ceil(filtered.length/PER);const paged=filtered.slice((pg-1)*PER,pg*PER);

  function handleDelete(){Store.del('vehicleMaster',delId);Store.addLog('DELETE','Vehicle Master','Deleted vehicle');setDelId(null);loadVehs();window.toast&&window.toast('Vehicle deleted','ok');}

  // Compliance check
  const today = new Date().toISOString().slice(0,10);
  const in30  = new Date(Date.now()+30*864e5).toISOString().slice(0,10);
  const expired = vehs.filter(v=>(v.fitnessExpiry&&v.fitnessExpiry<today)||(v.insuranceExpiry&&v.insuranceExpiry<today)||(v.permitExpiry&&v.permitExpiry<today));
  const expSoon = vehs.filter(v=>{const ds=[v.fitnessExpiry,v.insuranceExpiry,v.permitExpiry];return ds.some(d=>d&&d>=today&&d<=in30)&&!expired.find(e=>e.id===v.id);});

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:14,flexWrap:'wrap'}}>
        <button className="btn btn-wh btn-sm" onClick={onBack}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
          Back to Profile
        </button>
        <div style={{flex:1}}>
          <h1 style={{fontSize:16,fontWeight:700,margin:0}}>{transporter.name} <span style={{fontSize:12,fontWeight:400,color:'var(--txt2)'}}>— Fleet Management</span></h1>
          <p style={{fontSize:11.5,color:'var(--txt2)',marginTop:1}}>{stats.total} vehicles registered · {stats.active} active</p>
        </div>
        <button className="btn btn-or" onClick={()=>{setEditVeh(null);setModal(true);}}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Vehicle</button>
      </div>

      {/* Stats strip */}
      <div style={{display:'flex',gap:8,marginBottom:12,flexWrap:'wrap'}}>
        {[
          {l:'Total',v:stats.total,c:'var(--txt)'},{l:'Active',v:stats.active,c:'var(--ok)'},
          {l:'Inactive',v:stats.inactive,c:'var(--txt2)'},{l:'Maintenance',v:stats.maint,c:'var(--warn)'},
          ...(stats.sold>0?[{l:'Sold',v:stats.sold,c:'var(--txt3)'}]:[]),
          ...(stats.blocked>0?[{l:'Blocked',v:stats.blocked,c:'var(--err)'}]:[]),
        ].map(s=>(
          <div key={s.l} className="kpi" style={{flex:1,minWidth:80}}>
            <div className="kpi-val" style={{color:s.c,fontSize:18}}>{s.v}</div>
            <div className="kpi-lbl">{s.l}</div>
          </div>
        ))}
      </div>

      {/* Filter row */}
      <div className="frow">
        <div className="fs"><svg className="fs-ic" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg><input value={search} onChange={e=>{setSrch(e.target.value);setPg(1);}} placeholder="Search vehicle number, type, owner…"/></div>
        <window.FiltSelect placeholder="All Types" value={fType} onChange={v=>{setFType(v);setPg(1);}} options={TM_VEH_TYPES.filter(t=>t!=='Other').map(t=>({value:t,label:t}))}/>
        <window.FiltSelect placeholder="All Status" value={fSt} onChange={v=>{setFSt(v);setPg(1);}} options={TM_VEH_STATUSES.map(s=>({value:s,label:s}))}/>
        {(search||fType||fSt)&&<button className="btn btn-gh btn-sm" onClick={()=>{setSrch('');setFType('');setFSt('');setPg(1);}}>Clear</button>}
        <span className="f-cnt">{filtered.length} vehicles</span>
      </div>

      {/* Table */}
      <div className="card">
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:46,textAlign:'center'}}>SR NO</th>
              <th>VEHICLE NUMBER</th><th>VEHICLE TYPE</th><th>CAPACITY</th><th>UOM</th>
              <th>OWNER</th><th>STATUS</th><th>LAST ACTIVITY</th><th>ACTIONS</th>
            </tr></thead>
            <tbody>
              {paged.length===0
                ? <tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No vehicles found. Click "+ Add Vehicle" to register.</td></tr>
                : paged.map((v,idx)=>(
                  <tr key={v.id}>
                    <td style={{textAlign:'center',color:'var(--txt2)',fontWeight:500}}>{(pg-1)*PER+idx+1}</td>
                    <td><span style={{fontFamily:'var(--font)',fontSize:12,fontWeight:700,background:'#F9FAFB',padding:'2px 7px',borderRadius:3}}>{v.vehicleNumber}</span></td>
                    <td><span className="bdg bg-or" style={{fontSize:10.5}}>{v.vehicleType}</span></td>
                    <td style={{fontWeight:600}}>{v.capacity}</td>
                    <td style={{color:'var(--txt2)'}}>{v.capacityUOM}</td>
                    <td style={{fontSize:11.5}}>{v.owner||transporter.name}</td>
                    <td><TmBadge s={v.status}/></td>
                    <td style={{fontSize:11.5,color:'var(--txt2)'}}>{v.lastActivity||'—'}</td>
                    <td><div className="ra"><button className="btn btn-wh btn-sm" onClick={()=>{setEditVeh(v);setModal(true);}}>Edit</button><button className="btn btn-rd btn-sm" onClick={()=>setDelId(v.id)}>Delete</button></div></td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
      {totalPgs>1&&<div className="pag"><button className="pg-b" onClick={()=>setPg(1)} disabled={pg===1}>«</button><button className="pg-b" onClick={()=>setPg(p=>p-1)} disabled={pg===1}>‹</button><span className="pg-inf">Page {pg} of {totalPgs}</span><button className="pg-b" onClick={()=>setPg(p=>p+1)} disabled={pg===totalPgs}>›</button><button className="pg-b" onClick={()=>setPg(totalPgs)} disabled={pg===totalPgs}>»</button></div>}

      {/* Compliance panel */}
      {(expired.length>0||expSoon.length>0)&&(
        <div style={{marginTop:10,background:'#FFF9F5',border:'1px solid var(--or-bdr)',borderRadius:'var(--r)',padding:'10px 14px'}}>
          <div style={{fontWeight:700,fontSize:12,color:'var(--or)',marginBottom:8}}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display:'inline',verticalAlign:'-1px',flexShrink:0,marginRight:6}}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>Compliance Alerts</div>
          {expired.map(v=>(
            <div key={v.id} style={{display:'flex',gap:8,alignItems:'center',padding:'4px 0',borderBottom:'1px solid #FEF3E8'}}>
              <span className="bdg bg-rd" style={{fontSize:10}}>EXPIRED</span>
              <span style={{fontFamily:'var(--font)',fontWeight:700,fontSize:12}}>{v.vehicleNumber}</span>
              <span style={{fontSize:11.5,color:'var(--txt2)'}}>
                {v.fitnessExpiry&&v.fitnessExpiry<today?`Fitness: ${v.fitnessExpiry}  `:''}
                {v.insuranceExpiry&&v.insuranceExpiry<today?`Insurance: ${v.insuranceExpiry}  `:''}
                {v.permitExpiry&&v.permitExpiry<today?`Permit: ${v.permitExpiry}`:''}
              </span>
            </div>
          ))}
          {expSoon.map(v=>(
            <div key={v.id} style={{display:'flex',gap:8,alignItems:'center',padding:'4px 0',borderBottom:'1px solid #FEF3E8'}}>
              <span className="bdg bg-yw" style={{fontSize:10}}>DUE SOON</span>
              <span style={{fontFamily:'var(--font)',fontWeight:700,fontSize:12}}>{v.vehicleNumber}</span>
              <span style={{fontSize:11.5,color:'var(--txt2)'}}>Expiring within 30 days</span>
            </div>
          ))}
        </div>
      )}

      {modal&&<VehicleFormModal item={editVeh} transporter={transporter} onSaved={()=>{setModal(false);loadVehs();window.toast&&window.toast(editVeh?'Vehicle updated':'Vehicle added','ok');}} onClose={()=>setModal(false)}/>}
      {delId&&<window.Confirm onOk={handleDelete} onCancel={()=>setDelId(null)}/>}
    </div>
  );
}

// ============================================================
// VEHICLE FORM MODAL
// ============================================================
function VehicleFormModal({item,transporter,onSaved,onClose}) {
  const blank = {vehicleNumber:'',vehicleType:'10 Wheeler',vehicleTypeCustom:'',capacity:'',capacityUOM:'Ton',capacityUOMCustom:'',registrationState:'Goa',owner:transporter.name,fitnessExpiry:'',insuranceExpiry:'',permitExpiry:'',status:'Active',lastActivity:new Date().toISOString().slice(0,10),settlementPolicyId:''};
  const activePolicies = (Store.all('settlementPolicies','group')||[]).filter(function(p){ return p.status==='Active'; });
  const [form,setForm] = tmSt(item?{...item}:{...blank});
  const sf = (k,v) => setForm(p=>({...p,[k]:v}));

  function handleSave(e) {
    e.preventDefault();
    const data = {
      ...form,
      transporterId: transporter.id,
      vehicleType:   form.vehicleType==='Other'   ? (form.vehicleTypeCustom||'Other')    : form.vehicleType,
      capacityUOM:   form.capacityUOM==='Other'   ? (form.capacityUOMCustom||'Other')    : form.capacityUOM,
      settlementPolicyId: form.settlementPolicyId||'',
    };
    if (item) { Store.update('vehicleMaster',item.id,data);Store.addLog('UPDATE','Vehicle Master',`Updated: ${form.vehicleNumber}`); }
    else       { Store.add('vehicleMaster',data);          Store.addLog('CREATE','Vehicle Master',`Added: ${form.vehicleNumber} → ${transporter.name}`); }
    onSaved();
  }

  return (
    <div className="mbg">
      <div className="mod mod-lg" style={{maxHeight:'92vh'}}>
        <div className="mod-hd"><h2>{item?'Edit':'Add'} Vehicle — {transporter.name}</h2><button className="mod-x" onClick={onClose}>×</button></div>
        <form onSubmit={handleSave}>
          <div className="mod-bd">
            <div style={{marginBottom:16}}>
              <TmSH title="Vehicle Details"/>
              <div className="fg">
                <div className="fld">
                  <label>Vehicle Number <span className="req">*</span></label>
                  <input className="inp" value={form.vehicleNumber} onChange={e=>sf('vehicleNumber',e.target.value.toUpperCase())} required placeholder="GA03AV9955" style={{fontFamily:'var(--font)',fontWeight:700}}/>
                </div>
                <div className="fld">
                  <label>Vehicle Type <span className="req">*</span></label>
                  <window.FormSelect value={form.vehicleType} onChange={v=>sf('vehicleType',v)} options={TM_VEH_TYPES.map(t=>({value:t,label:t}))}/>
                  {form.vehicleType==='Other'&&<input className="inp" style={{marginTop:6}} value={form.vehicleTypeCustom||''} onChange={e=>sf('vehicleTypeCustom',e.target.value)} placeholder="Enter custom vehicle type" required/>}
                </div>
                <div className="fld">
                  <label>Capacity <span className="req">*</span></label>
                  <input className="inp" type="number" value={form.capacity} onChange={e=>sf('capacity',e.target.value)} required placeholder="20" min="0" step="0.1"/>
                </div>
                <div className="fld">
                  <label>Capacity UOM <span className="req">*</span></label>
                  <window.FormSelect value={form.capacityUOM} onChange={v=>sf('capacityUOM',v)} options={TM_CAP_UOMS.map(u=>({value:u,label:u}))}/>
                  {form.capacityUOM==='Other'&&<input className="inp" style={{marginTop:6}} value={form.capacityUOMCustom||''} onChange={e=>sf('capacityUOMCustom',e.target.value)} placeholder="Enter custom unit" required/>}
                </div>
                <div className="fld">
                  <label>Registration State</label>
                  <input className="inp" value={form.registrationState} onChange={e=>sf('registrationState',e.target.value)} placeholder="e.g. Goa"/>
                </div>
                <div className="fld">
                  <label>Owner</label>
                  <input className="inp" value={form.owner} onChange={e=>sf('owner',e.target.value)} placeholder="Vehicle owner name"/>
                </div>
                <div className="fld">
                  <label>Status</label>
                  <window.FormSelect value={form.status} onChange={v=>sf('status',v)} options={TM_VEH_STATUSES.map(s=>({value:s,label:s}))}/>
                </div>
                <div className="fld">
                  <label>Last Activity</label>
                  <input className="inp" type="date" value={form.lastActivity} onChange={e=>sf('lastActivity',e.target.value)}/>
                </div>
              </div>
            </div>
            <div style={{marginBottom:16}}>
              <TmSH title="Settlement Configuration"/>
              <div className="fg">
                <div className="fld">
                  <label>Settlement Policy</label>
                  <window.FormSelect value={form.settlementPolicyId||''} onChange={v=>sf('settlementPolicyId',v)} placeholder="Standard Direct Payment (Default)" options={activePolicies.map(function(p){
                      var isInternal = p.settlementMode==='Internal Company Settlement';
                      return {value:p.id,label:p.policyName+(isInternal?' — Internal Settlement':'')};
                    })}/>
                  <span style={{fontSize:10.5,color:'var(--txt3)',marginTop:3,display:'block'}}>Controls freight calculation and payment routing. Set here; the settlement engine applies it automatically.</span>
                  {(function(){
                    if (!form.settlementPolicyId) return null;
                    var pol = activePolicies.find(function(p){ return p.id===form.settlementPolicyId; });
                    if (!pol || pol.settlementMode!=='Internal Company Settlement') return null;
                    var rcName = pol.receivingCompanyId ? (Store.name('companies',pol.receivingCompanyId)||pol.receivingCompanyId) : '—';
                    return <div style={{marginTop:6,background:'#F5F3FF',border:'1px solid #DDD6FE',borderRadius:6,padding:'6px 10px',fontSize:11}}>
                      <span style={{fontWeight:700,color:'#6D28D9'}}>Internal Settlement: </span>
                      <span style={{color:'#5B21B6'}}>Net payment → {rcName}</span>
                      <span style={{color:'#7C3AED',marginLeft:8}}>· Margin: {pol.marginType==='Per Ton'?`₹${pol.marginValue}/MT`:pol.marginType==='Percentage'?`${pol.marginValue}%`:`₹${pol.marginValue} fixed`}</span>
                    </div>;
                  })()}
                </div>
              </div>
            </div>
            <div>
              <TmSH title="Compliance &amp; Expiry Dates"/>
              <div className="fg3">
                <div className="fld"><label>Fitness Certificate Expiry</label><input className="inp" type="date" value={form.fitnessExpiry}  onChange={e=>sf('fitnessExpiry',e.target.value)}/></div>
                <div className="fld"><label>Insurance Expiry</label>          <input className="inp" type="date" value={form.insuranceExpiry} onChange={e=>sf('insuranceExpiry',e.target.value)}/></div>
                <div className="fld"><label>Permit Expiry</label>             <input className="inp" type="date" value={form.permitExpiry}    onChange={e=>sf('permitExpiry',e.target.value)}/></div>
              </div>
            </div>
          </div>
          <div className="mod-ft">
            <button type="button" className="btn btn-wh" onClick={onClose}>Cancel</button>
            <button type="submit" className="btn btn-or">{item?'Update Vehicle':'Add Vehicle'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.TransporterMasterPage = TransporterMasterPage;