// Vendor Diesel Allocation — diesel issued directly to MATERIAL VENDORS (never transporters).
// Fully separate architecture from Transporter diesel (dieselRecords). Store key: vendorDieselAllocations.
const { useState: vdSt, useEffect: vdEf, useContext: vdCtx, useMemo: vdMemo } = React;

// ── Query helper — used by Vendor Settlement to fetch diesel for a vendor+period ────────────
function vsGetVendorDiesel(vendorId, periodFrom, periodTo, coId, currentSettlementId) {
  if (!vendorId || !periodFrom || !periodTo) return { records: [], total: 0, litres: 0 };
  // Vendor identity + company/date normalisation shared with the settlement engine, so diesel
  // is discovered under exactly the same matching rules as the Purchase Orders it offsets.
  const vsIds = window.vsResolveVendorIds ? window.vsResolveVendorIds(vendorId).ids : [vendorId];
  const vsCo = window.vsResolveCompanyId ? window.vsResolveCompanyId(coId) : coId;
  const iso = window.vsIsoDate || function (v) { return v; };
  const pFrom = iso(periodFrom), pTo = iso(periodTo);
  const records = (Store.all('vendorDieselAllocations', 'group') || []).filter(function (d) {
    if (vsIds.indexOf(d.vendorId) === -1) return false;
    if (vsCo && vsCo !== 'group' && (window.vsResolveCompanyId ? window.vsResolveCompanyId(d.companyId) : d.companyId) !== vsCo) return false;
    if (iso(d.date) < pFrom || iso(d.date) > pTo) return false;
    if (!d.settledInVendorSettlementId) return true;
    if (currentSettlementId && d.settledInVendorSettlementId === currentSettlementId) return true;
    const existing = (Store.all('vendorSettlements') || []).find(function (s) { return s.id === d.settledInVendorSettlementId; });
    return !existing || existing.status === 'Cancelled';
  });
  // Also include diesel from dieselRecords that is role-allocated to this vendor
  var roleAllocated = window.getDieselRecordsForVendor
    ? window.getDieselRecordsForVendor(vendorId, periodFrom, periodTo, coId, currentSettlementId)
    : { records: [], total: 0, litres: 0 };
  // Wrap role-allocated records to match vendorDieselAllocations shape
  var wrappedRoleRecords = roleAllocated.records.map(function(d) {
    return Object.assign({}, d, {
      _source: 'roleAllocation',
      _originalId: d.id,
      vendorId: vendorId,
      amount: window.getDieselVendorAmount(d),
      litres: d.dieselAllocRole === 'Split' ? (parseFloat(d.vendorAllocLitres)||0) : (parseFloat(d.litres)||0),
    });
  });
  var allRecords = records.concat(wrappedRoleRecords);
  const total = allRecords.reduce(function (s, d) { return s + (parseFloat(d.amount) || 0); }, 0);
  const litres = allRecords.reduce(function (s, d) { return s + (parseFloat(d.litres) || 0); }, 0);
  return { records: allRecords, total, litres };
}

