/* PC Liquors — Admin portal views. */
const DSx = window.PCLiquorsDesignSystem_ae5d4f;
const { Button, Badge, Tag, Tabs, Table, StatCard, Card, Input, Select, Avatar, Alert, Pagination, Tooltip } = DSx;
const { Icons:Ic, TOP_PRODUCTS, INVENTORY, EMPLOYEES, EXPENSES, DOCS, SalesChart } = window.PCAdmin;

const money = (n) => "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/* ===================== POS / SALES DASHBOARD ===================== */
function PosView() {
  const [range, setRange] = React.useState("week");
  return (
    <div className="view">
      <div className="view__row view__row--between">
        <Alert tone="success" title="Clover POS connected"><span>BofA Clover · last sync 2 min ago · 312 transactions today</span></Alert>
        <Button variant="outline" size="sm" leftIcon={<Ic.sync s={15} />}>Sync now</Button>
      </div>

      <div className="kpis">
        <StatCard label="Today's sales" value="$4,280" icon={<Ic.dollar s={18} />} delta="8.2%" deltaDirection="up" caption="vs. yesterday" />
        <StatCard label="Transactions" value="312" icon={<Ic.receipt s={18} />} delta="4.0%" deltaDirection="up" caption="312 of ~300 avg" />
        <StatCard label="Avg. ticket" value="$31.40" icon={<Ic.tag s={18} />} delta="1.1%" deltaDirection="down" caption="this week" />
        <StatCard label="Predicted Jun 30" value="$6,300" icon={<Ic.up s={18} />} delta="forecast" deltaDirection="up" caption="model · last 90 days" />
      </div>

      <Card padded className="panel">
        <div className="panel__head">
          <div>
            <div className="panel__title">Sales — past & forecast</div>
            <div className="panel__sub">Solid bars are actuals; dashed bars are the model's prediction.</div>
          </div>
          <div className="panel__tools">
            <Tabs value={range} onChange={setRange} items={[{id:"day",label:"Day"},{id:"week",label:"Week"},{id:"month",label:"Month"}]} />
            <Button variant="ghost" size="sm" leftIcon={<Ic.cal s={15} />}>Custom</Button>
          </div>
        </div>
        <SalesChart />
        <div className="chart-legend">
          <span><i className="dot dot--solid"></i> Actual sales</span>
          <span><i className="dot dot--dash"></i> Predicted</span>
        </div>
      </Card>

      <Card padded className="panel">
        <div className="panel__head">
          <div className="panel__title">Top sellers today</div>
          <Button variant="ghost" size="sm" rightIcon={<Ic.download s={15} />}>Export</Button>
        </div>
        <Table
          columns={[
            { key:"name", label:"Product" },
            { key:"sku", label:"SKU", render:(v)=> <span className="mono-muted">{v}</span> },
            { key:"units", label:"Units", align:"right" },
            { key:"revenue", label:"Revenue", align:"right", render:(v)=> "$"+v },
          ]}
          rows={TOP_PRODUCTS}
        />
      </Card>
    </div>
  );
}

/* ===================== INVENTORY / SKU ===================== */
function statusTone(s) { return s === "In stock" ? "success" : s === "Low" ? "warning" : "danger"; }

function InventoryView({ onAdd }) {
  const [cat, setCat] = React.useState("all");
  const cats = [{id:"all",label:"All",count:412},{id:"Whiskey",label:"Whiskey"},{id:"Wine",label:"Wine"},{id:"Vodka",label:"Vodka"},{id:"low",label:"Low stock",count:8}];
  const rows = INVENTORY.filter(r => cat==="all" ? true : cat==="low" ? r.status!=="In stock" : r.cat===cat);
  return (
    <div className="view">
      <div className="view__row view__row--between">
        <Tabs value={cat} onChange={setCat} items={cats} />
        <div className="view__row">
          <label className="inline-search"><Ic.search s={16} /><input placeholder="Search SKU or brand…" /></label>
          <Button variant="primary" size="sm" leftIcon={<Ic.plus s={15} />} onClick={onAdd}>Add product</Button>
        </div>
      </div>

      <div className="promo-banner">
        <div className="promo-banner__left"><span className="promo-banner__ic"><Ic.tag s={18} /></span>
          <div><b>Run a promotion</b><span>July 4th weekend · 15% off all American whiskey</span></div></div>
        <div className="view__row"><Badge tone="gold" dot>Scheduled</Badge><Button variant="outline" size="sm">Manage promotions</Button></div>
      </div>

      <Card padded={false} className="panel">
        <Table
          columns={[
            { key:"name", label:"Product", render:(v,r)=> <div className="cell-prod"><span className="cell-prod__name">{v}</span><span className="cell-prod__cat">{r.cat}</span></div> },
            { key:"sku", label:"SKU", render:(v)=> <span className="mono-muted">{v}</span> },
            { key:"price", label:"Price", align:"right", render:(v)=> "$"+v },
            { key:"stock", label:"On hand", align:"right" },
            { key:"status", label:"Status", render:(v)=> <Badge tone={statusTone(v)} dot>{v}</Badge> },
            { key:"_a", label:"", align:"right", render:(_,r)=> (
              <div className="row-actions">
                <Tooltip label="Edit"><button className="icon-act"><Ic.edit s={15} /></button></Tooltip>
                <Tooltip label="Delete"><button className="icon-act icon-act--danger"><Ic.trash s={15} /></button></Tooltip>
              </div>
            ) },
          ]}
          rows={rows}
        />
        <div className="panel__foot">
          <span className="panel__count">Showing {rows.length} of 412 SKUs</span>
          <Pagination page={1} total={18} onChange={()=>{}} />
        </div>
      </Card>
    </div>
  );
}

