// Manufacturing module — Production orders + Bills of materials
function mfgStock(sku) {
  return D.items.filter((i) => i.sku === sku).reduce((s, i) => s + (i.stock || 0), 0);
}
function mfgCost(sku) {
  const it = D.items.find((i) => i.sku === sku);
  return it ? it.cost || 0 : 0;
}
function bomFor(product) { return D.boms.find((b) => b.product === product); }
function bomUnitCost(b) { return b.components.reduce((s, c) => s + c.qty * mfgCost(c.sku), 0); }

function Manufacturing() {
  const { useState } = React;
  const [tab, setTab] = useState("orders");
  const [orders, setOrders] = useState(D.prodOrders);
  const [boms, setBoms] = useState(D.boms);
  const [filter, setFilter] = useState("All");
  const [sel, setSel] = useState(null);
  const [selBom, setSelBom] = useState(null);
  const [showNewOrder, setShowNewOrder] = useState(false);
  const [showNewBom, setShowNewBom] = useState(false);

  const inProg = orders.filter((o) => o.status === "In progress").length;
  const planned = orders.filter((o) => o.status === "Planned").length;
  const doneUnits = orders.filter((o) => o.status === "Completed").reduce((s, o) => s + o.qty, 0);
  const queueValue = orders.filter((o) => o.status !== "Completed")
    .reduce((s, o) => { const b = bomFor(o.product); return s + (b ? bomUnitCost(b) * o.qty : 0); }, 0);

  const visible = orders.filter((o) => filter === "All" || o.status === filter);
  const selOrder = sel ? orders.find((o) => o.id === sel) : null;
  const selBomObj = selBom ? boms.find((b) => b.id === selBom) : null;

  const requirements = (order) => {
    const b = bomFor(order.product);
    if (!b) return [];
    return b.components.map((c) => {
      const need = +(c.qty * order.qty).toFixed(1);
      const have = mfgStock(c.sku);
      return { ...c, need, have, ok: have >= need };
    });
  };
  const shortage = (order) => requirements(order).some((r) => !r.ok);

  const start = (order) => {
    setOrders((os) => os.map((o) => (o.id === order.id ? { ...o, status: "In progress", started: "Jun 13" } : o)));
    notify(shortage(order) ? T("mfg.orderStartedShortage", { id: order.id }) : T("mfg.orderStarted", { id: order.id }));
    setSel(null);
  };

  const complete = (order) => {
    if (shortage(order)) { notify(T("mfg.errCannotComplete")); return; }
    const b = bomFor(order.product);
    // consume components
    b.components.forEach((c) => {
      let need = c.qty * order.qty;
      D.items = D.items.map((i) => {
        if (i.sku !== c.sku || need <= 0) return i;
        const take = Math.min(i.stock || 0, need);
        need -= take;
        return { ...i, stock: (i.stock || 0) - take };
      });
    });
    // add finished goods
    const existing = D.items.find((i) => i.sku === b.sku && i.wh === order.wh);
    if (existing) {
      D.items = D.items.map((i) => (i === existing ? { ...i, stock: i.stock + order.qty } : i));
    } else {
      const proto = D.items.find((i) => i.sku === b.sku) || { sku: b.sku, name: order.product, cat: "Furniture", reorder: 5, cost: bomUnitCost(b), price: 0 };
      D.items = [{ ...proto, wh: order.wh, stock: order.qty }, ...D.items];
    }
    D.movements.unshift({ date: "Jun 13", type: "Inbound", qty: +order.qty, ref: order.id + " · production output" });
    setOrders((os) => os.map((o) => (o.id === order.id ? { ...o, status: "Completed", completed: "Jun 13" } : o)));
    notify(T("mfg.produced", { qty: order.qty, product: order.product, wh: TV(order.wh) }));
    setSel(null);
  };

  return (
    <div className="page" data-screen-label="Manufacturing">
      <KpiBar>
        <Stat label={TV("In progress")} value={String(inProg)} sub={T("mfg.ordersOnFloor")} />
        <Stat label={TV("Planned")} value={String(planned)} sub={T("mfg.waitingToStart")} />
        <Stat label={T("mfg.producedMonth", { month: TV("June") })} value={T("inv.unitsN", { n: fmt(doneUnits) })} sub={T("mfg.fromCompletedOrders")} />
        <Stat label={T("mfg.materialValueInQueue")} value={money(Math.round(queueValue))} sub={T("mfg.openOrdersAtBomCost")} />
      </KpiBar>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "orders", label: T("mfg.productionOrders"), count: orders.length },
        { id: "boms", label: T("mfg.billsOfMaterials"), count: boms.length }
      ]} />

      {tab === "orders" ? (
        <><div className="toolbar page-toolbar">
            <Chips active={filter} onChange={setFilter} options={["All", "Planned", "In progress", "Completed"].map((s) => ({
              id: s, label: s === "All" ? T("common.all") : TV(s), count: s === "All" ? orders.length : orders.filter((o) => o.status === s).length
            }))} />
            <Btn variant="primary" icon="plus" onClick={() => setShowNewOrder(true)}>{T("mfg.newOrder")}</Btn>
          </div>
        <section className="card">
          <DataTable rowKey={(r) => r.id} onRow={(r) => setSel(r.id)} rows={visible} empty={T("mfg.noOrdersMatch")} cols={[
            { k: "id", label: T("common.ref"), w: "100px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "product", label: T("mfg.product"), render: (r) => <span className="who2"><b>{r.product}</b><small>{(bomFor(r.product) || {}).id || T("mfg.noBom")}</small></span> },
            { k: "qty", label: T("common.qty"), align: "right", w: "70px", render: (r) => <span className="mono strong">{r.qty}</span> },
            { k: "wh", label: T("mfg.deliverTo"), w: "110px", render: (r) => <span className="dim">{TV(r.wh)}</span> },
            { k: "due", label: T("acct.due"), w: "90px", render: (r) => <span className="dim">{r.due}</span> },
            { k: "mat", label: T("mfg.materials"), w: "120px", render: (r) => r.status === "Completed" ? <Badge tone="green">{T("mfg.consumed")}</Badge> : shortage(r) ? <Badge tone="red">{T("mfg.shortage")}</Badge> : <Badge tone="green">{T("mfg.available")}</Badge> },
            { k: "status", label: T("common.status"), w: "120px", render: (r) => <Badge tone={r.status === "Completed" ? "green" : r.status === "In progress" ? "amber" : "blue"}>{r.status}</Badge> }
          ]} />
        </section></>
      ) : null}

      {tab === "boms" ? (
        <><div className="toolbar page-toolbar">
            <span className="dim" style={{ fontSize: 13 }}>{T("mfg.bomsHint")}</span>
            <Btn variant="primary" icon="plus" onClick={() => setShowNewBom(true)}>{T("mfg.newBom")}</Btn>
          </div>
        <section className="card">
          <DataTable rowKey={(r) => r.id} onRow={(r) => setSelBom(r.id)} rows={boms} cols={[
            { k: "id", label: T("common.ref"), w: "100px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "product", label: T("mfg.product"), render: (r) => <span className="who2"><b>{r.product}</b><small className="mono">{r.sku}</small></span> },
            { k: "n", label: T("mfg.components"), align: "right", w: "110px", render: (r) => <span className="mono">{r.components.length}</span> },
            { k: "cost", label: T("mfg.materialCostPerUnit"), align: "right", w: "150px", render: (r) => <span className="mono strong">{money(bomUnitCost(r))}</span> },
            { k: "price", label: T("inv.sellPrice"), align: "right", w: "110px", render: (r) => {
                const it = D.items.find((i) => i.sku === r.sku);
                return it && it.price ? <span className="mono">{money(it.price)}</span> : <span className="dim">—</span>;
              } }
          ]} />
        </section></>
      ) : null}

      <Drawer open={!!selOrder} onClose={() => setSel(null)}
        title={selOrder ? selOrder.id + " · " + selOrder.product : ""}
        sub={selOrder ? T("mfg.orderSub", { qty: selOrder.qty, wh: TV(selOrder.wh), due: selOrder.due }) : ""}
        footer={selOrder && selOrder.status !== "Completed" ? (
          <div className="btnrow">
            {selOrder.status === "Planned" ? <Btn variant="primary" icon="clock" onClick={() => start(selOrder)}>{T("mfg.startOrder")}</Btn> : null}
            {selOrder.status === "In progress" ? <Btn variant="primary" icon="check" onClick={() => complete(selOrder)} disabled={shortage(selOrder)}>{T("mfg.markCompleted")}</Btn> : null}
          </div>
        ) : null}>
        {selOrder ? (
          <div>
            <div className="amount-hero">
              <span className="display">{selOrder.qty} <small>{T("common.units")}</small></span>
              <Badge tone={selOrder.status === "Completed" ? "green" : selOrder.status === "In progress" ? "amber" : "blue"}>{selOrder.status}</Badge>
            </div>
            <KV k={T("mfg.deliverTo")} v={TV(selOrder.wh)} />
            <KV k={T("acct.due")} v={selOrder.due + ", 2026"} />
            {selOrder.started ? <KV k={T("mfg.started")} v={selOrder.started + ", 2026"} /> : null}
            {selOrder.completed ? <KV k={TV("Completed")} v={selOrder.completed + ", 2026"} /> : null}
            {bomFor(selOrder.product) ? <KV k={T("mfg.materialCost")} v={money(Math.round(bomUnitCost(bomFor(selOrder.product)) * selOrder.qty))} mono /> : null}
            <div className="lineitems">
              <div className="li-head">{T("mfg.materialsRequired")}</div>
              {requirements(selOrder).map((r) => (
                <div key={r.sku} className="li-row">
                  <span style={{ flex: 1 }}>{r.name}<span className="dim"> · {T("mfg.perUnitQty", { qty: r.qty })}</span></span>
                  <span className="mono" style={{ marginInlineEnd: 10 }}>{T("mfg.needed", { n: r.need })}</span>
                  {selOrder.status === "Completed"
                    ? <Badge tone="green">{T("mfg.used")}</Badge>
                    : <Badge tone={r.ok ? "green" : "red"}>{r.ok ? T("mfg.onHandN", { n: r.have }) : T("mfg.shortN", { n: +(r.need - r.have).toFixed(1) })}</Badge>}
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </Drawer>

      <Drawer open={!!selBomObj} onClose={() => setSelBom(null)}
        title={selBomObj ? selBomObj.product : ""} sub={selBomObj ? T("mfg.bomSub", { id: selBomObj.id, n: selBomObj.output }) : ""}>
        {selBomObj ? (
          <div>
            <div className="amount-hero">
              <span className="display">{money(bomUnitCost(selBomObj))} <small>{T("mfg.perUnit")}</small></span>
            </div>
            <div className="lineitems">
              <div className="li-head">{T("mfg.components")}</div>
              {selBomObj.components.map((c) => (
                <div key={c.sku} className="li-row">
                  <span style={{ flex: 1 }}>{c.name}<span className="dim mono" style={{ marginInlineStart: 8, fontSize: 11.5 }}>{c.sku}</span></span>
                  <span className="mono" style={{ marginInlineEnd: 10 }}>× {c.qty}</span>
                  <span className="mono strong">{money(+(c.qty * mfgCost(c.sku)).toFixed(1))}</span>
                </div>
              ))}
              <div className="li-row total"><span>{T("mfg.materialCostPerUnit")}</span><span className="mono strong">{money(bomUnitCost(selBomObj))}</span></div>
              {(() => {
                const it = D.items.find((i) => i.sku === selBomObj.sku);
                if (!it || !it.price) return null;
                const m = Math.round(((it.price - bomUnitCost(selBomObj)) / it.price) * 100);
                return <div className="li-row"><span>{T("inv.sellPrice")} {money(it.price)}</span><span className="mono strong" style={{ color: "var(--green)" }}>{T("mfg.marginPct", { pct: m })}</span></div>;
              })()}
            </div>
          </div>
        ) : null}
      </Drawer>

      <NewProdOrderModal open={showNewOrder} boms={boms} onClose={() => setShowNewOrder(false)} onCreate={(o) => {
        setOrders((os) => [o, ...os]);
        setShowNewOrder(false);
        notify(T("mfg.orderPlanned", { id: o.id, qty: o.qty, product: o.product }));
      }} />

      <NewBomModal open={showNewBom} boms={boms} onClose={() => setShowNewBom(false)} onCreate={(b) => {
        D.boms = [...D.boms, b];
        setBoms((bs) => [...bs, b]);
        setShowNewBom(false);
        notify(T("mfg.bomCreatedFor", { product: b.product }));
      }} />
    </div>
  );
}

/* ---------- New production order ---------- */
function NewProdOrderModal({ open, boms, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const [product, setProduct] = useState("");
  const [qty, setQty] = useState("");
  const [wh, setWh] = useState("");
  const [due, setDue] = useState("2026-06-27");
  const [errs, setErrs] = useState({});

  useEffect(() => { if (open) { setProduct(""); setQty(""); setWh(D.warehouses[0] || ""); setDue("2026-06-27"); setErrs({}); } }, [open]);

  const n = parseInt(qty, 10);
  const bom = boms.find((b) => b.product === product);
  const reqs = bom && !isNaN(n) && n > 0 ? bom.components.map((c) => {
    const need = +(c.qty * n).toFixed(1);
    const have = mfgStock(c.sku);
    return { ...c, need, have, ok: have >= need };
  }) : [];

  const save = () => {
    const e = {};
    if (!product) e.product = T("mfg.errChooseProduct");
    if (isNaN(n) || n <= 0) e.qty = T("mfg.errQtyAboveZero");
    if (!wh) e.wh = T("mfg.errDestWarehouse");
    setErrs(e);
    if (Object.keys(e).length) return;
    onCreate({ id: "MO-0059", product, qty: n, wh, due: prettyDate(due), status: "Planned" });
  };

  return (
    <Modal open={open} onClose={onClose} title={T("mfg.newOrderTitle")} sub={T("mfg.newOrderSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("mfg.planOrder")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("mfg.product")} error={errs.product}>
        <SearchSelect options={boms.map((b) => b.product)} placeholder={T("mfg.productsWithBom")} value={product} onChange={setProduct} />
      </Field>
      <div className="formgrid">
        <Field label={T("common.quantity")} error={errs.qty}>
          <Input type="number" min="1" placeholder="0" value={qty} onChange={(e) => setQty(e.target.value)} />
        </Field>
        <Field label={T("mfg.deliverTo")} error={errs.wh}>
          <SearchSelect options={D.warehouses} value={wh} onChange={setWh} placeholder={T("mfg.warehousePlaceholder")} />
        </Field>
      </div>
      <Field label={T("acct.dueDate")}>
        <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
      </Field>
      {reqs.length ? (
        <div className="lineitems" style={{ marginTop: 4 }}>
          <div className="li-head">{T("mfg.materialsNeeded")}</div>
          {reqs.map((r) => (
            <div key={r.sku} className="li-row">
              <span style={{ flex: 1 }}>{r.name}</span>
              <span className="mono" style={{ marginInlineEnd: 10 }}>{r.need}</span>
              <Badge tone={r.ok ? "green" : "red"}>{r.ok ? T("mfg.available") : T("mfg.shortN", { n: +(r.need - r.have).toFixed(1) })}</Badge>
            </div>
          ))}
        </div>
      ) : null}
    </Modal>
  );
}

/* ---------- New BOM ---------- */
function NewBomModal({ open, boms, onClose, onCreate }) {
  const { useState, useEffect } = React;
  const blankLine = () => ({ label: "", qty: "" });
  const [product, setProduct] = useState("");
  const [lines, setLines] = useState([blankLine(), blankLine()]);
  const [err, setErr] = useState("");

  useEffect(() => { if (open) { setProduct(""); setLines([blankLine(), blankLine()]); setErr(""); } }, [open]);

  const labelFor = (i) => i.sku + " · " + i.name;
  const products = D.items.filter((i) => i.type !== "service" && !boms.some((b) => b.sku === i.sku))
    .filter((i, idx, arr) => arr.findIndex((x) => x.sku === i.sku) === idx);
  const components = D.items.filter((i) => i.type !== "service")
    .filter((i, idx, arr) => arr.findIndex((x) => x.sku === i.sku) === idx);

  const save = () => {
    const prodItem = components.find((i) => labelFor(i) === product) || products.find((i) => labelFor(i) === product);
    const used = lines.map((l) => {
      const it = components.find((i) => labelFor(i) === l.label);
      const q = parseFloat(l.qty);
      return it && !isNaN(q) && q > 0 ? { sku: it.sku, name: it.name, qty: q } : null;
    }).filter(Boolean);
    if (!prodItem) { setErr(T("mfg.errChooseBomProduct")); return; }
    if (used.length < 1) { setErr(T("mfg.errOneComponent")); return; }
    if (used.some((c) => c.sku === prodItem.sku)) { setErr(T("mfg.errSelfComponent")); return; }
    onCreate({ id: "BOM-" + String(boms.length + 1).padStart(2, "0"), product: prodItem.name, sku: prodItem.sku, output: 1, components: used });
  };

  return (
    <Modal open={open} onClose={onClose} width={640} title={T("mfg.newBomTitle")} sub={T("mfg.newBomSub")}
      footer={<div className="btnrow"><Btn variant="primary" icon="check" onClick={save}>{T("mfg.createBom")}</Btn><Btn onClick={onClose}>{T("common.cancel")}</Btn></div>}>
      <Field label={T("mfg.product")}>
        <SearchSelect options={products.map(labelFor)} placeholder={T("mfg.chooseFinishedProduct")} value={product} onChange={setProduct} />
      </Field>
      <div className="formsec">{T("mfg.componentsPerUnit")}</div>
      <div className="je-edit">
        {lines.map((l, i) => (
          <div key={i} className="bom-row">
            <SearchSelect options={components.map(labelFor)} placeholder={T("mfg.componentPlaceholder")} value={l.label}
              onChange={(v) => setLines((ls) => ls.map((x, j) => (j === i ? { ...x, label: v } : x)))} />
            <Input type="number" min="0" step="0.5" placeholder={T("common.qty")} value={l.qty}
              onChange={(e) => setLines((ls) => ls.map((x, j) => (j === i ? { ...x, qty: e.target.value } : x)))} />
            {lines.length > 1 ? (
              <button className="iconbtn" onClick={() => setLines((ls) => ls.filter((_, j) => j !== i))} aria-label={T("mfg.removeComponent")}>
                <Icon name="x" size={15} />
              </button>
            ) : <span></span>}
          </div>
        ))}
        <Btn small icon="plus" onClick={() => setLines((ls) => [...ls, blankLine()])}>{T("mfg.addComponent")}</Btn>
      </div>
      {err ? <p className="field-err" style={{ marginTop: 10 }}>{err}</p> : null}
    </Modal>
  );
}
window.Manufacturing = Manufacturing;