// Admin: Analytics, Team, Directory, Audit log, Settings
const monthKey = (d) => new Date(d).toLocaleDateString('en-US', { month: 'short' });
const Analytics = ({ st, nav }) => {
  const [range, setRange] = useState(90);
  const since = new Date(TODAY.getTime() - 86400000 * range);
  const inRange = st.orders.filter(o => o.split && new Date(o.split.lockedAt) >= since && o.status !== 'Cancelled');
  const months = []; for (let i = Math.ceil(range / 30) - 1; i >= 0; i--) { const d = new Date(TODAY); d.setMonth(d.getMonth() - i); months.push({ k: monthKey(d), y: d.getFullYear(), m: d.getMonth() }); }
  const trend = months.map(m => { const os = inRange.filter(o => { const d = new Date(o.split.lockedAt); return d.getMonth() === m.m && d.getFullYear() === m.y; }); return { l: m.k, v: os.reduce((s, o) => s + o.split.margin, 0), billed: os.reduce((s, o) => s + o.split.total, 0), n: os.length }; });
  const billed = inRange.reduce((s, o) => s + o.split.total, 0), margin = inRange.reduce((s, o) => s + o.split.margin, 0);
  const pipeline = STATUSES.filter(s => !CLOSED.includes(s)).map(s => ({ l: t(s), v: st.orders.filter(o => o.status === s).length, c: s === 'Stuck' ? 'var(--color-semantic-error)' : s === 'Draft' ? 'var(--color-stone)' : undefined })).filter(x => x.v);
  const pipeValue = STATUSES.filter(s => !CLOSED.includes(s) && s !== 'Draft').map(s => ({ l: t(s), v: st.orders.filter(o => o.status === s && o.split).reduce((a, o) => a + o.split.total, 0) })).filter(x => x.v);
  const closedC = st.containers.filter(c => c.status === 'Delivered' || isPast(c.eta));
  const delays = st.containers.filter(c => c.status !== 'Booked').map(c => { const ref = c.status === 'Delivered' ? new Date(c.updatedAt) : TODAY; const delay = Math.max(0, Math.round((ref - new Date(c.eta + 'T12:00:00')) / 86400000)); return { c, delay }; });
  const late = delays.filter(d => d.delay > 0); const onTime = delays.length ? Math.round((delays.length - late.length) / delays.length * 100) : 100;
  const avgDelay = late.length ? Math.round(late.reduce((s, d) => s + d.delay, 0) / late.length) : 0;
  const delivered = st.orders.filter(o => o.status === 'Delivered'); const lateOrders = delivered.filter(o => 'deliveredLate' in o ? o.deliveredLate : new Date(o.updatedAt) > new Date(o.requestedDate + 'T12:00:00'));
  const byClient = st.clients.map(c => { const os = inRange.filter(o => o.clientId === c.id); const tot = os.reduce((s, o) => s + o.split.total, 0); const m = os.reduce((s, o) => s + o.split.margin, 0); return { l: c.name, v: m, tot, n: os.length }; }).sort((a, b) => b.v - a.v);
  const bySupplier = st.suppliers.map(s => { const os = inRange.filter(o => o.supplierId === s.id); return { l: s.name, v: os.reduce((a, o) => a + o.split.supplier, 0), n: os.length }; }).filter(x => x.n).sort((a, b) => b.v - a.v);
  return <div className="page">
    <PageHead title="Analytics" kicker={`${fdateY(since)} – ${fdateY(TODAY)}`}><div className="seg">{[30, 90, 180].map(r => <button key={r} className={range === r ? 'on' : ''} onClick={() => setRange(r)}>{r}d</button>)}</div></PageHead>
    <div className="stats" data-tour="an-stats">
      <Stat label="Billed" value={fmt0(billed)} sub={`${inRange.length} confirmed orders`}></Stat>
      <Stat label="Margin" value={fmt0(margin)} sub={billed ? `${Math.round(margin / billed * 100)}% of billed` : ''}></Stat>
      <Stat label="Containers on time" value={onTime + '%'} sub={late.length ? `${late.length} late · avg ${avgDelay}d` : 'no delays'} tone={onTime < 70 ? 'red' : ''}></Stat>
      <Stat label="Orders delivered on date" value={delivered.length ? Math.round((delivered.length - lateOrders.length) / delivered.length * 100) + '%' : '—'} sub={`${lateOrders.length} of ${delivered.length} late`}></Stat>
    </div>
    <div className="two two-split">
      <Card title="Margin by month" tour="an-margin"><Bars data={trend} fmtV={fmt0}></Bars><div className="legend">{trend.map(m => <span key={m.l}><b>{m.l}</b> {m.n} orders · billed {fmt0(m.billed)}</span>)}</div></Card>
      <Card title="Pipeline by status" tour="an-pipeline"><HBars data={pipeline}></HBars><p className="mute small">Open value by stage</p><HBars data={pipeValue} fmtV={fmt0}></HBars></Card>
    </div>
    <div className="two two-split">
      <Card title="Container delays" tour="an-delays"><div className="delay-wrap"><Donut pct={onTime} label="on time"></Donut>
        <ul className="sl">{delays.sort((a, b) => b.delay - a.delay).slice(0, 6).map(({ c, delay }) => <li key={c.id} className="row" onClick={() => nav('container', { id: c.id })}><span><b className="mono">{c.id}</b><span className="mute"> · {t(c.status)}</span></span>{delay ? <Pill tone={delay > 14 ? 'red' : 'amber'}>+{delay}d</Pill> : <Pill tone="green">On time</Pill>}</li>)}</ul></div></Card>
      <div className="stack">
        <Card title="Margin by client"><HBars data={byClient} fmtV={fmt0}></HBars></Card>
        <Card title="Spend by supplier"><HBars data={bySupplier} fmtV={fmt0}></HBars></Card>
      </div>
    </div>
  </div>;
};