/* ===================== EMPLOYEES ===================== */
function EmployeesView({ onAdd }) {
  const withPay = EMPLOYEES.map(e => ({ ...e, pay: (e.hours * parseFloat(e.rate)) }));
  const total = withPay.reduce((s,e)=> s+e.pay, 0);
  return (
    <div className="view">
      <div className="view__row view__row--between">
        <div className="view__row">
          <StatCard label="Team" value={String(EMPLOYEES.length)} icon={<Ic.users s={18} />} caption="active staff" />
          <StatCard label="Hours · June" value={String(withPay.reduce((s,e)=>s+e.hours,0))} icon={<Ic.cal s={18} />} caption="logged" />
          <StatCard label="Payroll · June" value={money(total)} icon={<Ic.dollar s={18} />} caption="gross" />
        </div>
        <Button variant="primary" size="sm" leftIcon={<Ic.plus s={15} />} onClick={onAdd}>Add employee</Button>
      </div>

      <Card padded={false} className="panel">
        <Table
          columns={[
            { key:"name", label:"Employee", render:(v,r)=> <div className="cell-emp"><Avatar name={v} size="sm" /><div><span className="cell-emp__name">{v}</span><span className="cell-emp__mail">{r.email}</span></div></div> },
            { key:"role", label:"Role", render:(v)=> <Badge tone="neutral">{v}</Badge> },
            { key:"hours", label:"Hours (Jun)", align:"right" },
            { key:"rate", label:"Rate / hr", align:"right", render:(v)=> "$"+v },
            { key:"pay", label:"Gross pay", align:"right", render:(v)=> money(v) },
            { key:"_a", label:"", align:"right", render:()=> <button className="icon-act"><Ic.edit s={15} /></button> },
          ]}
          rows={withPay}
        />
      </Card>
    </div>
  );
}

