/* TMD Portal — money screens + settings. */
const uSt = React.useState;

/* ================= Expenses ================= */
function Expenses({ app }) {
  const [add, setAdd] = uSt(false);
  const [cat, setCat] = uSt('all');
  const [cl, setCl] = uSt('all');
  const [paid, setPaid] = uSt('all');
  const [when, setWhen] = uSt('all');
  const cats = ['Ad spend', 'Production', 'Software', 'Freelance', 'Print', 'Travel'];
  const list = app.expenses.filter(e => (cat === 'all' || e.cat === cat) && (cl === 'all' || e.client === cl) && (paid === 'all' || e.paidBy === paid) &&
    (when === 'all' || (when === '7' ? dayDiff(e.date) >= -7 : when === 'aug' ? e.date >= monthStart(0) : e.date >= monthStart(-1) && e.date <= monthEnd(-1))));
  const total = list.filter(e => e.paidBy === 'TMD').reduce((s, e) => s + e.amount, 0);
  const billable = list.filter(e => e.billable).reduce((s, e) => s + e.amount, 0);

  return (
    <div className="page">
      <PageHead title="Expenses" sub={monthLabel(0) + ' · ' + money(total) + ' paid by TMD · ' + money(billable) + ' rebillable'} actions={<Btn kind="primary" onClick={() => setAdd(true)}>Add expense</Btn>} />
      <div className="filters">
        <Filter label="Category" value={cat} onChange={setCat} options={[{ v: 'all', l: 'All categories' }].concat(cats.map(c => ({ v: c, l: c })))} />
        <Filter label="Client" value={cl} onChange={setCl} options={[{ v: 'all', l: 'All clients' }].concat(T.clients.map(c => ({ v: c.id, l: c.name })))} />
        <Filter label="Paid by" value={paid} onChange={setPaid} options={[{ v: 'all', l: 'Anyone' }, { v: 'TMD', l: 'TMD' }, { v: 'Client', l: 'Client' }]} />
        <Filter label="Date" value={when} onChange={setWhen} options={[{ v: 'all', l: 'Any date' }, { v: '7', l: 'Last 7 days' }, { v: 'aug', l: monthLabel(0, true) }, { v: 'jul', l: monthLabel(-1, true) }]} />
      </div>
      {!list.length ? <Empty title="No expenses match these filters." hint="Every rupee TMD spends on a client belongs here — it is what makes the profit view honest." action={<Btn kind="primary" onClick={() => setAdd(true)}>Add expense</Btn>} /> : app.mobile ? (
        <div className="mlist">{list.map(e => (
          <div key={e.id} className="mrow"><span className="mrow-top"><span className="num">{fmtDate(e.date)}</span><b className="num">{money(e.amount, { bare: true })}</b></span>
            <span className="mrow-t">{e.desc}</span>
            <span className="mrow-b"><span className="muted">{e.cat}</span><span className="muted">{e.client ? client(e.client).name : 'Overhead'}</span>{e.billable ? <Tag>Rebill</Tag> : null}</span></div>
        ))}</div>
      ) : (
        <table className="tbl">
          <thead><tr><th>Date</th><th>Expense</th><th>Category</th><th>Client</th><th>Paid by</th><th>Rebill</th><th className="r">Amount</th></tr></thead>
          <tbody>{list.map(e => (
            <tr key={e.id}><td className="num">{fmtDate(e.date)}</td><td className="strong">{e.desc}</td><td className="muted">{e.cat}</td>
              <td>{e.client ? client(e.client).name : <span className="muted">Overhead</span>}</td><td className="muted">{e.paidBy}</td>
              <td>{e.billable ? <Tag>Rebill</Tag> : <span className="muted">—</span>}</td><td className="r num">{money(e.amount, { bare: true })}</td></tr>
          ))}</tbody>
        </table>
      )}
      <AddExpense open={add} onClose={() => setAdd(false)} app={app} />
    </div>
  );
}

