/* NGIPL PLM — Party rates view */
const { useState, useEffect, useMemo, useRef } = React;

function PartiesView({ nav, selectedId, onSelect, toast }) {
  const state = PLM.useStore();
  const party = PLM.partyById(selectedId) || state.parties[0] || null;
  const [addOpen, setAddOpen] = useState(false);
  const [newParty, setNewParty] = useState(false);

  useEffect(() => {
    if (!PLM.partyById(selectedId) && state.parties.length) onSelect(state.parties[0].id);
  }, [selectedId, state.parties.length]);

  return (
    <div className="parties-grid" data-screen-label="Party Rates">
      <div>
        <div className="toolbar" style={{ marginBottom: 12 }}>
          <span className="overline" style={{ fontSize: 11, color: "var(--text-muted)" }}>{state.parties.length} parties</span>
          <div className="spacer"></div>
          <Btn variant="secondary" size="sm" onClick={() => setNewParty(true)}><IPlus size={13}></IPlus> Add party</Btn>
        </div>
        <div>
          {state.parties.map((pa) => {
            const st = PLM.partyStats(pa);
            const on = party && pa.id === party.id;
            return (
              <button key={pa.id} type="button" className={"party-card" + (on ? " party-card--on" : "")} onClick={() => onSelect(pa.id)}>
                <span className="pc-name">
                  {pa.name}
                  {st.stale ? <span className="chip chip--warn" style={{ fontSize: 9 }}><IAlert size={10}></IAlert> {st.stale}</span> : null}
                </span>
                <span className="pc-meta">{st.items} items · {st.special} special rates</span>
              </button>
            );
          })}
        </div>
      </div>

      {party ? (
        <PartyDetail key={party.id} party={party} nav={nav} toast={toast}
          onAddItems={() => setAddOpen(true)}></PartyDetail>
      ) : (
        <div className="panel" style={{ padding: 40, textAlign: "center" }}>
          <div className="caption">No parties yet. Add a party to maintain their special rates.</div>
        </div>
      )}

      {addOpen && party ? <AddItemsDialog party={party} onClose={() => setAddOpen(false)} toast={toast}></AddItemsDialog> : null}
      {newParty ? <NewPartyDialog onClose={() => setNewParty(false)} onCreated={(id) => { onSelect(id); setNewParty(false); }}></NewPartyDialog> : null}
    </div>
  );
}

