// Vendors tab (Phase C; docs/FORECASTING.md). Per-vendor lead time (manual seed → learned average
// from PO receive dates) + shipping options/costs. Feeds the reorder engine's lead time + safety
// stock. Manager/admin only.
const { useState: useStateVT, useEffect: useEffectVT } = React;

function VendorsTab({ user }) {
  const [vendors, setVendors] = useStateVT([]);
  const [adding, setAdding] = useStateVT(false);
  const [newName, setNewName] = useStateVT("");
  const [newLead, setNewLead] = useStateVT(21);

  function refresh() { fetch("/api/vendors").then((r) => r.json()).then((d) => setVendors(Array.isArray(d) ? d : [])).catch(() => {}); }
  useEffectVT(() => { refresh(); }, []);

  const patch = (i, p) => setVendors((vs) => vs.map((v, idx) => (idx === i ? { ...v, ...p } : v)));
  const setShip = (i, j, p) => patch(i, { shipping: vendors[i].shipping.map((s, k) => (k === j ? { ...s, ...p } : s)) });
  const addShip = (i) => patch(i, { shipping: [...(vendors[i].shipping || []), { name: "", cost_manual: 0 }] });
  const rmShip = (i, j) => patch(i, { shipping: vendors[i].shipping.filter((_, k) => k !== j) });

  async function save(v) {
    try {
      await fetch(`/api/vendors/${v.id}`, {
        method: "PUT", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: v.name, lead_time_days_manual: Number(v.lead_time_days_manual) || 0, shipping: v.shipping || [], notes: v.notes || "" }),
      });
      window.gpsToast && window.gpsToast({ message: `Saved ${v.name}`, tone: "ok" });
      refresh();
    } catch (_) { window.gpsToast && window.gpsToast({ message: "Save failed", tone: "warn" }); }
  }
  async function addVendor() {
    if (!newName.trim()) return;
    try {
      await fetch("/api/vendors", { method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newName.trim(), lead_time_days_manual: Number(newLead) || 21, shipping: [] }) });
      setNewName(""); setNewLead(21); setAdding(false); refresh();
    } catch (_) {}
  }

  const I = "h-10 bg-zinc-950 border border-zinc-700 rounded-lg px-3 text-[14px] outline-none focus:border-zinc-500";

  return (
    <div className="flex-1 px-4 sm:px-8 py-5 sm:py-6 overflow-y-auto">
      <div className="max-w-[1000px] mx-auto space-y-6">
        <div className="flex items-end justify-between gap-3 flex-wrap">
          <div>
            <div className="text-[12px] uppercase tracking-[0.22em] text-zinc-500">Vendors</div>
            <h1 className="font-display text-[32px] sm:text-[44px] tracking-tight leading-none mt-1">Lead times & shipping</h1>
            <p className="text-[13px] text-zinc-500 mt-1">Seed lead times manually; they auto-correct to real averages as POs are received. Feeds reorder timing + safety stock.</p>
          </div>
          <button onClick={() => setAdding((a) => !a)} className="h-11 px-4 rounded-lg bg-zinc-800 border border-zinc-700 text-[13px] font-display tracking-wider hover:bg-zinc-700">+ ADD VENDOR</button>
        </div>

        {adding && (
          <div className="bg-zinc-900 border border-zinc-700 rounded-2xl p-4 flex flex-wrap items-end gap-3">
            <input className={`${I} flex-1 min-w-[200px]`} placeholder="Vendor name" value={newName} onChange={(e) => setNewName(e.target.value)} autoFocus />
            <div><div className="text-[11px] uppercase tracking-wider text-zinc-500 mb-1">Lead (days)</div><input type="number" className={`${I} w-28`} value={newLead} onChange={(e) => setNewLead(e.target.value)} /></div>
            <button onClick={addVendor} className="h-10 px-5 rounded-lg bg-emerald-600 text-zinc-950 font-semibold text-[14px] hover:bg-emerald-500">Add</button>
          </div>
        )}

        {vendors.length === 0 && !adding && <div className="text-[13px] text-zinc-600">No vendors yet. They appear automatically when a PO is received, or add one above.</div>}

        <div className="space-y-4">
          {vendors.map((v, i) => (
            <div key={v.id} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-5 space-y-4">
              <div className="flex items-center justify-between gap-3 flex-wrap">
                <input className={`${I} font-display text-[18px] flex-1 min-w-[200px]`} value={v.name} onChange={(e) => patch(i, { name: e.target.value })} />
                <button onClick={() => save(v)} className="h-10 px-5 rounded-lg bg-zinc-100 text-zinc-950 font-semibold text-[13px] hover:bg-white">Save</button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                  <div className="text-[11px] uppercase tracking-wider text-zinc-500 mb-1">Lead time — manual (days)</div>
                  <input type="number" className={`${I} w-full`} value={v.lead_time_days_manual} onChange={(e) => patch(i, { lead_time_days_manual: e.target.value })} />
                </div>
                <div>
                  <div className="text-[11px] uppercase tracking-wider text-zinc-500 mb-1">Learned average</div>
                  <div className="h-10 flex items-center text-[14px]">
                    {v.lt_samples > 0 ? <span className="text-emerald-300">{Math.round(v.lead_time_days_avg)}d <span className="text-zinc-500 text-[12px]">over {v.lt_samples} receipt{v.lt_samples !== 1 ? "s" : ""}</span></span> : <span className="text-zinc-600">no receipts yet</span>}
                  </div>
                </div>
                <div>
                  <div className="text-[11px] uppercase tracking-wider text-zinc-500 mb-1">Effective (used for reorder)</div>
                  <div className="h-10 flex items-center font-display text-[20px] text-zinc-100">{v.lead_time_days_effective}d</div>
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <div className="text-[11px] uppercase tracking-wider text-zinc-500">Shipping options</div>
                  <button onClick={() => addShip(i)} className="text-[12px] text-zinc-400 hover:text-zinc-200">+ add option</button>
                </div>
                <div className="space-y-2">
                  {(v.shipping || []).map((s, j) => (
                    <div key={j} className="grid grid-cols-[1fr_120px_auto] gap-2">
                      <input className={I} placeholder="Option (e.g. Ground)" value={s.name || ""} onChange={(e) => setShip(i, j, { name: e.target.value })} />
                      <input type="number" className={I} placeholder="Cost $" value={s.cost_manual != null ? s.cost_manual : ""} onChange={(e) => setShip(i, j, { cost_manual: Number(e.target.value) || 0 })} />
                      <button onClick={() => rmShip(i, j)} className="h-10 w-10 rounded text-zinc-500 hover:bg-red-500/20 hover:text-red-300">✕</button>
                    </div>
                  ))}
                  {(!v.shipping || v.shipping.length === 0) && <div className="text-[12px] text-zinc-600">No shipping options.</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.VendorsTab = VendorsTab;