// Internal Transfers Module — Inter-company material movement
const { useState: itSt, useEffect: itEf, useContext: itCtx, useMemo: itMemo } = React;
const AppCtx = window.AppCtx;

const ITH = ({ 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 IT_STATUSES = ['Pending','In Transit','Completed','Cancelled'];
const IT_ALL_STATUSES = ['Pending','In Transit','Completed','Cancelled','AUTO GENERATED','Pending Review','Approved'];

function autoGenBadge(t) {
  var s = t.status;
  if (s === 'AUTO GENERATED') return (
    <span style={{display:'inline-flex',alignItems:'center',gap:3,background:'#ECFDF5',color:'#15803D',border:'1px solid #86EFAC',borderRadius:3,padding:'1px 7px',fontSize:10,fontWeight:700,letterSpacing:'.2px'}}>
      <span style={{width:5,height:5,borderRadius:'50%',background:'#22C55E',display:'inline-block',flexShrink:0}}></span>AUTO GENERATED
    </span>
  );
  if (s === 'Pending Review') return (
    <span style={{display:'inline-flex',alignItems:'center',gap:3,background:'#FFFBEB',color:'#92400E',border:'1px solid #FCD34D',borderRadius:3,padding:'1px 7px',fontSize:10,fontWeight:700}}>
      <span style={{width:5,height:5,background:'#F59E0B',display:'inline-block',flexShrink:0,borderRadius:2}}></span>Pending Review
    </span>
  );
  if (s === 'Approved') return (
    <span style={{background:'#EFF6FF',color:'#1E40AF',border:'1px solid #93C5FD',borderRadius:3,padding:'1px 7px',fontSize:10,fontWeight:700}}>Approved</span>
  );
  // Manually registered entry
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:3,background:'#F0F9FF',color:'#0369A1',border:'1px solid #BAE6FD',borderRadius:3,padding:'1px 7px',fontSize:10,fontWeight:700,letterSpacing:'.2px'}}>
      <span style={{width:5,height:5,borderRadius:'50%',background:'#0EA5E9',display:'inline-block',flexShrink:0}}></span>MANUALLY REGISTERED
    </span>
  );
}

function EngineStatusBanner({ onRunNow }) {
  const [stats,  setStats]  = itSt(null);
  const [counts, setCounts] = itSt({ auto:0, pending:0 });

  function refresh() {
    const all = Store.all('internalTransfers') || [];
    setCounts({
      auto:    all.filter(function(x){ return x._autoGenerated; }).length,
      pending: all.filter(function(x){ return x._autoGenerated && x.status === 'Pending Review'; }).length,
    });
  }

  itEf(function() {
    refresh();
    if (!window.AutoTransferEngine) return;
    const s0 = window.AutoTransferEngine.getStats();
    if (s0) setStats(Object.assign({}, s0));
    const off = window.AutoTransferEngine.onUpdate(function(s) {
      setStats(Object.assign({}, s));
      refresh();
    });
    return off;
  }, []);

  const ts = stats && stats.timestamp
    ? new Date(stats.timestamp).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'})
    : null;

  return (
    <div style={{background:'#F0FDF4',border:'1px solid #86EFAC',borderRadius:'var(--r)',padding:'8px 14px',marginBottom:10,display:'flex',alignItems:'center',gap:14,flexWrap:'wrap'}}>
      <div style={{display:'flex',alignItems:'center',gap:7,flexShrink:0}}>
        <span style={{width:8,height:8,borderRadius:'50%',background:'#22C55E',display:'inline-block',boxShadow:'0 0 0 3px #DCFCE7'}}></span>
        <span style={{fontWeight:700,fontSize:12,color:'#15803D'}}>Auto-Detection Engine</span>
        <span style={{fontSize:11,color:'#16a34a',background:'#DCFCE7',borderRadius:10,padding:'0 6px',fontWeight:600}}>Active</span>
      </div>
      <div style={{display:'flex',gap:14,flexWrap:'wrap',flex:1,fontSize:11.5,alignItems:'center'}}>
        <span style={{color:'var(--txt2)'}}>Auto transfers: <strong style={{color:'var(--txt)'}}>{counts.auto}</strong></span>
        {counts.pending > 0 && (
          <span style={{background:'#FFFBEB',color:'#92400E',border:'1px solid #FCD34D',borderRadius:3,padding:'1px 6px',fontSize:10.5,fontWeight:700}}>
            {counts.pending} Pending Review
          </span>
        )}
        {ts && <span style={{color:'var(--txt2)'}}>Last run: <strong>{ts}</strong></span>}
        {stats && stats.created  > 0 && <span style={{color:'#16a34a', fontWeight:600}}>+{stats.created} created</span>}
        {stats && stats.updated  > 0 && <span style={{color:'var(--info)',fontWeight:600}}>{stats.updated} updated</span>}
        {stats && stats.deleted  > 0 && <span style={{color:'var(--err)', fontWeight:600}}>{stats.deleted} removed</span>}
      </div>
      <button className="btn btn-wh btn-sm" style={{flexShrink:0,fontSize:11}} onClick={onRunNow}>Refresh</button>
    </div>
  );
}

// Lightweight hover tooltip (ⓘ icon + OM Group white hover card)
function ITip({ lines }) {
  const [pos, setPos] = itSt(null);
  const iconRef = React.useRef(null);
  var TW = 272, TH = 130;
  function calcPos() {
    if (!iconRef.current) return;
    var r = iconRef.current.getBoundingClientRect();
    var vw = window.innerWidth, vh = window.innerHeight;
    var gap = 10, margin = 10;
    // Default: below the icon, horizontally centred
    var top  = r.bottom + gap;
    var left = r.left + r.width / 2 - TW / 2;
    // Flip above if not enough space below
    if (top + TH > vh - margin) top = r.top - TH - gap;
    // Prevent horizontal overflow — shift left or right
    if (left + TW > vw - margin) left = vw - TW - margin;
    left = Math.max(margin, left);
    top  = Math.max(margin, top);
    setPos({ top, left });
  }
  React.useEffect(function() {
    if (!pos) return;
    function reCalc() { calcPos(); }
    window.addEventListener('scroll', reCalc, true);
    window.addEventListener('resize', reCalc);
    return function() {
      window.removeEventListener('scroll', reCalc, true);
      window.removeEventListener('resize', reCalc);
    };
  }, [!!pos]);
  return (
    <span style={{display:'inline-flex',alignItems:'center',marginLeft:3,cursor:'help'}}
      onMouseEnter={calcPos} onMouseLeave={function(){setPos(null);}}>
      <span ref={iconRef} style={{width:13,height:13,borderRadius:'50%',background:'#EFF6FF',border:'1px solid #93C5FD',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:8.5,color:'#2563EB',cursor:'default',fontWeight:700,flexShrink:0,lineHeight:1}}>i</span>
      {pos && ReactDOM.createPortal(
        <div className="om-tip" style={{top:pos.top,left:pos.left,width:TW,maxWidth:'calc(100vw - 20px)',padding:'12px 14px',fontSize:11.5,lineHeight:1.65,whiteSpace:'pre-wrap'}}>
          {lines}
        </div>,
        document.body
      )}
    </span>
  );
}