function PartyDetail({ party, nav, toast, onAddItems }) {
  const state = PLM.useStore();
  const [filter, setFilter] = useState("all");
  const [confirmDel, setConfirmDel] = useState(false);
  const pb = PLM.productsById();
  const st = PLM.partyStats(party);
  const grouped = PLM.partyGrouped(party);
  const entity = PLM.entityById(party.entityId);

  function visible(it) {
    if (filter === "special") {
      const p = it.productId && pb[it.productId];
      return p ? Math.abs(p.rate - it.rate) > 0.0001 : true;
    }
    if (filter === "review") return PLM.itemStale(it);
    return true;
  }

  let no = 0;
  return (
    <div>
      <div className="panel panel--strong" style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px" }}>
          <EditableName party={party}></EditableName>
          <select className="f-select" style={{ width: 250, height: 34, fontSize: 12 }} value={party.entityId}
            title="Billing entity shown on this party's printed list"
            onChange={(e) => PLM.updateParty(party.id, { entityId: e.target.value })}>
            {state.entities.map((en) => <option key={en.id} value={en.id}>{en.name}</option>)}
          </select>
          <div className="spacer" style={{ flex: 1 }}></div>
          <Btn variant="secondary" size="sm" onClick={() => nav.goPrint(party.id)}><IPrinter size={13}></IPrinter> Print list</Btn>
          <Btn variant="secondary" size="sm" onClick={onAddItems}><IPlus size={13}></IPlus> Add items</Btn>
          {confirmDel ? (
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
              <span className="caption">Delete party?</span>
              <Btn variant="danger" size="sm" onClick={() => { PLM.deleteParty(party.id); toast("Deleted " + party.name); }}>Delete</Btn>
              <Btn variant="ghost" size="sm" onClick={() => setConfirmDel(false)}>Keep</Btn>
            </span>
          ) : (
            <IconBtn title="Delete party" onClick={() => setConfirmDel(true)}><ITrash size={15}></ITrash></IconBtn>
          )}
        </div>
        <div className="stat-strip" style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "none" }}>
          <div className="stat-cell"><div className="stat-num tnum">{st.items}</div><div className="stat-lbl">Items</div></div>
          <div className="stat-cell"><div className="stat-num tnum">{st.special}</div><div className="stat-lbl">Special rates</div></div>
          <div className="stat-cell"><div className="stat-num tnum">{st.custom}</div><div className="stat-lbl">Custom items</div></div>
          <div className="stat-cell">
            <div className="stat-num tnum" style={st.stale ? { color: "var(--amber-700)" } : null}>{st.stale}</div>
            <div className="stat-lbl">To review</div>
          </div>
        </div>
      </div>

      {st.stale ? (
        <div className="review-banner">
          <IAlert size={15}></IAlert>
          <span>Master rates changed on {st.stale} item{st.stale === 1 ? "" : "s"} since this party's rates were last agreed. Review below — keep the special rate or match master.</span>
          <div className="spacer" style={{ flex: 1 }}></div>
          <Btn variant="ghost" size="sm" onClick={() => setFilter("review")}>Show items</Btn>
        </div>
      ) : null}

      <div className="toolbar">
        <div className="filter-chips">
          <button type="button" className={"fchip" + (filter === "all" ? " fchip--on" : "")} onClick={() => setFilter("all")}>All ({st.items})</button>
          <button type="button" className={"fchip" + (filter === "special" ? " fchip--on" : "")} onClick={() => setFilter("special")}>Special ({st.special + st.custom})</button>
          <button type="button" className={"fchip" + (filter === "review" ? " fchip--on" : "")} onClick={() => setFilter("review")}>To review ({st.stale})</button>
        </div>
        <div className="spacer"></div>
        <span className="caption">Billed by {entity.short} · GST {entity.gst}</span>
      </div>

      <div className="panel panel--strong plm-table-wrap" style={{ maxHeight: "calc(100vh - 380px)", minHeight: 240 }}>
        <table className="plm-table">
          <thead>
            <tr>
              <th className="col-no">#</th>
              <th>Item</th>
              <th className="num" style={{ width: 96 }}>Party ₹</th>
              <th className="num" style={{ width: 90 }}>Master ₹</th>
              <th className="num" style={{ width: 70 }}>Δ</th>
              <th className="num" style={{ width: 60 }}>GST</th>
              <th className="num" style={{ width: 84 }}>Pack</th>
              <th style={{ width: 210 }}></th>
            </tr>
          </thead>
          <tbody>
            {grouped.map((band) => {
              const items = band.items.filter(visible);
              if (!items.length) { no += band.items.length; return null; }
              let localStart = no;
              no += band.items.length;
              let seq = localStart;
              return (
                <React.Fragment key={band.cat.id}>
                  <tr className="cat-band"><td colSpan={8}><span className="band-cell"><CatIcon catId={band.cat.id} size={18}></CatIcon><span>{band.cat.name}</span></span></td></tr>
                  {band.items.map((it) => {
                    seq++;
                    if (!visible(it)) return null;
                    return <PartyItemRow key={it.id} party={party} it={it} no={seq} toast={toast}></PartyItemRow>;
                  })}
                </React.Fragment>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function EditableName({ party }) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState("");
  const ref = useRef(null);
  useEffect(() => { if (editing && ref.current) { ref.current.focus(); ref.current.select(); } }, [editing]);
  if (editing) {
    return (
      <input className="f-input" ref={ref} style={{ width: 280, height: 34, fontWeight: 600 }} value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onBlur={() => { setEditing(false); if (draft.trim()) PLM.updateParty(party.id, { name: draft.trim() }); }}
        onKeyDown={(e) => {
          if (e.key === "Enter") { setEditing(false); if (draft.trim()) PLM.updateParty(party.id, { name: draft.trim() }); }
          if (e.key === "Escape") setEditing(false);
        }} />
    );
  }
  return (
    <span style={{ fontSize: 17, fontWeight: 700, cursor: "text", display: "inline-flex", alignItems: "center", gap: 8 }}
      title="Click to rename" onClick={() => { setDraft(party.name); setEditing(true); }}>
      {party.name}
      <IPencil size={13} style={{ color: "var(--gray-400)" }}></IPencil>
    </span>
  );
}

function PartyItemRow({ party, it, no, toast }) {
  const pb = PLM.productsById();
  const p = it.productId ? pb[it.productId] : null;
  const name = p ? (it.displayName || p.name) : it.customName;
  const stale = PLM.itemStale(it);
  const d = p ? PLM.deltaPct(it.rate, p.rate) : null;
  return (
    <tr className="item-row" style={stale ? { background: "var(--amber-50)" } : null}>
      <td className="col-no">{no}</td>
      <td>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span>{name}</span>
          {!p ? <span className="chip" style={{ fontSize: 9 }}>Custom</span> : null}
          {it.displayName && p ? <span className="chip chip--ghost" style={{ fontSize: 9 }} title={"Master item: " + p.name}>≙ {p.name}</span> : null}
        </div>
      </td>
      <td className="num rate">
        <RateCell value={it.rate} onCommit={(r) => { PLM.partySetRate(party.id, it.id, r); toast(party.name + ": " + name + " → ₹" + PLM.fmtRate(r)); }}></RateCell>
      </td>
      <td className="num tnum" style={{ color: "var(--text-faint)" }}>{p ? "₹" + PLM.fmtRate(p.rate) : "—"}</td>
      <td className="num tnum">{p ? (d || "=") : ""}</td>
      <td className="num">{PLM.fmtGst(it.gst !== null && it.gst !== undefined ? it.gst : (p ? p.gst : null))}</td>
      <td className="num">{PLM.fmtPack(it.packSize !== null && it.packSize !== undefined ? it.packSize : (p ? p.packSize : null))}</td>
      <td>
        {stale && p ? (
          <span style={{ display: "inline-flex", gap: 6, alignItems: "center", whiteSpace: "nowrap" }}>
            <span className="chip chip--warn" title={"Master was ₹" + PLM.fmtRate(it.baseRate) + " when agreed — now ₹" + PLM.fmtRate(p.rate)}>
              <IAlert size={10}></IAlert> ₹{PLM.fmtRate(it.baseRate)} → {PLM.fmtRate(p.rate)}
            </span>
            <button type="button" className="fchip" title="Keep this special rate"
              onClick={() => { PLM.partyAck(party.id, it.id); toast("Kept ₹" + PLM.fmtRate(it.rate) + " for " + name); }}>Keep</button>
            <button type="button" className="fchip" title="Set party rate to the master rate"
              onClick={() => { PLM.partyMatchMaster(party.id, it.id); toast(name + " matched to master"); }}>Match</button>
          </span>
        ) : (
          <span className="row-actions">
            <IconBtn title="Remove from this party's list" onClick={() => PLM.partyRemoveItem(party.id, it.id)}><IX size={14}></IX></IconBtn>
          </span>
        )}
      </td>
    </tr>
  );
}

function NewPartyDialog({ onClose, onCreated }) {
  const state = PLM.useStore();
  const [name, setName] = useState("");
  const [entityId, setEntityId] = useState("nmpl");
  return (
    <Dialog title="Add party" onClose={onClose} width={480}
      footer={
        <React.Fragment>
          <Btn variant="ghost" size="sm" onClick={onClose}>Cancel</Btn>
          <Btn size="sm" disabled={!name.trim()} onClick={() => { const pa = PLM.addParty(name.trim(), entityId); onCreated(pa.id); }}>Add party</Btn>
        </React.Fragment>
      }>
      <div className="f-stack">
        <Field label="Party name">
          <input className="f-input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Taj Resort & Convention Centre" />
        </Field>
        <Field label="Billing entity">
          <select className="f-select" value={entityId} onChange={(e) => setEntityId(e.target.value)}>
            {state.entities.map((en) => <option key={en.id} value={en.id}>{en.name}</option>)}
          </select>
        </Field>
        <div className="caption">Start from the general price list — add items and negotiate special rates per item.</div>
      </div>
    </Dialog>
  );
}

function AddItemsDialog({ party, onClose, toast }) {
  const state = PLM.useStore();
  const [q, setQ] = useState("");
  const [sel, setSel] = useState({});
  const existing = new Set(party.items.map((it) => it.productId).filter(Boolean));
  const nums = PLM.numberMap();
  const list = state.products
    .filter((p) => !existing.has(p.id))
    .filter((p) => !q.trim() || p.name.toLowerCase().includes(q.trim().toLowerCase()));
  const selIds = Object.keys(sel).filter((k) => sel[k]);
  return (
    <Dialog title={"Add items — " + party.name} onClose={onClose} width={640}
      footer={
        <React.Fragment>
          <span className="caption" style={{ marginRight: "auto" }}>Added at master rate — adjust after adding.</span>
          <Btn variant="ghost" size="sm" onClick={onClose}>Cancel</Btn>
          <Btn size="sm" disabled={!selIds.length}
            onClick={() => { PLM.partyAddItems(party.id, selIds); toast("Added " + selIds.length + " item(s) to " + party.name); onClose(); }}>
            Add {selIds.length || ""} item{selIds.length === 1 ? "" : "s"}
          </Btn>
        </React.Fragment>
      }>
      <div className="search-box" style={{ marginBottom: 12 }}>
        <ISearch size={15}></ISearch>
        <input className="f-input" style={{ width: "100%" }} placeholder="Search master list…" value={q} onChange={(e) => setQ(e.target.value)} autoFocus />
      </div>
      <div className="panel" style={{ maxHeight: 320, overflow: "auto" }}>
        <table className="plm-table">
          <tbody>
            {list.map((p) => (
              <tr key={p.id} className="item-row" style={{ cursor: "pointer" }} onClick={() => setSel({ ...sel, [p.id]: !sel[p.id] })}>
                <td style={{ width: 36 }}>
                  <input type="checkbox" checked={!!sel[p.id]} readOnly style={{ accentColor: "#000000" }} />
                </td>
                <td className="col-no">{nums[p.id]}</td>
                <td>{p.name}</td>
                <td className="num tnum" style={{ width: 90 }}>₹{PLM.fmtRate(p.rate)}</td>
                <td className="num" style={{ width: 60 }}>{PLM.fmtGst(p.gst)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {!list.length ? <div className="caption" style={{ padding: 16 }}>Nothing to add{q ? " for “" + q + "”" : ""}.</div> : null}
      </div>
    </Dialog>
  );
}

Object.assign(window, { PartiesView });