const ROLE_LABEL = { admin: 'Admin', manager: 'Manager', finance: 'Finance', client: 'Client' };
const Team = ({ st, act, user }) => {
  const [inv, setInv] = useState(null);
  return <div className="page"><PageHead title="Team" kicker="Users & roles"><Btn v="primary" icon={I.plus} onClick={() => setInv({ name: '', email: '', role: 'manager' })} tour="invite">Invite user</Btn></PageHead>
    <Card pad={false} tour="team-table"><div className="tw"><table className="t"><thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th>Joined</th><th></th></tr></thead><tbody>
      {st.users.map(u => <tr key={u.id} className={u.active ? '' : 'row-off'}><td><b>{u.name}</b>{u.id === user.id && <span className="mute"> (you)</span>}</td><td className="mono">{u.email}</td><td><span className="inline-sel-sm"><Select value={u.role} onChange={v => act.setRole(u.id, v)} options={['admin','manager','finance'].map(r => ({ id: r, name: ROLE_LABEL[r] }))} disabled={u.id === user.id}></Select></span></td><td>{u.active ? <Pill tone="green">Active</Pill> : <Pill>Deactivated</Pill>}</td><td>{fdateY(u.joined)}</td>
        <td className="num">{u.id !== user.id && <Btn sm onClick={() => act.toggleUser(u.id)}>{u.active ? 'Deactivate' : 'Reactivate'}</Btn>}</td></tr>)}
    </tbody></table></div></Card>
    <Card title="Role permissions"><div className="perm">
      {[['Admin','Everything below, plus invite/deactivate users, edit locked splits, cancel/delete orders, settings, full export'],['Manager','Create and edit orders and containers, confirm, mark paid, post updates, analytics'],['Finance','View splits and margin, export supplier payments, read-only orders'],['Client','Read-only portal: own orders, containers, invoices, notifications']].map(([r, d]) => <div key={r}><b>{r}</b><span>{d}</span></div>)}
    </div></Card>
    {inv && <Modal title="Invite user" onClose={() => setInv(null)}><div className="stack-sm">
      <Field label="Full name" req><input className="inp" value={inv.name} onChange={e => setInv({ ...inv, name: e.target.value })} placeholder="Sophie Lane"></input></Field>
      <Field label="Email" req><input className="inp" type="email" value={inv.email} onChange={e => setInv({ ...inv, email: e.target.value })} placeholder="sophie@soflolg.com"></input></Field>
      <Field label="Role"><Select value={inv.role} onChange={v => setInv({ ...inv, role: v })} options={['admin','manager','finance'].map(r => ({ id: r, name: ROLE_LABEL[r] }))}></Select></Field>
      <div className="admin-row"><Btn v="primary" disabled={!inv.name.trim() || !/@/.test(inv.email)} onClick={() => { act.inviteUser(inv); setInv(null); }}>Send invite</Btn><Btn onClick={() => setInv(null)}>Cancel</Btn></div>
    </div></Modal>}
  </div>;
};