function AddExpense({ open, onClose, app }) {
  const [amt, setAmt] = uSt('');
  const [cat, setCat] = uSt('');
  const [cl, setCl] = uSt('');
  const [paidBy, setPaidBy] = uSt('TMD');
  const [bill, setBill] = uSt(true);
  const [date, setDate] = uSt(T.TODAY);
  const cats = ['Ad spend', 'Production', 'Software', 'Freelance', 'Print', 'Travel'];
  const ready = amt && cat;
  return (
    <Sheet open={open} onClose={onClose} title="Add expense"
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn><Btn kind="primary" disabled={!ready} onClick={() => { app.addExpense({ amount: Number(amt), cat, client: cl || null, paidBy, billable: bill, date }); setAmt(''); setCat(''); setCl(''); setDate(T.TODAY); onClose(); }}>Log expense</Btn></>}>
      <label className="tf big"><span>Amount</span><div className="amt"><em className="num">LKR</em><input className="num" inputMode="numeric" autoFocus value={amt} onChange={e => setAmt(e.target.value.replace(/[^0-9]/g, ''))} placeholder="0" /></div></label>
      <div className="tf"><span>Category</span><div className="chips">{cats.map(c => <button key={c} type="button" className={'chip' + (c === cat ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>)}</div></div>
      <div className="tf"><span>Client</span><div className="chips">{T.clients.map(c => <button key={c.id} type="button" className={'chip' + (c.id === cl ? ' on' : '')} onClick={() => setCl(c.id === cl ? '' : c.id)}>{c.name}</button>)}<button type="button" className={'chip' + (cl === '' ? ' on' : '')} onClick={() => setCl('')}>Overhead</button></div></div>
      <div className="tf"><span>Paid by</span><Seg value={paidBy} onChange={setPaidBy} options={['TMD', 'Client']} /></div>
      <label className="tgl"><input type="checkbox" checked={bill} onChange={e => setBill(e.target.checked)} /><span>Rebill to client on the next invoice</span></label>
      <div className="tf"><span>Date</span><div className="chips">{[{ v: T.TODAY, l: 'Today' }, { v: isoShift(-1), l: 'Yesterday' }].map(o => <button key={o.v} type="button" className={'chip' + (date === o.v ? ' on' : '')} onClick={() => setDate(o.v)}>{o.l}</button>)}<input className="chip-date num" type="date" value={date} max={T.TODAY} onChange={e => setDate(e.target.value)} /></div></div>
      <DS.Field label="RECEIPT LINK" placeholder="Paste a Drive or photo link. Optional." style={{ marginBottom: 16 }} />
      <p className="fine">Nothing is stored here but the link.</p>
    </Sheet>
  );
}

/* ================= Invoices ================= */
const invTotal = i => i.lines.reduce((s, l) => s + l.amount, 0);
const invPaid = i => i.payments.reduce((s, p) => s + p.amount, 0);

function Invoices({ app }) {
  const [batch, setBatch] = uSt(false);
  const list = app.invoices;
  const out = list.reduce((s, i) => s + (i.status === 'draft' ? 0 : invTotal(i) - invPaid(i)), 0);
  const drafts = list.filter(i => i.status === 'draft').length;
  return (
    <div className="page">
      <PageHead title="Invoices" sub={money(out) + ' outstanding · ' + monthLabel(-1, true) + ' period'} actions={<Btn kind="primary" onClick={() => setBatch(true)}>Review {monthLabel(0)} drafts<em className="num btn-n">{T.clients.filter(c => c.status === 'Active').length}</em></Btn>} />
      {drafts ? <div className="notice"><b>{drafts} draft{drafts > 1 ? 's' : ''} from {monthLabel(-1)} still unissued.</b><span>Drafts are editable. Issued invoices are not.</span></div> : null}
      <table className="tbl">
        <thead><tr><th>Number</th><th>Client</th><th>Period</th><th>Status</th><th>Due</th><th className="r">Total</th><th className="r">Outstanding</th></tr></thead>
        <tbody>{list.map(i => (
          <tr key={i.id} onClick={() => app.go('inv:' + i.id)} tabIndex={0}>
            <td className="num strong">{i.no}</td><td>{client(i.client).name}</td><td className="muted">{i.period}</td>
            <td><span className={'ic ic-' + i.status.replace(' ', '')}>{i.status}</span></td>
            <td>{i.due ? <DateCell iso={i.due} live={i.status === 'overdue' || i.status === 'issued' || i.status === 'part paid'} /> : <span className="muted">—</span>}</td>
            <td className="r num">{money(invTotal(i), { bare: true })}</td>
            <td className={'r num' + (i.status === 'overdue' ? ' od' : '')}>{i.status === 'paid' ? <span className="muted">—</span> : money(invTotal(i) - invPaid(i), { bare: true })}</td>
          </tr>
        ))}</tbody>
      </table>
      <BatchIssue open={batch} onClose={() => setBatch(false)} app={app} />
    </div>
  );
}

function InvoiceDetail({ app, id }) {
  const i = byId(app.invoices, id);
  const [confirm, setConfirm] = uSt(false);
  const [pay, setPay] = uSt(false);
  if (!i) return <Empty title="No such invoice." />;
  const draft = i.status === 'draft';
  const total = invTotal(i), paid = invPaid(i);
  return (
    <div className="page page-inv">
      <button type="button" className="back" onClick={() => app.go('invoices')}>← Invoices</button>
      <PageHead title={draft ? 'Draft invoice — ' + client(i.client).name : i.no} sub={client(i.client).name + ' · ' + i.period}
        actions={draft ? <><Btn kind="secondary">Edit lines</Btn><Btn kind="primary" onClick={() => setConfirm(true)}>Review and issue</Btn></>
          : <><Btn kind="primary" onClick={() => setPay(true)}>Record payment</Btn><Btn kind="secondary">Issue credit note</Btn><Btn kind="secondary">Void</Btn></>} />
      {!draft ? <div className="locked"><b>Issued {fmtDate(i.issued, true)} — this invoice cannot be edited.</b><span>Corrections are made with a credit note, so the client's copy and yours never disagree.</span></div> : null}
      <div className="invdoc">
        <div className="invdoc-h">
          <div><Mark size={17} /><p className="fine">The Marketing Desk (Pvt) Ltd · Colombo 05 · Sri Lanka</p></div>
          <div className="r"><div className="inv-no num">{draft ? 'Draft' : i.no}</div><div className="fine">Issued <span className="num">{i.issued ? fmtDate(i.issued, true) : '—'}</span></div><div className="fine">Due <span className="num">{i.due ? fmtDate(i.due, true) : '—'}</span></div></div>
        </div>
        <table className="tbl tbl-inv">
          <thead><tr><th>Description</th><th className="r">Amount</th></tr></thead>
          <tbody>{i.lines.map((l, n) => <tr key={n}><td>{l.desc}</td><td className="r num">{money(l.amount, { bare: true })}</td></tr>)}</tbody>
          <tfoot>
            <tr><td className="r">Total</td><td className="r num strong">{money(total, { bare: true })}</td></tr>
            {paid ? <tr><td className="r muted">Paid</td><td className="r num muted">− {money(paid, { bare: true })}</td></tr> : null}
            <tr><td className="r strong">{paid ? 'Balance' : 'Due'}</td><td className={'r num strong' + (i.status === 'overdue' ? ' od' : '')}>{money(total - paid, { bare: true })}</td></tr>
          </tfoot>
        </table>
        <p className="fine">No tax is charged. TMD is not tax-registered. Payment to Sampath Bank · <span className="num">0071 2345 6789</span>.</p>
      </div>
      <Eyebrow n="01">Payments</Eyebrow>
      {i.payments.length ? <table className="tbl"><thead><tr><th>Date</th><th>Reference</th><th className="r">Amount</th></tr></thead>
        <tbody>{i.payments.map((p, n) => <tr key={n}><td className="num">{fmtDate(p.date, true)}</td><td className="muted">{p.ref}</td><td className="r num">{money(p.amount, { bare: true })}</td></tr>)}</tbody></table>
        : <Empty title="No payment recorded." hint={draft ? 'Nothing can be paid against a draft.' : 'Record it the day the transfer lands, not the day you notice.'} />}
      <Confirm open={confirm} danger title="Issue this invoice?" confirmLabel="Issue invoice"
        body={<><p>{client(i.client).name} · {i.period} · <b className="num">{money(total)}</b></p><p>Once issued, this invoice is locked. No line can be changed, no amount corrected, no date moved. A mistake after this point is fixed with a credit note, and both documents stay on the record.</p></>}
        onClose={() => setConfirm(false)} onConfirm={() => { setConfirm(false); app.issue([i.id]); }} />
      <Sheet open={pay} onClose={() => setPay(false)} title="Record payment"
        footer={<><Btn kind="secondary" onClick={() => setPay(false)}>Cancel</Btn><Btn kind="primary" onClick={() => { setPay(false); app.toast('Payment recorded'); }}>Record payment</Btn></>}>
        <label className="tf big"><span>Amount</span><div className="amt"><em className="num">LKR</em><input className="num" defaultValue={String(total - paid)} /></div></label>
        <label className="tf"><span>Date received</span><input type="date" defaultValue={T.TODAY} /></label>
        <DS.Field label="REFERENCE" placeholder="Bank transfer, cheque number" style={{ marginBottom: 16 }} />
      </Sheet>
    </div>
  );
}

function BatchIssue({ open, onClose, app }) {
  const [step, setStep] = uSt(1);
  const [sel, setSel] = uSt(T.clients.map(c => c.id));
  const [confirm, setConfirm] = uSt(false);
  const rows = T.clients.map(c => {
    const rebill = T.expenses.filter(e => e.client === c.id && e.billable).reduce((s, e) => s + e.amount, 0);
    return { c, retainer: c.retainer, rebill, total: c.retainer + rebill };
  });
  const chosen = rows.filter(r => sel.includes(r.c.id));
  const sum = chosen.reduce((s, r) => s + r.total, 0);
  const toggle = id => setSel(s => s.includes(id) ? s.filter(x => x !== id) : s.concat(id));
  return (
    <Sheet open={open} onClose={() => { setStep(1); onClose(); }} title={step === 1 ? monthLabel(0) + ' drafts — review' : 'Issue ' + chosen.length + ' invoices'}
      footer={step === 1
        ? <><Btn kind="secondary" onClick={onClose}>Close</Btn><Btn kind="primary" disabled={!chosen.length} onClick={() => setStep(2)}>Continue — {chosen.length} selected</Btn></>
        : <><Btn kind="secondary" onClick={() => setStep(1)}>Back</Btn><Btn kind="primary" onClick={() => setConfirm(true)}>Issue {chosen.length} invoices</Btn></>}>
      {step === 1 ? (
        <>
          <p className="sm muted">The desk drafted one invoice per active client for {monthLabel(0)}: the retainer in force on the last day of the month, plus every expense marked rebillable. Uncheck anything that should not go out.</p>
          <div className="batch">{rows.map(r => (
            <label key={r.c.id} className={'brow' + (sel.includes(r.c.id) ? ' on' : '')}>
              <input type="checkbox" checked={sel.includes(r.c.id)} onChange={() => toggle(r.c.id)} />
              <span className="brow-n">{r.c.name}<em>{r.c.kind === 'internal' ? 'In-house' : 'External'}</em></span>
              <span className="brow-a num">{money(r.retainer, { bare: true })}<em>retainer</em></span>
              <span className="brow-a num">{r.rebill ? money(r.rebill, { bare: true }) : '—'}<em>rebilled</em></span>
              <b className="brow-t num">{money(r.total, { bare: true })}</b>
            </label>
          ))}</div>
          <div className="btotal"><span>Total to issue</span><b className="num">{money(sum)}</b></div>
        </>
      ) : (
        <>
          <div className="doorway"><b>This is the door.</b><p>Issuing sends <span className="num">{chosen.length}</span> invoices worth <span className="num">{money(sum)}</span> into the record. Each one is locked from that moment: no edits, no deletions, no quiet corrections. Only payments, voids and credit notes afterwards.</p></div>
          <ul className="issuelist">{chosen.map(r => <li key={r.c.id}><span>{r.c.name}</span><b className="num">{money(r.total, { bare: true })}</b></li>)}</ul>
          <p className="fine">Numbers are never reused.</p>
        </>
      )}
      <Confirm open={confirm} danger title={'Issue ' + chosen.length + ' invoices?'} confirmLabel="Issue invoices"
        body={<p>This cannot be undone. <b className="num">{money(sum)}</b> across <span className="num">{chosen.length}</span> clients becomes permanent record.</p>}
        onClose={() => setConfirm(false)} onConfirm={() => { setConfirm(false); setStep(1); onClose(); app.toast(chosen.length + ' invoices issued'); }} />
    </Sheet>
  );
}

/* ================= Client P&L ================= */
function PnL({ app }) {
  const rows = T.clients.map(c => {
    const rev = c.retainer;
    const exp = T.expenses.filter(e => e.client === c.id && e.paidBy === 'TMD').reduce((s, e) => s + e.amount, 0);
    const share = app.dels.filter(d => d.client === c.id).length;
    const totalWork = app.dels.length;
    const peopleCost = Math.round((T.people.reduce((s, p) => s + (p.cost || 0), 0)) * (share / totalWork));
    const margin = rev - exp - peopleCost;
    return { c, rev, exp, peopleCost, margin, share };
  });
  const tot = rows.reduce((a, r) => ({ rev: a.rev + r.rev, exp: a.exp + r.exp, pc: a.pc + r.peopleCost, m: a.m + r.margin }), { rev: 0, exp: 0, pc: 0, m: 0 });
  return (
    <div className="page">
      <PageHead title="Client profit" sub={monthLabel(0, true) + ' · retainer against what the work actually costs'} />
      <table className="tbl">
        <thead><tr><th>Client</th><th className="r">Retainer</th><th className="r">TMD-paid expenses</th><th className="r">People cost <em className="est">est.</em></th><th className="r">Margin</th><th className="r">%</th></tr></thead>
        <tbody>{rows.map(r => (
          <tr key={r.c.id} onClick={() => app.go('client:' + r.c.id)} tabIndex={0}>
            <td className="strong"><span className="cl-dot" data-kind={r.c.kind}></span>{r.c.name}</td>
            <td className="r num">{money(r.rev, { bare: true })}</td>
            <td className="r num">{money(r.exp, { bare: true })}</td>
            <td className="r num muted">{money(r.peopleCost, { bare: true })}</td>
            <td className={'r num strong' + (r.margin < 0 ? ' neg' : '')}>{money(r.margin, { bare: true })}</td>
            <td className={'r num' + (r.margin < 0 ? ' neg' : '')}>{Math.round(r.margin / r.rev * 100)}%</td>
          </tr>
        ))}</tbody>
        <tfoot><tr><td className="strong">All clients</td><td className="r num">{money(tot.rev, { bare: true })}</td><td className="r num">{money(tot.exp, { bare: true })}</td><td className="r num">{money(tot.pc, { bare: true })}</td><td className="r num strong">{money(tot.m, { bare: true })}</td><td className="r num">{Math.round(tot.m / tot.rev * 100)}%</td></tr></tfoot>
      </table>
      <p className="fine">People cost is an estimate. It splits salaries by share of deliverables this month, not by hours — the desk does not track hours. Treat the ranking as real and the exact figure as approximate.</p>
    </div>
  );
}

/* ================= Settings — pipeline editor ================= */
function Pipelines({ app }) {
  const [tid, setTid] = uSt('reel');
  const t = typeOf(tid);
  const [stages, setStages] = uSt(t.stages);
  React.useEffect(() => { setStages(typeOf(tid).stages); }, [tid]);
  const move = (i, dir) => setStages(s => { const n = s.slice(); const j = i + dir; if (j < 0 || j >= n.length) return s; const x = n[i]; n[i] = n[j]; n[j] = x; return n; });
  const setSem = (i, sem) => setStages(s => s.map((x, n) => n === i ? Object.assign({}, x, { sem }) : x));
  const inUse = app.dels.filter(d => d.type === tid).length;
  return (
    <div className="page">
      <PageHead title="Pipelines" sub="Each deliverable type has its own stages. Every stage must map to one of five states — that mapping is what the boards, the dashboard and every status chip read." />
      <div className="typetabs">{T.types.map(x => <button key={x.id} type="button" className={'tt' + (x.id === tid ? ' on' : '')} onClick={() => setTid(x.id)}>{x.name}</button>)}</div>
      <div className="notice"><b><span className="num">{inUse}</span> live deliverables use this pipeline.</b><span>Renaming a stage renames it on their cards. Deleting one asks where its work should go first.</span></div>
      <div className="pipe">
        <div className="pipe-h"><span>Stage</span><span>Maps to</span><span>Approval</span><span className="r">Order</span></div>
        {stages.map((s, i) => (
          <div key={s.name} className="pipe-r">
            <input className="pipe-name" defaultValue={s.name} />
            <div className="semsel">{['todo', 'doing', 'waiting', 'done', 'blocked'].map(k => (
              <button key={k} type="button" className={'sem sem-' + k + (s.sem === k ? ' on' : '')} onClick={() => setSem(i, k)}>{T.SEMANTIC[k].label}</button>
            ))}</div>
            <div className="apsel">{s.approval ? <Tag>{s.approval === 'client' ? 'Client' : 'Internal'}</Tag> : <span className="muted">None</span>}</div>
            <div className="r ord"><button type="button" onClick={() => move(i, -1)} aria-label="Move up">↑</button><button type="button" onClick={() => move(i, 1)} aria-label="Move down">↓</button></div>
          </div>
        ))}
      </div>
      <div className="row gap8 mt"><Btn kind="secondary">Add stage</Btn><Btn kind="primary" onClick={() => app.toast('Pipeline saved', true)}>Save pipeline</Btn></div>
      <Eyebrow n="01">The five states</Eyebrow>
      <div className="legend">
        {['todo', 'doing', 'waiting', 'done', 'blocked'].map(k => (
          <div key={k} className="lg"><Status sem={k} stage={T.SEMANTIC[k].label} /><p>{{
            todo: 'Requested, queued, briefed — real work has not started.',
            doing: 'Someone at the desk is working on it right now.',
            waiting: 'Nothing can move until a person outside the work responds. The loudest state on purpose — this is where agency work dies.',
            done: 'Published, delivered, live. It leaves the board.',
            blocked: 'Stopped by something that is not a queue: no consent, no budget, no rate card.'
          }[k]}</p></div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Expenses, AddExpense, Invoices, InvoiceDetail, BatchIssue, PnL, Pipelines, invTotal, invPaid });