/* TMD Portal — shared helpers and primitives. */
const { useState, useMemo, useRef, useEffect } = React;
const DS = window.TheMarketingDeskDesignSystem_5795c6;
const T = window.TMD;

const byId = (arr, id) => arr.find(x => x.id === id) || null;
const client = id => byId(T.clients, id) || { name: '—', kind: 'internal' };
const person = id => byId(T.people, id) || { name: 'Unassigned', initials: '—', role: '—' };
const typeOf = id => byId(T.types, id) || { name: '—', stages: [] };
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const DAYS_LONG = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// Month helpers relative to today (offset 0 = this month, -1 = last month).
const monthOf = offset => { const d = new Date(T.TODAY + 'T00:00:00'); d.setDate(1); d.setMonth(d.getMonth() + (offset || 0)); return d; };
const monthLabel = (offset, withYear) => { const d = monthOf(offset); return MONTHS_LONG[d.getMonth()] + (withYear ? ' ' + d.getFullYear() : ''); };
const monthStart = offset => { const d = monthOf(offset); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-01'; };
const monthEnd = offset => { const d = monthOf((offset || 0) + 1); d.setDate(0); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); };
const isoShift = days => { const d = new Date(T.TODAY + 'T00:00:00'); d.setDate(d.getDate() + days); return d.toISOString().slice(0, 10); };
const longToday = () => { const d = new Date(T.TODAY + 'T00:00:00'); return DAYS_LONG[d.getDay()] + ' ' + d.getDate() + ' ' + MONTHS_LONG[d.getMonth()] + ' ' + d.getFullYear(); };

function money(n, opts) {
  const o = opts || {};
  const s = Math.abs(Math.round(n)).toLocaleString('en-US');
  return (n < 0 ? '−' : '') + (o.bare ? '' : 'LKR ') + s;
}
function fmtDate(iso, withYear) {
  if (!iso) return '—';
  const p = iso.split('-');
  return Number(p[2]) + ' ' + MONTHS[Number(p[1]) - 1] + (withYear ? ' ' + p[0] : '');
}
function dayDiff(iso, from) {
  const a = new Date((from || T.TODAY) + 'T00:00:00'), b = new Date(iso + 'T00:00:00');
  return Math.round((b - a) / 86400000);
}
function stageMeta(d) {
  if (d.stage === 'Blocked') return { sem: 'blocked', name: 'Blocked', approval: null };
  const st = typeOf(d.type).stages.find(s => s.name === d.stage);
  return st ? { sem: st.sem, name: st.name, approval: st.approval || null } : { sem: 'todo', name: d.stage, approval: null };
}
const isLive = d => stageMeta(d).sem !== 'done';
const isOverdue = d => isLive(d) && dayDiff(d.due) < 0;
const waitingOn = d => {
  const m = stageMeta(d);
  if (m.approval === 'client') return client(d.client).contacts && client(d.client).kind === 'external' ? client(d.client).contacts[0].name : client(d.client).name;
  if (m.approval === 'internal') return 'Safiya';
  return null;
};

/* ---------- status: five semantic states applied to arbitrary stages ---------- */
function Status({ d, stage, sem, size }) {
  const m = d ? stageMeta(d) : { sem: sem, name: stage, approval: null };
  const who = d ? waitingOn(d) : null;
  const cls = 'st st-' + m.sem + (size === 'sm' ? ' st-sm' : '');
  return (
    <span className={cls} title={T.SEMANTIC[m.sem].label}>
      <i className="st-dot"></i>{m.name}{m.sem === 'waiting' && who ? <em className="st-who">{who}</em> : null}
    </span>
  );
}

/* ---------- one consistent overdue / date treatment ---------- */
function DateCell({ iso, live }) {
  if (!iso) return <span className="muted">—</span>;
  const dd = dayDiff(iso);
  const over = live !== false && dd < 0;
  if (over) return <span className="od"><b className="num">{fmtDate(iso)}</b> <span className="od-n num">{Math.abs(dd)}d over</span></span>;
  const label = dd === 0 ? 'today' : dd === 1 ? 'tomorrow' : null;
  return <span className="num datecell">{fmtDate(iso)}{label ? <em className="dc-rel">{label}</em> : null}</span>;
}

function Avatar({ id, size }) {
  const p = person(id);
  const s = size || 26;
  return <span className="av" style={{ width: s, height: s, fontSize: Math.round(s * 0.38) }} title={p.name}>{p.initials}</span>;
}
function Who({ id, hideName }) {
  const p = person(id);
  return <span className="who"><Avatar id={id} />{hideName ? null : <span>{p.name}</span>}</span>;
}

/* Cocogoose renders digits as a trial watermark — every numeral must fall to Poppins. */
function Dsp({ t }) {
  if (typeof t !== 'string') return t || null;
  return <>{t.split(/(\d+)/).map((p, i) => /^\d+$/.test(p) ? <span key={i} className="num">{p}</span> : p)}</>;
}