function vsUpdateVendorDieselStatus(records, settlementId, settlementStatus) {
  if (!records || !records.length || !settlementId) return;
  const isFinalized = ['Settled', 'Partially Settled'].includes(settlementStatus);
  const today = new Date().toISOString().slice(0, 10);
  records.forEach(function (d) {
    // Role-allocated diesel (from dieselRecords — Split/Vendor allocation) is
    // wrapped by vsGetVendorDiesel with _source:'roleAllocation'. Its lock
    // must be persisted onto the ORIGINAL dieselRecords row (vendorSettledInId)
    // — not onto vendorDieselAllocations — so getDieselRecordsForVendor's
    // settlement-lock check actually prevents double-counting across
    // Vendor Settlement periods, keeping Diesel ↔ Vendor Settlement in sync.
    if (d._source === 'roleAllocation') {
      const origId = d._originalId || d.id;
      const orig = (Store.all('dieselRecords', 'group') || []).find(function (r) { return r.id === origId; });
      if (!orig) return;
      if (isFinalized) {
        Store.update('dieselRecords', origId, Object.assign({}, orig, { vendorSettledInId: settlementId, vendorSettledDate: today }));
      } else if (orig.vendorSettledInId === settlementId) {
        const released = Object.assign({}, orig);
        delete released.vendorSettledInId;
        delete released.vendorSettledDate;
        Store.update('dieselRecords', origId, released);
      }
      return;
    }
    const rec = (Store.all('vendorDieselAllocations', 'group') || []).find(function (r) { return r.id === d.id; });
    if (!rec) return;
    if (isFinalized) {
      Store.update('vendorDieselAllocations', d.id, Object.assign({}, rec, { settledInVendorSettlementId: settlementId, settledDate: today }));
    } else if (rec.settledInVendorSettlementId === settlementId) {
      const released = Object.assign({}, rec);
      delete released.settledInVendorSettlementId;
      delete released.settledDate;
      Store.update('vendorDieselAllocations', d.id, released);
    }
  });
}

function VendorDieselBadge({ settled }) {
  return settled
    ? <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 3, background: '#DCFCE7', color: '#166534' }}>Allocated</span>
    : <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 3, background: '#F3F4F6', color: '#374151' }}>Available</span>;
}