const Directory = ({ st, act, nav }) => {
  const [edit, setEdit] = useState(null);
  const save = () => { act.saveParty(edit); setEdit(null); };
  return <div className="page"><PageHead title="Clients & suppliers" kicker="Directory"><Btn v="primary" icon={I.plus} onClick={() => setEdit({ kind: 'client', name: '', contact: '', email: '' })}>New client</Btn><Btn icon={I.plus} onClick={() => setEdit({ kind: 'supplier', name: '', country: '' })}>New supplier</Btn></PageHead>
    <div className="two two-split">
      <Card title="Clients" pad={false}><div className="tw"><table className="t"><thead><tr><th>Client</th><th>Contact</th><th>Portal login</th><th className="num">Orders</th><th></th></tr></thead><tbody>
        {st.clients.map(c => <tr key={c.id}><td><b>{c.name}</b></td><td>{c.contact}</td><td className="mono">{c.email}</td><td className="num"><button className="lnk" onClick={() => nav('orders', { client: c.id })}>{st.orders.filter(o => o.clientId === c.id).length}</button></td><td className="num"><Btn sm onClick={() => setEdit({ kind: 'client', ...c })}>Edit</Btn></td></tr>)}
      </tbody></table></div></Card>
      <Card title="Suppliers" pad={false}><div className="tw"><table className="t"><thead><tr><th>Supplier</th><th>Country</th><th className="num">Orders</th><th></th></tr></thead><tbody>
        {st.suppliers.map(s => <tr key={s.id}><td><b>{s.name}</b></td><td>{s.country}</td><td className="num">{st.orders.filter(o => o.supplierId === s.id).length}</td><td className="num"><Btn sm onClick={() => setEdit({ kind: 'supplier', ...s })}>Edit</Btn></td></tr>)}
      </tbody></table></div></Card>
    </div>
    {edit && <Modal title={`${edit.id ? 'Edit' : 'New'} ${edit.kind}`} onClose={() => setEdit(null)}><div className="stack-sm">
      <Field label="Name" req><input className="inp" value={edit.name} onChange={e => setEdit({ ...edit, name: e.target.value })}></input></Field>
      {edit.kind === 'client' ? <><Field label="Contact"><input className="inp" value={edit.contact} onChange={e => setEdit({ ...edit, contact: e.target.value })}></input></Field><Field label="Portal email" hint="Client signs in with this address"><input className="inp" value={edit.email} onChange={e => setEdit({ ...edit, email: e.target.value })}></input></Field></>
        : <Field label="Country"><input className="inp" value={edit.country} onChange={e => setEdit({ ...edit, country: e.target.value })}></input></Field>}
      <div className="admin-row"><Btn v="primary" disabled={!edit.name.trim()} onClick={save}>Save</Btn><Btn onClick={() => setEdit(null)}>Cancel</Btn></div>
    </div></Modal>}
  </div>;
};