function Eyebrow({ children, n }) {
  return <DS.Eyebrow tone="muted" className="eyebrow">{n ? <em className="num">{n}</em> : null}{children}</DS.Eyebrow>;
}
function Mark({ size, variant }) {
  return <DS.Wordmark variant={variant || 'primary'} size={size || 21} />;
}
function Tag({ children }) {
  return <DS.Chip style={{ fontSize: 'var(--fs-micro)', fontWeight: 600, padding: 'var(--space-1) var(--space-2)', color: 'var(--text-muted)' }}>{children}</DS.Chip>;
}
function PageHead({ title, sub, actions, count }) {
  return (
    <div className="pagehead">
      <div><h1><Dsp t={title} />{count != null ? <em className="num ph-count">{count}</em> : null}</h1>{sub ? <p>{sub}</p> : null}</div>
      {actions ? <div className="row gap8">{actions}</div> : null}
    </div>
  );
}
function Btn({ children, kind, onClick, disabled, sm, full }) {
  const variant = kind === 'secondary' ? 'secondary' : kind === 'ghost' ? 'ghost' : 'ink';
  const style = { minHeight: sm ? 34 : 40, padding: sm ? 'var(--space-2) var(--space-4)' : 'var(--space-3) var(--space-5)', whiteSpace: 'nowrap', fontSize: sm ? 'var(--fs-meta)' : 'var(--fs-ui-sm)' };
  if (full) style.width = '100%';
  if (kind === 'danger') { style.background = 'var(--desk-caution)'; style.color = 'var(--desk-white)'; }
  return <DS.Button className="btn" variant={variant} disabled={disabled} onClick={onClick} style={style}>{children}</DS.Button>;
}
function Seg({ options, value, onChange }) {
  return (
    <div className="seg" role="tablist">
      {options.map(o => {
        const v = typeof o === 'string' ? o : o.v, l = typeof o === 'string' ? o : o.l;
        return <button key={v} type="button" role="tab" aria-selected={v === value} className={'seg-b' + (v === value ? ' on' : '')} onClick={() => onChange(v)}>{l}</button>;
      })}
    </div>
  );
}
function Filter({ label, options, value, onChange }) {
  return (
    <label className="filter">
      <span>{label}</span>
      <select value={value} onChange={e => onChange(e.target.value)}>{options.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}</select>
    </label>
  );
}
function Empty({ title, hint, action }) {
  return <div className="empty"><b>{title}</b>{hint ? <p>{hint}</p> : null}{action || null}</div>;
}
function Stat({ label, value, sub, tone, onClick }) {
  return (
    <button type="button" className={'stat' + (tone ? ' stat-' + tone : '')} onClick={onClick}>
      <span className="stat-l">{label}</span>
      <span className="stat-v num">{value}</span>
      {sub ? <span className="stat-s">{sub}</span> : null}
    </button>
  );
}
function Sheet({ open, onClose, title, children, footer }) {
  if (!open) return null;
  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()} role="dialog" aria-label={title}>
        <div className="sheet-h"><b>{title}</b><button type="button" className="x" onClick={onClose} aria-label="Close">Close</button></div>
        <div className="sheet-b">{children}</div>
        {footer ? <div className="sheet-f">{footer}</div> : null}
      </div>
    </div>
  );
}
function Confirm({ open, title, body, danger, confirmLabel, onConfirm, onClose }) {
  const [typed, setTyped] = useState('');
  useEffect(() => { if (open) setTyped(''); }, [open]);
  if (!open) return null;
  const need = danger ? 'ISSUE' : null;
  return (
    <div className="scrim center" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} role="dialog" aria-label={title}>
        <h3><Dsp t={title} /></h3>
        <div className="modal-b">{body}</div>
        {need ? <label className="tf"><span>Type {need} to continue</span><input value={typed} onChange={e => setTyped(e.target.value)} placeholder={need} /></label> : null}
        <div className="modal-f">
          <Btn kind="secondary" onClick={onClose}>Cancel</Btn>
          <Btn kind={danger ? 'danger' : 'ink'} disabled={need ? typed.trim().toUpperCase() !== need : false} onClick={onConfirm}>{confirmLabel}</Btn>
        </div>
      </div>
    </div>
  );
}
function Toast({ toast, onUndo }) {
  if (!toast) return null;
  return <div className="toast"><span>{toast.msg}</span>{toast.undo ? <button type="button" onClick={onUndo}>Undo</button> : null}</div>;
}
function Denied({ role, onBack }) {
  return (
    <div className="denied">
      <Eyebrow>No access</Eyebrow>
      <h2>Money is owner and manager only.</h2>
      <p>Your role is <b>{role}</b>. Invoices, expenses and client profit are not part of it. If that is wrong, ask Abidh to change your role in Settings — nothing here is hidden by accident.</p>
      <Btn onClick={onBack}>Back to my tasks</Btn>
    </div>
  );
}

Object.assign(window, { T, DS, Dsp, Mark, Tag, byId, client, person, typeOf, money, fmtDate, dayDiff, stageMeta, isLive, isOverdue, waitingOn, Status, DateCell, Avatar, Who, Eyebrow, PageHead, Btn, Seg, Filter, Empty, Stat, Sheet, Confirm, Toast, Denied, MONTHS, MONTHS_LONG, monthLabel, monthStart, monthEnd, isoShift, longToday });