// ── Vendor Diesel Tab — CRUD list, embedded inside Vendor Settlement page ────────────────────
function VendorDieselTab({ companyId, isGroup, session }) {
  window.useStoreSync();
  const [items, setItems] = vdSt([]);
  const [search, setSearch] = vdSt('');
  const [fVendor, setFVendor] = vdSt('');
  const [periodPreset, setPeriodPreset] = vdSt('all');
  const [customFrom, setCustomFrom] = vdSt('');
  const [customTo, setCustomTo] = vdSt('');
  const periodRange = vdMemo(function () { return window.getDieselPeriodRange(periodPreset, customFrom, customTo); }, [periodPreset, customFrom, customTo]);
  function setPeriod(id) { setPeriodPreset(id); }
  function setCustomRange(f, t) { setCustomFrom(f); setCustomTo(t); }
  const [modal, setModal] = vdSt(false);
  const [editItem, setEdit] = vdSt(null);
  const [delId, setDelId] = vdSt(null);
  const [form, setForm] = vdSt({});

  const vendors = window.filterAssigned(Store.all('vendors'), companyId);
  const dieselSources = Store.all('dieselSources') || [];

  vdEf(function () { load(); return Store.on(load); }, [companyId]);
  function load() {
    const all = Store.all('vendorDieselAllocations', 'group') || [];
    setItems(isGroup ? all : all.filter(function (d) { return d.companyId === companyId; }));
  }

  const filtered = vdMemo(function () {
    return items.filter(function (d) {
      if (fVendor && d.vendorId !== fVendor) return false;
      if (!window.dieselInPeriod(d.date, periodRange.from, periodRange.to)) return false;
      if (search) {
        const q = search.toLowerCase();
        if (!(Store.name('vendors', d.vendorId) || '').toLowerCase().includes(q) && !(d.dieselSource || '').toLowerCase().includes(q)) return false;
      }
      return true;
    }).sort(function (a, b) { return (b.date || '') > (a.date || '') ? 1 : -1; });
  }, [items, search, fVendor, periodRange]);

  function openAdd() {
    setForm({ date: new Date().toISOString().slice(0, 10), companyId: isGroup ? '' : companyId, vendorId: '', dieselSource: '', litres: '', ratePerLitre: '', remarks: '' });
    setEdit(null); setModal(true);
  }
  function openEdit(d) { setForm({ ...d }); setEdit(d); setModal(true); }
  const setF = (k, v) => setForm(function (p) { return { ...p, [k]: v }; });

  function save(e) {
    e.preventDefault();
    if (isGroup && !form.companyId) { window.toast && window.toast('Select a company', 'er'); return; }
    if (!form.vendorId) { window.toast && window.toast('Select a vendor', 'er'); return; }
    if (!form.date) { window.toast && window.toast('Set a date', 'er'); return; }
    const litres = parseFloat(form.litres) || 0;
    const rate = parseFloat(form.ratePerLitre) || 0;
    const data = { ...form, litres, ratePerLitre: rate, amount: litres * rate, vendorName: Store.name('vendors', form.vendorId), createdBy: editItem ? editItem.createdBy : (session?.userName || ''), createdDate: editItem ? editItem.createdDate : new Date().toISOString().slice(0, 10) };
    if (editItem) { Store.update('vendorDieselAllocations', editItem.id, data); Store.addLog('UPDATE', 'Vendor Diesel', 'Updated allocation for ' + data.vendorName); }
    else { Store.add('vendorDieselAllocations', data); Store.addLog('CREATE', 'Vendor Diesel', 'Allocated ' + litres + 'L to ' + data.vendorName); }
    window.toast && window.toast(editItem ? 'Updated' : 'Diesel allocated', 'ok');
    setModal(false); load();
  }
  function del() { Store.del('vendorDieselAllocations', delId); Store.addLog('DELETE', 'Vendor Diesel', 'Deleted allocation'); setDelId(null); load(); window.toast && window.toast('Deleted', 'ok'); }

  const totalAmt = filtered.reduce(function (s, d) { return s + (parseFloat(d.amount) || 0); }, 0);
  const totalLit = filtered.reduce(function (s, d) { return s + (parseFloat(d.litres) || 0); }, 0);

  return (
    <div>
      <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={function (e) { setSearch(e.target.value); }} placeholder="Search vendor, source…" /></div>
        <window.FiltSelect placeholder="All Vendors" value={fVendor} onChange={function (v) { setFVendor(v); }} options={vendors.map(function (v) { return {value:v.id,label:v.name}; })}/>
        <window.DieselPeriodDropdown preset={periodPreset} onChange={setPeriod} customFrom={customFrom} customTo={customTo} onCustomChange={setCustomRange}/>
        <span className="f-cnt">{filtered.length} allocations</span>
        <button className="btn btn-or btn-sm" style={{ marginLeft: 'auto' }} 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> Allocate Diesel</button>
      </div>
      <div className="card">
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr><th>DATE</th>{isGroup && <th>COMPANY</th>}<th>VENDOR</th><th>SOURCE</th><th style={{ textAlign: 'right' }}>LITRES</th><th style={{ textAlign: 'right' }}>RATE</th><th style={{ textAlign: 'right' }}>AMOUNT</th><th>STATUS</th><th>REMARKS</th><th>ACTIONS</th></tr></thead>
            <tbody>
              {filtered.length === 0 ? <tr className="empty"><td colSpan={isGroup ? 10 : 9} style={{ textAlign: 'center', padding: 36, color: 'var(--txt2)' }}>No vendor diesel allocations yet.</td></tr> : filtered.map(function (d) {
                return (
                  <tr key={d.id}>
                    <td>{window.fmtDate(d.date)}</td>
                    {isGroup && <td><span className="bdg bg-or" style={{ fontSize: 10 }}>{Store.name('companies', d.companyId) || '—'}</span></td>}
                    <td style={{ fontWeight: 600 }}>{Store.name('vendors', d.vendorId)}</td>
                    <td>{d.dieselSource || '—'}</td>
                    <td style={{ textAlign: 'right' }}>{(parseFloat(d.litres) || 0).toFixed(2)} L</td>
                    <td style={{ textAlign: 'right' }}>{window.fmtCur(d.ratePerLitre || 0)}</td>
                    <td style={{ textAlign: 'right', fontWeight: 700, color: '#B45309' }}>{window.fmtCur(d.amount || 0)}</td>
                    <td><VendorDieselBadge settled={!!d.settledInVendorSettlementId} /></td>
                    <td style={{ color: 'var(--txt2)', fontSize: 11.5 }}>{d.remarks || '—'}</td>
                    <td><div className="ra"><button className="btn btn-wh btn-sm" onClick={function () { openEdit(d); }}>Edit</button><button className="btn btn-rd btn-sm" onClick={function () { setDelId(d.id); }}>Delete</button></div></td>
                  </tr>);

              })}
            </tbody>
            <tfoot><tr><td colSpan={isGroup ? 4 : 3} style={{ fontWeight: 700, fontSize: 11, color: 'var(--txt2)' }}>TOTALS — {filtered.length} records</td><td style={{ textAlign: 'right', fontWeight: 700 }}>{window.formatQuantity(totalLit)} L</td><td></td><td style={{ textAlign: 'right', fontWeight: 800, color: '#B45309' }}>{window.fmtCur(totalAmt)}</td><td colSpan={3}></td></tr></tfoot>
          </table>
        </div>
      </div>
      {modal &&
      <div className="mbg">
          <div className="mod mod-md">
            <div className="mod-hd"><h2>{editItem ? 'Edit' : 'Allocate'} Vendor Diesel</h2><button className="mod-x" onClick={function () { setModal(false); }}>×</button></div>
            <form onSubmit={save}>
              <div className="mod-bd">
                <div className="fg">
                  {isGroup && <div className="fld"><label>Company <span className="req">*</span></label><window.FormSelect placeholder="Select company" value={form.companyId || ''} onChange={function (v) { setF('companyId', v); }} options={Store.all('companies').map(function (c) { return {value:c.id,label:c.name}; })}/></div>}
                  <div className="fld"><label>Vendor <span className="req">*</span></label><window.FormSelect placeholder="Select vendor" value={form.vendorId || ''} onChange={function (v) { setF('vendorId', v); }} options={vendors.map(function (v) { return {value:v.id,label:v.name}; })}/></div>
                  <div className="fld"><label>Date <span className="req">*</span></label><input className="inp" type="date" value={form.date || ''} onChange={function (e) { setF('date', e.target.value); }} required /></div>
                  <div className="fld"><label>Diesel Source</label><window.FormSelect placeholder="Select source" value={form.dieselSource || ''} onChange={function (v) { setF('dieselSource', v); }} options={dieselSources.filter(function (s) { return s.status !== 'Inactive'; }).map(function (s) { return {value:s.name,label:s.name}; })}/></div>
                  <div className="fld"><label>Litres <span className="req">*</span></label><input className="inp" type="number" min="0" step="0.01" value={form.litres || ''} onChange={function (e) { setF('litres', e.target.value); }} required /></div>
                  <div className="fld"><label>Rate per Litre (₹) <span className="req">*</span></label><input className="inp" type="number" min="0" step="0.01" value={form.ratePerLitre || ''} onChange={function (e) { setF('ratePerLitre', e.target.value); }} required /></div>
                  <div className="fld full"><label>Remarks</label><input className="inp" value={form.remarks || ''} onChange={function (e) { setF('remarks', e.target.value); }} placeholder="Optional notes…" /></div>
                </div>
                {(parseFloat(form.litres) || 0) > 0 && (parseFloat(form.ratePerLitre) || 0) > 0 &&
                <div style={{ background: '#FFFBEB', border: '1px solid #FDE68A', borderRadius: 6, padding: '8px 12px', fontSize: 12, color: '#92400E', fontWeight: 600 }}>
                    Deduction Amount: {window.fmtCur((parseFloat(form.litres) || 0) * (parseFloat(form.ratePerLitre) || 0))}
                  </div>
                }
              </div>
              <div className="mod-ft"><button type="button" className="btn btn-wh" onClick={function () { setModal(false); }}>Cancel</button><button type="submit" className="btn btn-or">{editItem ? 'Update' : 'Allocate'}</button></div>
            </form>
          </div>
        </div>
      }
      {delId && <window.Confirm onOk={del} onCancel={function () { setDelId(null); }} />}
    </div>);

}

window.vsGetVendorDiesel = vsGetVendorDiesel;
window.vsUpdateVendorDieselStatus = vsUpdateVendorDieselStatus;
window.VendorDieselTab = VendorDieselTab;
window.VendorDieselBadge = VendorDieselBadge;