/* ===================== EXPENSES ===================== */
const srcIcon = { pos:"receipt", bank:"bank", card:"card", mail:"mail" };
function ExpensesView() {
  const incoming = EXPENSES.filter(e=>e.type==="in").reduce((s,e)=> s+parseFloat(e.amount.replace(/,/g,"")), 0);
  const outgoing = EXPENSES.filter(e=>e.type==="out").reduce((s,e)=> s+parseFloat(e.amount.replace(/,/g,"")), 0);
  const [plaidStatus, setPlaidStatus] = React.useState(null);
  const [imported, setImported] = React.useState(null);
  const fileRef = React.useRef();

  const connectPlaid = async () => {
    setPlaidStatus("connecting");
    try {
      const res = await fetch("/api/create-link-token", { method: "POST" });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Plaid not configured");
      setPlaidStatus("Link token created — hand off to Plaid Link SDK to finish bank connection.");
    } catch (e) {
      setPlaidStatus("Plaid isn't configured yet — add PLAID_CLIENT_ID and PLAID_SECRET in Vercel env vars.");
    }
  };
  const onCsv = (e) => {
    const file = e.target.files[0]; if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const rows = String(reader.result).split(/\r?\n/).filter(Boolean);
      setImported(`Parsed ${Math.max(rows.length - 1, 0)} rows from ${file.name} — ready to reconcile against SKUs/vendors.`);
    };
    reader.readAsText(file);
  };

  return (
    <div className="view">
      <div className="kpis kpis--3">
        <StatCard label="Incoming" value={money(incoming)} icon={<Ic.up s={18} />} delta="POS + bank" deltaDirection="up" caption="this period" />
        <StatCard label="Outgoing" value={money(outgoing)} icon={<Ic.down s={18} />} delta="vendors + bills" deltaDirection="down" caption="this period" />
        <StatCard label="Net" value={money(incoming-outgoing)} icon={<Ic.dollar s={18} />} delta={incoming-outgoing>=0?"surplus":"deficit"} deltaDirection={incoming-outgoing>=0?"up":"down"} caption="this period" />
      </div>

      <div className="scan-row">
        {[["card","Credit cards","2 linked · auto-scan"],["mail","Email invoices","Gmail · 14 found"],["bank","Bank feed","BofA · connected"],["receipt","Clover POS","live"]].map(([k,t,s])=>(
          <div className="scan-chip" key={k}><span className="scan-chip__ic">{Ic[k]({s:16})}</span><div><b>{t}</b><span>{s}</span></div><span className="scan-chip__live" /></div>
        ))}
      </div>

      <Card padded className="panel">
        <div className="panel__head">
          <div><div className="panel__title">Connect real data</div><div className="panel__sub">Link your bank via Plaid, or import a CSV export from your POS/bank today.</div></div>
        </div>
        <div className="view__row" style={{gap:"1rem", flexWrap:"wrap"}}>
          <Button variant="outline" size="sm" leftIcon={<Ic.bank s={15} />} onClick={connectPlaid}>Connect bank (Plaid)</Button>
          <Button variant="outline" size="sm" leftIcon={<Ic.download s={15} />} onClick={()=>fileRef.current.click()}>Import POS/bank CSV</Button>
          <input ref={fileRef} type="file" accept=".csv" style={{display:"none"}} onChange={onCsv} />
        </div>
        {plaidStatus && <Alert tone="warning" style={{marginTop:"1rem"}}><span>{plaidStatus}</span></Alert>}
        {imported && <Alert tone="success" style={{marginTop:"1rem"}}><span>{imported}</span></Alert>}
      </Card>

      <Card padded className="panel">
        <div className="panel__head">
          <div><div className="panel__title">Transactions — all channels</div><div className="panel__sub">Scanned from POS, bank, credit cards & email invoices.</div></div>
          <div className="panel__tools">
            <Select defaultValue="june"><option value="june">June 2026</option><option value="may">May 2026</option><option value="custom">Custom range…</option></Select>
            <Button variant="primary" size="sm" leftIcon={<Ic.download s={15} />}>Generate report</Button>
          </div>
        </div>
        <Table
          columns={[
            { key:"date", label:"Date", render:(v)=> <span className="mono-muted">{v}</span> },
            { key:"desc", label:"Description", render:(v,r)=> <div className="cell-exp"><span className={"cell-exp__ic cell-exp__ic--"+r.src}>{Ic[srcIcon[r.src]]({s:14})}</span>{v}</div> },
            { key:"channel", label:"Channel", render:(v)=> <Badge tone="neutral">{v}</Badge> },
            { key:"amount", label:"Amount", align:"right", render:(v,r)=> <span className={"amt amt--"+(r.type==="in"?"in":"out")}>{r.type==="in"?"+":"−"}${v}</span> },
          ]}
          rows={EXPENSES}
        />
      </Card>
    </div>
  );
}

/* ===================== DOCUMENTS ===================== */
function DocumentsView() {
  return (
    <div className="view">
      <div className="view__row view__row--between">
        <div><div className="panel__title">Company documents</div><div className="panel__sub">EIN, licenses, insurance, leases & vendor contracts.</div></div>
        <Button variant="primary" size="sm" leftIcon={<Ic.plus s={15} />}>Upload document</Button>
      </div>
      <div className="doc-grid">
        {DOCS.map((d,i)=>(
          <Card key={i} padded hover className="doc-card">
            <div className="doc-card__top">
              <span className={"doc-card__folder doc-card__folder--"+d.tone}><Ic.folder s={22} /></span>
              <Badge tone="neutral">{d.count} files</Badge>
            </div>
            <div className="doc-card__name">{d.folder}</div>
            <ul className="doc-card__list">
              {d.items.map((f,j)=>(<li key={j}><Ic.doc s={14} /><span>{f}</span></li>))}
            </ul>
            <button className="doc-card__open">Open folder <Ic.up s={13} style={{transform:"rotate(45deg)"}} /></button>
          </Card>
        ))}
      </div>
    </div>
  );
}

window.PCAdminViews = { PosView, InventoryView, EmployeesView, ExpensesView, DocumentsView };