function InternalTransfersPage() {
  window.useStoreSync();
  const { companyId, session } = itCtx(AppCtx);
  const [items,     setItems]  = itSt([]);
  const [search,    setSearch] = itSt('');
  const [showFP,    setShowFP] = itSt(false);
  const [fv,        setFv]     = itSt({ dateFrom:'', dateTo:'', sourceCompanyId:'', destCompanyId:'', purchasedFromId:'', soldToId:'', materialId:'', status:'' });
  const [applied,   setApplied]= itSt({ dateFrom:'', dateTo:'', sourceCompanyId:'', destCompanyId:'', purchasedFromId:'', soldToId:'', materialId:'', status:'' });
  const [pg,        setPg]     = itSt(1);
  const [modal,     setModal]  = itSt(false);
  const [editId,    setEditId] = itSt(null);
  const [delId,     setDelId]  = itSt(null);
  const [itStatement, setItStatement] = itSt(null);
  const [form,      setForm]   = itSt({});
  const [gridItems, setGrid]   = itSt([newRow()]);
  const [expand,    setExpand] = itSt(null);
  const [useConv,   setUseConv]= itSt(false); // Smart unit conversion toggle
  const [showEngine, setShowEngine] = itSt(true);
  const PER = 50;

  const companies = Store.all('companies');
  const materials = Store.all('materials', companyId);
  const vendors   = Store.all('vendors',   companyId);
  const customers = Store.all('customers', companyId);

  // Transporter Master — live sync so additions/changes reflect instantly
  const [itTmAll, setItTmAll] = itSt(()=>Store.all('transporterMaster','group'));
  const [itVehMaster, setItVehMaster] = itSt(()=>Store.all('vehicleMaster','group')||[]);
  itEf(()=>{
    const unsub=Store.on(()=>{setItTmAll(Store.all('transporterMaster','group'));setItVehMaster(Store.all('vehicleMaster','group')||[]);});
    return unsub;
  },[]);
  const itTmActive = itTmAll.filter(t=>t.status==='Active'||!t.status);
  const itTmVehicles = itMemo(()=>form.transporterMasterId
    ? itVehMaster.filter(v=>v.transporterId===form.transporterMasterId&&(v.status==='Active'||!v.status))
    : [],[itVehMaster, form.transporterMasterId]);

  itEf(() => { load(); return Store.on(load); }, []); // HIGH-02: live-refresh on any store mutation

  function load() { setItems(Store.all('internalTransfers') || []); }

  function newRow() {
    return { id: window.uid(), materialId:'', uom:'MT', quantity:'', transferRate:'', amount:0 };
  }

  function applyFP()   { setApplied({...fv}); setPg(1); setShowFP(false); }
  function clearFP()   {
    const e = { dateFrom:'', dateTo:'', sourceCompanyId:'', destCompanyId:'', purchasedFromId:'', soldToId:'', materialId:'', status:'' };
    setFv(e); setApplied(e); setSearch(''); setPg(1);
  }
  function refreshFP() { load(); window.toast&&window.toast('Refreshed','ok'); }

  const filtered = itMemo(() => {
    return items.filter(t => {
      if (search) {
        const q   = search.toLowerCase();
        const src = Store.name('companies', t.sourceCompanyId);
        const dst = Store.name('companies', t.destCompanyId);
        const pf  = t.purchasedFromId ? Store.name('vendors',   t.purchasedFromId) : '';
        const cu  = t.soldToId        ? Store.name('customers', t.soldToId)        : '';
        if (![t.challanNumber, t.vehicleFull, src, dst, pf, cu].some(v => String(v||'').toLowerCase().includes(q))) return false;
      }
      if (applied.dateFrom        && t.date < applied.dateFrom)                          return false;
      if (applied.dateTo          && t.date > applied.dateTo)                            return false;
      if (applied.status          && t.status !== applied.status)                        return false;
      if (applied.sourceCompanyId && t.sourceCompanyId !== applied.sourceCompanyId)      return false;
      if (applied.destCompanyId   && t.destCompanyId   !== applied.destCompanyId)        return false;
      if (applied.purchasedFromId && t.purchasedFromId !== applied.purchasedFromId)                  return false;
      if (applied.soldToId        && t.soldToId        !== applied.soldToId)                          return false;
      if (applied.materialId      && !(t.items||[]).some(i => i.materialId === applied.materialId)) return false;
      return true;
    });
  }, [items, search, applied]);

  const activeFilters = Object.values(applied).filter(Boolean).length;

  const sumTotals = itMemo(() => ({
    qty: filtered.reduce((s,t) => s + (t.items||[]).reduce((a,i) => a+(parseFloat(i.quantity)||0), 0), 0),
    amt: filtered.reduce((s,t) => s + (parseFloat(t.totalValue)||0), 0),
  }), [filtered]);

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

  // ── Grid helpers ─────────────────────────────────────────
  function updateRow(idx, key, val) {
    setGrid(prev => prev.map((r,i) => {
      if (i !== idx) return r;
      const upd = { ...r, [key]: val };
      if (key === 'materialId') {
        const mat = materials.find(m => m.id === val);
        if (mat) { upd.uom = mat.unit || 'MT'; upd.srcUom = mat.unit || 'MT'; }
      }
      // Recompute destination quantity when conversion fields change
      if (['srcQty','srcUom','dstUom','materialId'].includes(key)) {
        const srcQ = parseFloat(key==='srcQty' ? val : upd.srcQty) || 0;
        const sUom = key==='srcUom' ? val : (upd.srcUom||'Ton');
        const dUom = key==='dstUom' ? val : (upd.dstUom||'Ton');
        const mat  = materials.find(m => m.id === (key==='materialId' ? val : upd.materialId));
        const dens = parseFloat(mat?.density) || 1.50;
        let dstQ = srcQ;
        const normSrc = (sUom||'').toLowerCase().replace(/\s/g,'');
        const normDst = (dUom||'').toLowerCase().replace(/\s/g,'');
        const isCUM  = u => u==='cum'||u==='cubicmeter'||u==='m3'||u==='m³';
        const isTon  = u => u==='ton'||u==='mt'||u==='tons';
        if (isCUM(normSrc) && isTon(normDst))  dstQ = srcQ * dens;
        else if (isTon(normSrc) && isCUM(normDst)) dstQ = dens > 0 ? srcQ / dens : srcQ;
        upd.dstQty   = Math.round(dstQ * 1000) / 1000;
        upd.densityApplied = dens;
        // Also keep quantity = srcQty for backward compat
        upd.quantity = srcQ;
        upd.uom      = sUom;
      }
      if (key === 'quantity' || key === 'transferRate') {
        const qty  = parseFloat(key==='quantity'    ? val : upd.quantity)    || 0;
        const rate = parseFloat(key==='transferRate' ? val : upd.transferRate)|| 0;
        upd.amount = qty * rate;
      }
      if (key === 'srcQty') {
        const qty  = parseFloat(val) || 0;
        const rate = parseFloat(upd.transferRate) || 0;
        upd.quantity = qty;
        upd.amount   = qty * rate;
      }
      return upd;
    }));
  }
  function addRow()     { setGrid(p => [...p, newRow()]); }
  function removeRow(i) { setGrid(p => p.filter((_,j) => j !== i)); }

  const totals = itMemo(() => {
    const sub = gridItems.reduce((s,r) => s + (parseFloat(r.amount)||0), 0);
    return { sub, total: sub };
  }, [gridItems]);

  // ── Open/close modal ─────────────────────────────────────
  function openAdd() {
    setForm({
      date: new Date().toISOString().slice(0,10),
      status: 'Completed',
      transporterMasterId: '',
      transporterName: '',
      vehicleFull: '',
      purchasedFromId: '',
      soldToId: '',
      companyId,
    });
    setGrid([newRow()]); setUseConv(false); setEditId(null); setModal(true);
  }

  function openEdit(t) {
    setForm({
      ...t,
      transporterMasterId: t.transporterMasterId || '',
      transporterName: t.transporterName || '',
      vehicleFull: t.vehicleFull || '',
    });
    setGrid(t.items?.length ? t.items.map(i=>({...i})) : [newRow()]);
    setUseConv(false); setEditId(t.id); setModal(true);
  }

  const setF = (k,v) => setForm(p => ({...p, [k]:v}));

  function validate() {
    if (!form.sourceCompanyId || !form.destCompanyId) return 'Source and Destination Company are required.';
    if (form.sourceCompanyId === form.destCompanyId)  return 'Source and Destination cannot be the same company.';
    if (!form.date) return 'Transfer Date is required.';
    return null;
  }

  function handleSave(e) {
    e.preventDefault();
    const err = validate();
    if (err) { window.toast&&window.toast(err,'er'); return; }
    const record = {
      ...form,
      vehicleFull: form.vehicleFull || '',
      items: gridItems,
      subtotal: totals.sub,
      totalValue: totals.total,
      createdBy: session?.userName || 'System',
    };
    if (editId) {
      Store.update('internalTransfers', editId, record);
      Store.addLog('UPDATE','Internal Transfer',`Updated ${form.challanNumber||editId}`);
      window.toast&&window.toast('Transfer updated','ok');
    } else {
      Store.add('internalTransfers', record);
      Store.addLog('CREATE','Internal Transfer',
        `${Store.name('companies',form.sourceCompanyId)} → ${Store.name('companies',form.destCompanyId)} | ${form.challanNumber||''}`);
      window.toast&&window.toast('Internal Transfer created','ok');
    }
    setModal(false); load();
  }

  function handleDelete() {
    Store.del('internalTransfers', delId);
    Store.addLog('DELETE','Internal Transfer','Deleted transfer '+delId);
    setDelId(null); load();
    window.toast&&window.toast('Deleted','ok');
  }

  function approveTransfer(id) {
    Store.update('internalTransfers', id, {
      status: 'Approved',
      _approvedBy: session?.userName || 'User',
      _approvedAt: new Date().toISOString(),
    });
    Store.addLog('UPDATE','Internal Transfer','Approved auto-generated transfer '+id);
    load();
    window.toast&&window.toast('Transfer approved','ok');
  }

  function rejectTransfer(id) {
    Store.del('internalTransfers', id);
    Store.addLog('DELETE','Internal Transfer','Rejected pending-review transfer '+id);
    load();
    window.toast&&window.toast('Pending transfer rejected','ok');
  }

  function exportCSV() {
    const hdr = 'Date,Source Company,Destination Company,Purchased From,Sold To,Material,Quantity,UOM,Vehicle No,Challan No,Transfer Value,Status';
    const rows = filtered.map(t => {
      const fi  = t.items?.[0];
      const qty = (t.items||[]).reduce((s,i) => s+(parseFloat(i.quantity)||0), 0);
      const pfName = t.purchasedFromId ? Store.name('vendors',t.purchasedFromId)   : '';
      const cuName = t.soldToId        ? Store.name('customers',t.soldToId)        : '';
      return `"${t.date}","${Store.name('companies',t.sourceCompanyId)}","${Store.name('companies',t.destCompanyId)}","${pfName}","${cuName}","${fi?Store.name('materials',fi.materialId):''}","${qty.toFixed(3)}","${fi?.uom||'MT'}","${t.vehicleFull||''}","${t.challanNumber||''}","${t.totalValue||0}","${t.status}"`;
    }).join('\n');
    const blob = new Blob([hdr+'\n'+rows],{type:'text/csv'});
    const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='internal_transfers.csv'; a.click();
    window.toast&&window.toast('CSV exported','ok');
  }

  const fpFields = [
    { key:'dateFrom',        label:'Start Date',     type:'date' },
    { key:'dateTo',          label:'End Date',       type:'date' },
    { key:'status',          label:'Status',         width:130, options:IT_ALL_STATUSES.map(s=>({value:s,label:s})) },
    { key:'sourceCompanyId', label:'Source Company', width:156, options:companies.map(c=>({value:c.id,label:c.name})) },
    { key:'destCompanyId',   label:'Dest Company',   width:156, options:companies.map(c=>({value:c.id,label:c.name})) },
    { key:'purchasedFromId', label:'Purchased From', width:148, options:vendors.map(v=>({value:v.id,label:v.name})) },
    { key:'soldToId',        label:'Sold To',        width:148, options:customers.map(c=>({value:c.id,label:c.name})) },
    { key:'materialId',      label:'Material',       width:130, options:materials.map(m=>({value:m.id,label:m.name})) },
  ];

  return (
    <div>
      {/* Page Header */}
      <div className="ph">
        <div>
          <h1>Internal Transfers</h1>
          <p>Inter-company material movement — not counted as external purchases or sales</p>
        </div>
        <div className="ph-act">
          <button className={`btn btn-sm ${showFP?'btn-or':'btn-wh'}`} onClick={()=>setShowFP(p=>!p)}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filters {activeFilters>0&&<span style={{background:'#fff',color:'var(--or)',borderRadius:10,padding:'0 4px',fontSize:10,fontWeight:700,marginLeft:2}}>{activeFilters}</span>}
          </button>
          <button className="btn btn-wh btn-sm" onClick={exportCSV}><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={openAdd}><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 Transfer</button>
        </div>
      </div>

      {/* Engine Banner */}
      {showEngine && (
        <EngineStatusBanner
          onRunNow={() => {
            if (window.AutoTransferEngine) window.AutoTransferEngine.run();
            setTimeout(load, 700);
          }}
        />
      )}

      {/* Filter Panel */}
      <window.FilterPanel show={showFP} fields={fpFields} values={fv}
        onChange={(k,v)=>setFv(p=>({...p,[k]:v}))}
        onApply={applyFP} onRefresh={refreshFP} onExport={exportCSV} onClear={clearFP} />

      {/* Search bar */}
      <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 challan, vehicle, company…" />
        </div>
        {(search||activeFilters>0)&&<button className="btn btn-gh btn-sm" onClick={clearFP}>Clear All</button>}
        <span className="f-cnt">{filtered.length} records</span>
      </div>

      {/* Main Table */}
      <div className="card">
        <div className="tbl-w">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:26,padding:'7px 4px'}}></th>
                <th>SR. NO.</th>
                <th>DATE</th>
                <th>SOURCE COMPANY</th>
                <th>DESTINATION COMPANY</th>
                <th>PURCHASED FROM</th>
                <th>SOLD TO</th>
                <th>MATERIAL</th>
                <th>QUANTITY</th>
                <th>UOM</th>
                <th>VEHICLE NO.</th>
                <th>CHALLAN NO.</th>
                <th>TRANSFER VALUE</th>
                <th>STATUS</th>
                <th>ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {paged.length === 0
                ? <tr className="empty"><td colSpan="15" style={{textAlign:'center',padding:40,color:'var(--txt2)'}}>No internal transfers found. Click &ldquo;Add Transfer&rdquo; to create one.</td></tr>
                : paged.map((t, idx) => {
                    const isOpen   = expand === t.id;
                    const fi       = t.items?.[0];
                    const matName  = fi ? Store.name('materials', fi.materialId) : '—';
                    const totalQty = (t.items||[]).reduce((s,i) => s+(parseFloat(i.quantity)||0), 0);
                    const uom      = fi?.uom || 'MT';
                    const srNo     = (pg-1)*PER + idx + 1;
                    return (
                      <React.Fragment key={t.id}>
                        <tr style={t.status==='Pending Review'?{background:'#FFFDF5'}:t._autoGenerated?{background:'#FBFFF8'}:{}}>
                          <td style={{textAlign:'center',padding:'5px 4px',cursor:'pointer',width:26}} onClick={()=>setExpand(isOpen?null:t.id)}>
                            <span style={{color:'var(--or)',fontSize:9,display:'inline-block',transition:'transform .15s',transform:isOpen?'rotate(90deg)':'none'}}>&#9658;</span>
                          </td>
                          <td style={{color:'var(--txt2)',fontWeight:500,textAlign:'center'}}>{srNo}</td>
                          <td>{window.fmtDate(t.date)}</td>
                          <td style={{fontWeight:500}}>{Store.name('companies',t.sourceCompanyId)}</td>
                          <td style={{fontWeight:500}}>{Store.name('companies',t.destCompanyId)}</td>
                          <td style={{fontSize:11.5,color:'var(--txt2)'}}>{t.purchasedFromId ? Store.name('vendors',t.purchasedFromId) : '—'}</td>
                          <td style={{fontSize:11.5,color:'var(--txt2)'}}>{t.soldToId ? Store.name('customers',t.soldToId) : '—'}</td>
                          <td>{matName}</td>
                          <td style={{fontWeight:600}}>
                            <span style={{display:'inline-flex',alignItems:'center',gap:2}}>
                              {totalQty.toFixed(3)}
                              {t._autoGenerated && t._conversionApplied && (
                                <ITip lines={'Purchase: ' + window.formatQuantity(t._purchaseQty) + ' ' + (t._purchaseUom||'?') + '\nDensity: ' + (t._density||1.5) + '\nConverted: ' + Number(t._pTons||totalQty).toFixed(3) + ' TON\nFormula: ' + (t._convFormula||'—')}/>
                              )}
                              {t._autoGenerated && !t._conversionApplied && t._purchaseQty && (
                                <ITip lines={'Purchase: ' + Number(t._purchaseQty).toFixed(3) + ' ' + (t._purchaseUom||'TON') + '\nExact match — no conversion needed'}/>
                              )}
                            </span>
                          </td>
                          <td style={{color:'var(--txt2)'}}>{t._autoGenerated ? 'Ton' : uom}</td>
                          <td><span style={{fontFamily:'var(--font)',fontSize:11,background:'#F9FAFB',padding:'1px 5px',borderRadius:3}}>{t.vehicleFull||'—'}</span></td>
                          <td style={{fontFamily:'var(--font)',fontSize:11.5}}>{t.challanNumber||'—'}</td>
                          <td style={{fontWeight:600,color:'var(--or)'}}>
                            <span style={{display:'inline-flex',alignItems:'center',gap:2}}>
                              {t.totalValue ? window.fmtCur(t.totalValue) : '—'}
                              {t._autoGenerated && t.totalValue > 0 && (
                                <ITip lines={
                                  (t._purchaseAmount > 0
                                    ? 'From Purchase: ' + window.formatQuantity(t._purchaseQty) + ' ' + (t._purchaseUom||'') + ' @ \u20b9' + Number(t._purchaseRate||0).toFixed(2) + ' = \u20b9' + Number(t._purchaseAmount||0).toFixed(2)
                                    : 'Purchase amount not available') +
                                  '\n' +
                                  (t._salesAmount > 0
                                    ? 'Sales: ' + window.formatQuantity(t._salesQty) + ' ' + (t._salesUom||'') + ' @ \u20b9' + Number(t._salesRate||0).toFixed(2) + ' = \u20b9' + Number(t._salesAmount||0).toFixed(2)
                                    : '') +
                                  '\nTransfer Value = ' + window.fmtCur(t.totalValue)
                                }/>
                              )}
                            </span>
                          </td>
                          <td>{autoGenBadge(t)}</td>
                          <td>
                            <div className="ra">
                              {t.status==='Pending Review' && (
                                <button className="btn btn-sm"
                                  style={{background:'#ECFDF5',color:'#15803D',border:'1px solid #86EFAC',fontWeight:600}}
                                  onClick={()=>approveTransfer(t.id)}>
                                  Approve
                                </button>
                              )}
                              <button className="btn btn-wh btn-sm" onClick={()=>openEdit(t)}>
                                {t._autoGenerated ? 'View' : 'Edit'}
                              </button>
                              <button className="btn btn-wh btn-sm" onClick={()=>setItStatement(t)}>Statement</button>
                              <button className="btn btn-rd btn-sm" onClick={()=>setDelId(t.id)}>Delete</button>
                            </div>
                          </td>
                        </tr>

                        {/* Expandable row */}
                        {isOpen && (
                          <tr key={t.id+'-exp'}>
                            <td colSpan="15" style={{padding:0,background:'#FFF9F5',borderTop:'2px solid var(--or-bdr)'}}>
                              <div style={{padding:'14px 16px 16px',display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>

                                {/* LEFT — item detail table */}
                                <div>
                                  <div style={{fontWeight:700,fontSize:12,color:'var(--or)',marginBottom:8}}>Transfer Details</div>
                                  <table style={{width:'100%',borderCollapse:'collapse',fontSize:12,border:'1px solid var(--bdr)'}}>
                                    <thead>
                                      <tr style={{background:'#F9FAFB'}}>
                                        {['MATERIAL','QUANTITY','UOM','TRANSFER RATE','LINE AMOUNT'].map(h=>(
                                          <th key={h} style={{padding:'6px 8px',textAlign:['QUANTITY','TRANSFER RATE','LINE AMOUNT'].includes(h)?'right':'left',fontWeight:600,fontSize:11,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)'}}>{h}</th>
                                        ))}
                                      </tr>
                                    </thead>
                                    <tbody>
                                      {(t.items||[]).length === 0
                                        ? <tr><td colSpan="5" style={{padding:'12px',textAlign:'center',color:'var(--txt2)',fontStyle:'italic',fontSize:11}}>No items recorded</td></tr>
                                        : (t.items||[]).map((it,i) => (
                                          <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                                            <td style={{padding:'5px 8px'}}>{Store.name('materials',it.materialId)||'—'}</td>
                                            <td style={{padding:'5px 8px',textAlign:'right',fontWeight:600}}>{Number(it.quantity||0).toFixed(3)}</td>
                                            <td style={{padding:'5px 8px',color:'var(--txt2)'}}>{it.uom||'MT'}</td>
                                            <td style={{padding:'5px 8px',textAlign:'right'}}>{it.transferRate ? window.fmtCur(it.transferRate) : '—'}</td>
                                            <td style={{padding:'5px 8px',textAlign:'right',fontWeight:600,color:'var(--or)'}}>{it.amount ? window.fmtCur(it.amount) : '—'}</td>
                                          </tr>
                                        ))}
                                    </tbody>
                                  </table>
                                </div>

                                {/* RIGHT — summary + ledger */}
                                <div style={{display:'flex',flexDirection:'column',gap:12}}>

                                  {/* Auto-gen info box */}
                                  {t._autoGenerated && (
                                    <div style={{
                                      background: t.status==='Pending Review' ? '#FFFBEB' : t.status==='Approved' ? '#EFF6FF' : '#F0FDF4',
                                      border:     t.status==='Pending Review' ? '1px solid #FCD34D' : t.status==='Approved' ? '1px solid #93C5FD' : '1px solid #86EFAC',
                                      borderRadius:'var(--r)', padding:'9px 12px', fontSize:11.5,
                                    }}>
                                      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:5,flexWrap:'wrap'}}>
                                        <span style={{
                                          fontWeight:700, fontSize:12,
                                          color: t.status==='Pending Review'?'#92400E':t.status==='Approved'?'#1E40AF':'#15803D',
                                        }}>
                                          {t.status==='AUTO GENERATED' && 'Auto-Generated by System'}
                                          {t.status==='Pending Review'  && 'Pending Review — Needs Approval'}
                                          {t.status==='Approved'        && 'Approved by User'}
                                        </span>
                                        {t.status==='Pending Review' && (
                                          <div style={{marginLeft:'auto',display:'flex',gap:6,flexShrink:0}}>
                                            <button className="btn btn-sm"
                                              style={{background:'#ECFDF5',color:'#15803D',border:'1px solid #86EFAC',minHeight:24,padding:'0 10px',fontSize:11,fontWeight:700}}
                                              onClick={()=>approveTransfer(t.id)}>Approve</button>
                                            <button className="btn btn-rd btn-sm"
                                              style={{minHeight:24,padding:'0 10px',fontSize:11}}
                                              onClick={()=>rejectTransfer(t.id)}>Reject</button>
                                          </div>
                                        )}
                                      </div>
                                      <div style={{display:'flex',gap:14,flexWrap:'wrap',fontSize:11,color:'var(--txt2)'}}>
                                        {t._matchPriority && (
                                          <span>Match: <strong style={{color:window.AutoTransferEngine?.priorityColor(t._matchPriority)||'#6B7280'}}>
                                            {window.AutoTransferEngine?.priorityLabel(t._matchPriority)||'—'}
                                          </strong></span>
                                        )}
                                        {t._matchPriority===1 && <span style={{color:'#16a34a'}}>Vehicle + Challan + Date + Material + Qty all match exactly</span>}
                                        {t._matchPriority===2 && <span style={{color:'#2563EB'}}>Quantities match after density/unit conversion</span>}
                                        {t._matchPriority===3 && <span style={{color:'#D97706'}}>Qty within 5% tolerance — please verify before approving</span>}
                                        {t._approvedBy && <span>Approved by: <strong>{t._approvedBy}</strong></span>}
                                      </div>
                                    </div>
                                  )}

                                  {/* Unit Conversion + Audit panel */}
                                  {t._autoGenerated && t._purchaseQty > 0 && (
                                    <div style={{fontSize:11.5}}>
                                      <div style={{fontWeight:700,fontSize:12,color:'var(--or)',marginBottom:8}}>Transaction Intelligence</div>
                                      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>

                                        {/* Purchase side */}
                                        <div style={{background:'#FFF9F5',border:'1px solid var(--or-bdr)',borderRadius:'var(--r)',padding:'9px 12px'}}>
                                          <div style={{fontWeight:700,fontSize:11,color:'var(--or)',marginBottom:6,textTransform:'uppercase',letterSpacing:'.5px'}}>Purchase Side</div>
                                          {[['Company', Store.name('companies', t.sourceCompanyId)],
                                            ['Vendor',  t.purchasedFromId ? Store.name('vendors', t.purchasedFromId) : '—'],
                                            ['Quantity', window.formatQuantity(t._purchaseQty) + ' ' + (t._purchaseUom||'—')],
                                            ['Rate',     t._purchaseRate > 0 ? window.fmtCur(t._purchaseRate) + ' / ' + (t._purchaseUom||'unit') : '—'],
                                            ['Amount',   t._purchaseAmount > 0 ? window.fmtCur(t._purchaseAmount) : '—'],
                                            ...(function(){
                                              var _lp=Store.byId('purchases',t._purchaseId)||{};
                                              var _mid=t.items&&t.items[0]&&t.items[0].materialId;
                                              var _pi=(_lp.items||[]).find(function(it){return it.materialId===_mid;})||{};
                                              var _g=parseFloat(_pi.gstPercent||_pi.gst||0);
                                              var _sub=parseFloat(_pi.subtotal)||t._purchaseAmount||0;
                                              var _ga=_sub*_g/100; // always fresh — GST is never rounded, never trust legacy-rounded stored gstAmount
                                              var _tot=_sub+_ga;
                                              return _g>0?[['GST %',_g+'%'],['GST Amount',window.fmtCur(_ga)],['Amt With GST',window.fmtCur(_tot)]]:[]; 
                                            })(),
                                            ['PO Challan', t.challanNumber||'—'],
                                          ].map(function(row){ return (
                                            <div key={row[0]} style={{display:'flex',justifyContent:'space-between',marginBottom:3,paddingBottom:3,borderBottom:'1px solid #FEF3E8'}}>
                                              <span style={{color:'var(--txt2)',flexShrink:0}}>{row[0]}</span>
                                              <span style={{fontWeight:500,textAlign:'right',color:'var(--txt)'}}>{row[1]}</span>
                                            </div>
                                          );})}
                                        </div>

                                        {/* Sales side */}
                                        <div style={{background:'#F0FDF4',border:'1px solid #86EFAC',borderRadius:'var(--r)',padding:'9px 12px'}}>
                                          <div style={{fontWeight:700,fontSize:11,color:'#15803D',marginBottom:6,textTransform:'uppercase',letterSpacing:'.5px'}}>Sales Side</div>
                                          {[['Company',  Store.name('companies', t.destCompanyId)],
                                            ['Customer', t.soldToId ? Store.name('customers', t.soldToId) : '—'],
                                            ['Quantity', window.formatQuantity(t._salesQty) + ' ' + (t._salesUom||'—')],
                                            ['Rate',     t._salesRate > 0 ? window.fmtCur(t._salesRate) + ' / ' + (t._salesUom||'unit') : '—'],
                                            ['Amount',   t._salesAmount > 0 ? window.fmtCur(t._salesAmount) : '—'],
                                            ...(function(){
                                              var _ls=Store.byId('salesOrders',t._salesId)||{};
                                              var _mid=t.items&&t.items[0]&&t.items[0].materialId;
                                              var _si=(_ls.items||[]).find(function(it){return it.materialId===_mid;})||{};
                                              var _g=parseFloat(_si.gst||_si.gstPercent||0);
                                              var _sub=parseFloat(_si.amount)||t._salesAmount||0;
                                              var _ga=_sub*_g/100; // always fresh — GST is never rounded
                                              var _tot=_sub+_ga;
                                              return _g>0?[['GST %',_g+'%'],['GST Amount',window.fmtCur(_ga)],['Amt With GST',window.fmtCur(_tot)]]:[]; 
                                            })(),
                                            ['SO Challan', t.challanNumber||'—'],
                                          ].map(function(row){ return (
                                            <div key={row[0]} style={{display:'flex',justifyContent:'space-between',marginBottom:3,paddingBottom:3,borderBottom:'1px solid #DCFCE7'}}>
                                              <span style={{color:'var(--txt2)',flexShrink:0}}>{row[0]}</span>
                                              <span style={{fontWeight:500,textAlign:'right',color:'var(--txt)'}}>{row[1]}</span>
                                            </div>
                                          );})}
                                        </div>
                                      </div>

                                      {/* Conversion + Transfer summary row */}
                                      <div style={{display:'grid',gridTemplateColumns: t._conversionApplied ? '1fr 1fr' : '1fr',gap:8,marginTop:8}}>

                                        {t._conversionApplied && (
                                          <div style={{background:'#EFF6FF',border:'1px solid #93C5FD',borderRadius:'var(--r)',padding:'9px 12px'}}>
                                            <div style={{fontWeight:700,fontSize:11,color:'#1E40AF',marginBottom:6,textTransform:'uppercase',letterSpacing:'.5px'}}>Unit Conversion</div>
                                            {[['Purchase Qty', window.formatQuantity(t._purchaseQty) + ' ' + (t._purchaseUom||'—')],
                                              ['Density',      (t._density||1.5) + ' Ton / m³'],
                                              ['Formula',      t._convFormula||'—'],
                                              ['Converted',    Number(t._pTons||0).toFixed(3) + ' TON'],
                                              ['Sales Qty',    window.formatQuantity(t._salesQty) + ' ' + (t._salesUom||'—')],
                                              ['Difference',   Number(t._diff||0).toFixed(3) + ' TON'],
                                            ].map(function(row){ return (
                                              <div key={row[0]} style={{display:'flex',justifyContent:'space-between',marginBottom:3,paddingBottom:3,borderBottom:'1px solid #BFDBFE'}}>
                                                <span style={{color:'var(--txt2)',flexShrink:0}}>{row[0]}</span>
                                                <span style={{fontWeight:500,textAlign:'right',fontFamily:'var(--font)',fontSize:row[0]==='Formula'?10.5:11.5}}>{row[1]}</span>
                                              </div>
                                            );})}
                                          </div>
                                        )}

                                        <div style={{background:'#F9FAFB',border:'1px solid var(--bdr)',borderRadius:'var(--r)',padding:'9px 12px'}}>
                                          <div style={{fontWeight:700,fontSize:11,color:'var(--txt2)',marginBottom:6,textTransform:'uppercase',letterSpacing:'.5px'}}>Transfer Summary</div>
                                          {[['Transfer Value',   t.totalValue > 0 ? window.fmtCur(t.totalValue) : '—'],
                                            ['Conversion',       t._conversionApplied ? 'YES (' + (t._purchaseUom||'') + ' to TON)' : 'NO'],
                                            ['Match Confidence', window.AutoTransferEngine ? window.AutoTransferEngine.priorityLabel(t._matchPriority) : '—'],
                                            ['Difference',       Number(t._diff||0).toFixed(3) + ' TON'],
                                            ['Created',          t._creationTimestamp ? new Date(t._creationTimestamp).toLocaleString() : '—'],
                                          ].map(function(row){ return (
                                            <div key={row[0]} style={{display:'flex',justifyContent:'space-between',marginBottom:3,paddingBottom:3,borderBottom:'1px solid #F3F4F6'}}>
                                              <span style={{color:'var(--txt2)',flexShrink:0}}>{row[0]}</span>
                                              <span style={{fontWeight:500,textAlign:'right'}}>{row[1]}</span>
                                            </div>
                                          );})}
                                        </div>
                                      </div>
                                    </div>
                                  )}

                                  {/* Summary card */}
                                  <div>
                                    <div style={{fontWeight:700,fontSize:12,color:'var(--or)',marginBottom:8}}>Transfer Summary</div>
                                    <div style={{background:'#fff',border:'1px solid var(--bdr)',borderRadius:4,padding:'9px 12px',fontSize:12}}>
                                      {[
                                        ['Source Company',      Store.name('companies',t.sourceCompanyId)],
                                        ['Destination Company', Store.name('companies',t.destCompanyId)],
                                        ['Purchased From',      t.purchasedFromId ? Store.name('vendors',t.purchasedFromId)   : '—'],
                                        ['Sold To',             t.soldToId        ? Store.name('customers',t.soldToId)        : '—'],
                                        ['Vehicle Number',      t.vehicleFull||'—'],
                                        ['Challan Number',      t.challanNumber||'—'],
                                        ['Transfer Date',       window.fmtDate(t.date)],
                                        ['Created By',          t.createdBy||'—'],
                                        ['Notes',               t.transferNotes||'—'],
                                      ].map(([lbl,val]) => (
                                        <div key={lbl} style={{display:'flex',gap:8,marginBottom:4,paddingBottom:4,borderBottom:'1px solid #F3F4F6',alignItems:'flex-start'}}>
                                          <span style={{color:'var(--txt2)',minWidth:140,flexShrink:0,lineHeight:1.4}}>{lbl}</span>
                                          <span style={{fontWeight:500,lineHeight:1.4,color:'var(--txt)'}}>{val}</span>
                                        </div>
                                      ))}
                                    </div>
                                  </div>

                                  {/* Ledger entries */}
                                  <div>
                                    <div style={{fontWeight:700,fontSize:12,color:'var(--or)',marginBottom:8}}>Generated Ledger Entries</div>
                                    <div style={{background:'#fff',border:'1px solid var(--bdr)',borderRadius:4,padding:'9px 12px',display:'flex',flexDirection:'column',gap:5,fontSize:12}}>
                                      {(t.items||[]).length === 0
                                        ? <div style={{color:'var(--txt3)',fontStyle:'italic',fontSize:11}}>No ledger entries</div>
                                        : (t.items||[]).map((it,i) => {
                                          const mn  = Store.name('materials',it.materialId)||'—';
                                          const qty = Number(it.quantity||0).toFixed(3);
                                          const uo  = it.uom||'MT';
                                          return (
                                            <React.Fragment key={i}>
                                              <div style={{display:'flex',alignItems:'center',gap:6,padding:'5px 8px',background:'#FEF3E8',borderRadius:3,border:'1px solid var(--or-bdr)'}}>
                                                <span style={{fontWeight:700,color:'var(--err)',fontSize:10,minWidth:26,flexShrink:0}}>OUT</span>
                                                <span style={{fontWeight:600,flex:1}}>{Store.name('companies',t.sourceCompanyId)}</span>
                                                <span style={{color:'var(--txt2)',fontSize:11}}>Internal Transfer Out</span>
                                                <span style={{marginLeft:'auto',fontFamily:'var(--font)',fontWeight:700,fontSize:11,whiteSpace:'nowrap',flexShrink:0,marginLeft:8}}>{qty} {uo} {mn}</span>
                                              </div>
                                              <div style={{display:'flex',alignItems:'center',gap:6,padding:'5px 8px',background:'#F0FDF4',borderRadius:3,border:'1px solid #BBF7D0'}}>
                                                <span style={{fontWeight:700,color:'#16a34a',fontSize:10,minWidth:26,flexShrink:0}}>IN</span>
                                                <span style={{fontWeight:600,flex:1}}>{Store.name('companies',t.destCompanyId)}</span>
                                                <span style={{color:'var(--txt2)',fontSize:11}}>Internal Transfer In</span>
                                                <span style={{marginLeft:'auto',fontFamily:'var(--font)',fontWeight:700,fontSize:11,whiteSpace:'nowrap',flexShrink:0,marginLeft:8}}>{qty} {uo} {mn}</span>
                                              </div>
                                            </React.Fragment>
                                          );
                                        })}
                                    </div>
                                  </div>
                                </div>

                              </div>
                            </td>
                          </tr>
                        )}
                      </React.Fragment>
                    );
                  })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Totals bar */}
      {filtered.length > 0 && (
        <div style={{background:'#FFF9F5',border:'1px solid var(--or-bdr)',borderRadius:'var(--r)',padding:'8px 14px',marginTop:6,display:'flex',gap:24,alignItems:'center',flexWrap:'wrap'}}>
          <span style={{fontWeight:700,fontSize:12,color:'var(--txt2)'}}>Totals ({filtered.length} Records)</span>
          <span style={{fontSize:12}}><span style={{color:'var(--txt2)'}}>Total Qty: </span><strong>{sumTotals.qty.toFixed(3)} Ton</strong></span>
          <span style={{fontSize:12}}><span style={{color:'var(--txt2)'}}>Total Transfer Value: </span><strong style={{color:'var(--or)'}}>{window.fmtCur(sumTotals.amt)}</strong></span>
        </div>
      )}

      {/* Pagination */}
      {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>
      )}

      {/* ── Add / Edit Modal ───────────────────────────────── */}
      {modal && (
        <div className="mbg">
          <div className="mod mod-xl" style={{maxHeight:'92vh'}}>
            <div className="mod-hd">
              <h2>{editId ? 'Edit' : 'Add'} Internal Transfer</h2>
              <button className="mod-x" onClick={()=>setModal(false)}>×</button>
            </div>
            <form onSubmit={handleSave}>
              <div className="mod-bd">

                <ITH title="Transfer Information"/>

                {/* Row 1: Date · Source Company · Destination Company */}
                <div className="fg3" style={{marginBottom:10}}>
                  <div className="fld">
                    <label>Transfer Date <span className="req">*</span></label>
                    <input className="inp" type="date" value={form.date||''} onChange={e=>setF('date',e.target.value)} required />
                  </div>
                  <div className="fld">
                    <label>Source Company <span className="req">*</span></label>
                    <window.FormSelect placeholder="Select Source Company" value={form.sourceCompanyId||''} onChange={v=>setF('sourceCompanyId',v)} options={companies.map(c=>({value:c.id,label:c.name}))}/>
                  </div>
                  <div className="fld">
                    <label>Destination Company <span className="req">*</span></label>
                    <window.FormSelect placeholder="Select Destination Company" value={form.destCompanyId||''} onChange={v=>setF('destCompanyId',v)}
                      style={form.sourceCompanyId&&form.destCompanyId&&form.sourceCompanyId===form.destCompanyId?{borderColor:'var(--err)'}:{}}
                      options={companies.map(c=>({value:c.id,label:c.name}))}/>
                    {form.sourceCompanyId&&form.destCompanyId&&form.sourceCompanyId===form.destCompanyId&&(
                      <span style={{fontSize:10.5,color:'var(--err)',marginTop:2,display:'block',lineHeight:1.4,display:'flex',alignItems:'center',gap:4}}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}><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>Source and Destination cannot be the same company.</span>
                    )}
                  </div>
                </div>

                {/* Row 2: Purchased From · Sold To */}
                <div className="fg" style={{marginBottom:10}}>
                  <div className="fld">
                    <label>Purchased From <span className="req">*</span></label>
                    <window.FormSelect placeholder="Select Vendor" value={form.purchasedFromId||''} onChange={v=>setF('purchasedFromId',v)} options={vendors.map(v=>({value:v.id,label:v.name}))}/>
                  </div>
                  <div className="fld">
                    <label>Sold To <span className="req">*</span></label>
                    <window.FormSelect placeholder="Select Customer" value={form.soldToId||''} onChange={v=>setF('soldToId',v)} options={customers.map(c=>({value:c.id,label:c.name}))}/>
                  </div>
                </div>

                {/* Row 3: Transporter · Vehicle */}
                <div className="fg" style={{marginBottom:10}}>
                  <div className="fld">
                    <label>Transporter Name</label>
                    <window.FormSelect placeholder="Select Transporter"
                      value={form.transporterMasterId||''}
                      onChange={v=>{const tm=itTmActive.find(t=>t.id===v);setForm(p=>({...p,transporterMasterId:v,transporterName:tm?.name||'',vehicleFull:''}));}}
                      options={itTmActive.map(t=>({value:t.id,label:t.name}))}/>
                    {itTmActive.length===0&&<div style={{fontSize:10.5,color:'var(--warn)',marginTop:3}}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display:'inline',verticalAlign:'-1px',flexShrink:0,marginRight:4}}><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>No active transporters found. Add them in Transporter Master first.</div>}
                  </div>
                  <div className="fld">
                    <label>Vehicle Number{itTmVehicles.length>0&&<span style={{fontSize:10,color:'var(--txt2)',fontWeight:400,marginLeft:4}}>({itTmVehicles.length} vehicles)</span>}</label>
                    <window.FormSelect placeholder={!form.transporterMasterId?'Select a transporter first…':'Select Vehicle'} value={form.vehicleFull||''} onChange={v=>setF('vehicleFull',v)}
                      style={{fontFamily:'var(--font)',fontWeight:600}} disabled={!form.transporterMasterId}
                      options={[
                        ...(form.vehicleFull&&!itTmVehicles.find(v=>v.vehicleNumber===form.vehicleFull)?[{value:form.vehicleFull,label:form.vehicleFull+' (existing)'}]:[]),
                        ...itTmVehicles.map(v=>({value:v.vehicleNumber,label:v.vehicleNumber+(v.vehicleType?' ('+v.vehicleType+')':'')}))
                      ]}/>
                    {!form.transporterMasterId&&<div style={{fontSize:10.5,color:'var(--txt3)',marginTop:3}}>Select a transporter to load vehicles.</div>}
                  </div>
                </div>
                {/* Row 4: Status · Challan Number */}
                <div className="fg" style={{marginBottom:10}}>
                  <div className="fld">
                    <label>Transfer Status <span className="req">*</span></label>
                    <window.FormSelect value={form.status||'Completed'} onChange={v=>setF('status',v)} options={IT_STATUSES.map(s=>({value:s,label:s}))}/>
                  </div>
                  <div className="fld">
                    <label>Challan Number</label>
                    <input className="inp" value={form.challanNumber||''} onChange={e=>setF('challanNumber',e.target.value)} placeholder="IT-2026-001"/>
                  </div>
                </div>

                {/* Row 3: Notes */}
                <div style={{marginBottom:16}}>
                  <div className="fld">
                    <label>Transfer Notes</label>
                    <textarea className="tarea" value={form.transferNotes||''} onChange={e=>setF('transferNotes',e.target.value)}
                      placeholder="Optional notes about this transfer…" rows={2} style={{resize:'vertical'}}></textarea>
                  </div>
                </div>

                {/* Item Details */}
                <ITH title="Item Details" action={
                  <div style={{display:'flex',alignItems:'center',gap:10}}>
                    <label style={{display:'flex',alignItems:'center',gap:6,fontSize:12,fontWeight:600,cursor:'pointer',color:useConv?'var(--or)':'var(--txt2)',userSelect:'none'}}>
                      <input type="checkbox" checked={useConv} onChange={e=>setUseConv(e.target.checked)} style={{accentColor:'var(--or)',width:14,height:14}}/>
                      Apply Unit Conversion
                    </label>
                    <button type="button" className="btn btn-or btn-sm" onClick={addRow}><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 Item</button>
                  </div>
                }/>
                <div className="ig">
                  <table style={{tableLayout:'fixed',width:'100%'}}>
                    <thead>
                      <tr>
                        <th>Material</th>
                        {useConv ? <>
                          <th>Source Qty</th><th>Source UOM</th>
                          <th>Dest Qty</th><th>Dest UOM</th>
                          <th>Density</th>
                        </> : <>
                          <th>Quantity</th><th>UOM</th><th>Conversion</th>
                        </>}
                        <th>Transfer Rate ₹</th>
                        <th>Amount ₹</th>
                        <th style={{width:28}}></th>
                      </tr>
                    </thead>
                    <tbody>
                      {gridItems.map((row,idx) => {
                        const mat = materials.find(m=>m.id===row.materialId);
                        const dens = parseFloat(mat?.density)||1.50;
                        const normS = (row.srcUom||row.uom||'').toLowerCase().replace(/\s/g,'');
                        const normD = (row.dstUom||'Ton').toLowerCase().replace(/\s/g,'');
                        const isCUM = u=>u==='cum'||u==='cubicmeter'||u==='m3';
                        const isTon = u=>u==='ton'||u==='mt'||u==='tons';
                        const convText = row.srcQty>0 && normS!==normD
                          ? (isCUM(normS)&&isTon(normD))
                            ? `${Number(row.srcQty).toFixed(3)} ${row.srcUom||row.uom} × ${dens} = ${Number(row.dstQty||0).toFixed(3)} ${row.dstUom}`
                            : (isTon(normS)&&isCUM(normD))
                              ? `${Number(row.srcQty).toFixed(3)} ${row.srcUom||row.uom} ÷ ${dens} = ${Number(row.dstQty||0).toFixed(3)} ${row.dstUom}`
                              : null
                          : null;
                        return (
                          <React.Fragment key={row.id}>
                            <tr>
                              <td>
                                <select value={row.materialId} onChange={e=>updateRow(idx,'materialId',e.target.value)} style={{width:'100%'}}>
                                  <option value="">Select Material</option>
                                  {materials.map(m=><option key={m.id} value={m.id}>{m.name}</option>)}
                                </select>
                              </td>
                              {useConv ? <>
                                <td>
                                  <input type="number" value={row.srcQty||''} onChange={e=>updateRow(idx,'srcQty',e.target.value)}
                                    style={{width:'100%'}} min="0" step="0.001" placeholder="0.000"/>
                                  <div style={{height:16,overflow:'hidden',fontSize:11,color:'var(--ok)',fontWeight:600,fontFamily:'var(--font)',lineHeight:'16px'}}>
                                    {convText||null}
                                  </div>
                                </td>
                                <td>
                                  <select value={row.srcUom||row.uom||'Ton'} onChange={e=>updateRow(idx,'srcUom',e.target.value)} style={{width:'100%'}}>
                                    <option value="Ton">Ton</option><option value="MT">MT</option>
                                    <option value="CUM">CUM</option><option value="Kg">Kg</option>
                                  </select>
                                </td>
                                <td>
                                  <input type="number" value={row.dstQty!=null?row.dstQty:''} readOnly
                                    style={{width:'100%',background:'#F0FDF4',fontWeight:600,color:'var(--ok)'}} placeholder="Auto"/>
                                </td>
                                <td>
                                  <select value={row.dstUom||'Ton'} onChange={e=>updateRow(idx,'dstUom',e.target.value)} style={{width:'100%'}}>
                                    <option value="Ton">Ton</option><option value="MT">MT</option>
                                    <option value="CUM">CUM</option><option value="Kg">Kg</option>
                                  </select>
                                </td>
                                <td style={{textAlign:'center',fontSize:11,color:'var(--txt2)',minWidth:40}}>{dens}</td>
                              </> : <>
                                <td>
                                  <input type="number" value={row.quantity} onChange={e=>updateRow(idx,'quantity',e.target.value)}
                                    style={{width:'100%'}} min="0" step="0.001" placeholder="0.000"/>
                                </td>
                                <td>
                                  <select value={row.uom||'Ton'} onChange={e=>updateRow(idx,'uom',e.target.value)} style={{width:'100%'}}>
                                    <option value="MT">MT</option><option value="Ton">Ton</option>
                                    <option value="Kg">Kg</option><option value="CUM">CUM</option>
                                  </select>
                                </td>
                                {/* Conversion — dedicated column, twoLine badge */}
                                <td style={{verticalAlign:'middle',padding:'4px 6px'}}>
                                  {!!window.ConversionBadge
                                    ? <window.ConversionBadge materialId={row.materialId} qty={row.quantity} rate={row.transferRate} unit={row.uom} twoLine/>
                                    : null}
                                </td>
                              </>}
                              <td>
                                <input type="number" value={row.transferRate} onChange={e=>updateRow(idx,'transferRate',e.target.value)}
                                  style={{width:'100%'}} min="0" step="0.01" placeholder="0.00"/>
                              </td>
                              <td><span className="ro">{window.fmtCur(row.amount||0)}</span></td>
                              <td>
                                {gridItems.length > 1 && (
                                  <button type="button" onClick={()=>removeRow(idx)}
                                    style={{background:'none',border:'none',color:'var(--err)',cursor:'pointer',fontSize:18,padding:'0 4px',lineHeight:1}}>×</button>
                                )}
                              </td>
                            </tr>

                          </React.Fragment>
                        );
                      })}
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colSpan={useConv?7:5} style={{textAlign:'right',fontWeight:600,color:'var(--txt2)',background:'#F9FAFB',padding:'6px 8px',borderTop:'1px solid var(--bdr)'}}>Subtotal:</td>
                        <td colSpan="2" style={{fontWeight:700,background:'#F9FAFB',padding:'6px 8px',borderTop:'1px solid var(--bdr)'}}>{window.fmtCur(totals.sub)}</td>
                      </tr>
                      <tr>
                        <td colSpan={useConv?7:5} style={{textAlign:'right',fontWeight:700,color:'var(--or)',background:'#F9FAFB',padding:'6px 8px'}}>Total Transfer Value:</td>
                        <td colSpan="2" style={{fontWeight:700,fontSize:13,color:'var(--or)',background:'#F9FAFB',padding:'6px 8px'}}>{window.fmtCur(totals.total)}</td>
                      </tr>
                    </tfoot>
                  </table>
                </div>

              </div>
              <div className="mod-ft">
                <button type="button" className="btn btn-wh" onClick={()=>setModal(false)}>Cancel</button>
                <button type="submit" className="btn btn-or">{editId ? 'Update Transfer' : 'Create Transfer'}</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {delId && <window.Confirm onOk={handleDelete} onCancel={()=>setDelId(null)}/>}
      {itStatement && <window.InternalTransferStatement transfer={itStatement} onClose={()=>setItStatement(null)} session={session} />}
    </div>
  );
}

window.InternalTransfersPage = InternalTransfersPage;