const AuditLog = ({ st, nav, q }) => {
  const [kind, setKind] = useState('');
  const rows = st.audit.filter(a => (!kind || a.kind === kind) && (!q || (a.action + a.target + a.by).toLowerCase().includes(q.toLowerCase())));
  const exportCSV = () => download('soflolg-audit.csv', toCSV([['When','Who','Role','Action','Target','Type'], ...rows.map(a => [new Date(a.at).toISOString(), a.by, a.role, a.action, a.target, a.kind])]));
  return <div className="page"><PageHead title="Audit log" kicker={`${rows.length} entries`}><Btn icon={I.download} onClick={exportCSV}>Export CSV</Btn></PageHead>
    <div className="filters">{[['','All'],['order','Orders'],['container','Containers'],['payment','Payments'],['team','Team'],['settings','Settings'],['admin','Admin overrides']].map(([k, l]) => <button key={k} className={`chip${kind === k ? ' on' : ''}`} onClick={() => setKind(k)}>{l}</button>)}</div>
    <Card pad={false} tour="audit-table"><div className="tw"><table className="t"><thead><tr><th>When</th><th>Who</th><th>Action</th><th>Target</th><th>Type</th></tr></thead><tbody>
      {rows.slice(0, 200).map((a, i) => <tr key={i} className={a.kind === 'admin' ? 'row row-high' : 'row'} onClick={() => { if (a.kind === 'order' || a.kind === 'admin' || a.kind === 'payment') nav('order', { id: a.target }); if (a.kind === 'container') nav('container', { id: a.target }); }}>
        <td className="mono mute">{new Date(a.at).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</td><td>{a.by} <span className="mute">· {ROLE_LABEL[a.role] || a.role}</span></td><td className="td-desc">{a.action}</td><td className="mono">{a.target}</td><td><Pill tone={a.kind === 'admin' ? 'red' : 'tag'}>{a.kind}</Pill></td></tr>)}
    </tbody></table></div></Card></div>;
};

const Settings = ({ st, act }) => {
  const [s, setS] = useState({ ...st.settings }); const dirty = JSON.stringify(s) !== JSON.stringify(st.settings);
  return <div className="page"><PageHead title="Settings" kicker="Workspace"><Btn v="primary" disabled={!dirty} onClick={() => act.saveSettings(s)}>Save changes</Btn></PageHead>
    <div className="two two-split"><div className="stack">
      <Card title="Company"><div className="form-grid"><Field label="Company name"><input className="inp" value={s.company} onChange={e => setS({ ...s, company: e.target.value })}></input></Field>
        <Field label="Currency" hint="Display only; no auto-conversion in MVP"><Select value={s.currency} onChange={v => setS({ ...s, currency: v, symbol: { USD: '$', EUR: '€', MXN: 'MX$' }[v] })} options={['USD','EUR','MXN']}></Select></Field>
        <Field label="Payment terms" hint="Invoice due date = issue date + net days"><div className="range"><input type="range" min="0" max="60" step="1" value={s.netDays ?? 14} onChange={e => setS({ ...s, netDays: +e.target.value })}></input><b>Net {s.netDays ?? 14}</b></div></Field></div></Card>
      <Card title="Risk thresholds" tour="settings-stale"><div className="form-grid">
        <Field label="Container is stale after" hint="Days without a status update before it is flagged on the dashboard"><div className="range"><input type="range" min="1" max="14" value={s.staleDays} onChange={e => setS({ ...s, staleDays: +e.target.value })}></input><b>{s.staleDays}d</b></div></Field>
        <Field label="Overdue grace period" hint="Days after requested delivery before an order counts as late"><div className="range"><input type="range" min="0" max="14" value={s.overdueGrace} onChange={e => setS({ ...s, overdueGrace: +e.target.value })}></input><b>{s.overdueGrace}d</b></div></Field>
      </div></Card>
    </div>
    <Card title="Data export"><p className="small">Everything in the workspace — orders, splits, containers, notes, users, audit log — as CSV files plus a JSON snapshot.</p>
      <div className="admin-row"><Btn v="dark" icon={I.download} onClick={act.exportAll}>Export full data</Btn></div>
      <ul className="sl small"><li><span>Orders & line items</span><span className="mono">{st.orders.length}</span></li><li><span>Payment splits</span><span className="mono">{st.orders.filter(o => o.split).length}</span></li><li><span>Containers</span><span className="mono">{st.containers.length}</span></li><li><span>Audit entries</span><span className="mono">{st.audit.length}</span></li></ul></Card>
    </div></div>;
};

Object.assign(window, { Analytics, Team, Directory, AuditLog, Settings, ROLE_LABEL });