/* Shared UI primitives */
const { useState, useMemo, useEffect, useRef } = React;

const PILL_CLASS = {
  Paid: 'paid', Open: 'open', Partial: 'partial', Overdue: 'overdue', Draft: 'draft',
  Cancelled: 'cancelled', Active: 'active', Completed: 'completed', Invoiced: 'open', Inactive: 'inactive',
  Blocked: 'overdue', 'Partly completed': 'partial', 'Ready to finish': 'active',
  Passed: 'active', Failed: 'overdue', Recorded: 'open', Skipped: 'draft',
};
function Pill({ children, kind, sm }) {
  const cls = PILL_CLASS[kind] || '';
  return <span className={`pill ${cls} ${sm ? 'sm' : ''}`}><span className="dot" />{children || kind}</span>;
}

// Deterministic avatar color from a string
const AVATAR_COLORS = ['#2856c4', '#0e7490', '#6d4bd0', '#b45309', '#15803d', '#9d2c5b', '#1d4ed8', '#7c5800'];
function avatarColor(s) {
  let h = 0; for (let i = 0; i < (s || '').length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
  return AVATAR_COLORS[h % AVATAR_COLORS.length];
}
function initials(name) {
  return (name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase();
}
function Avatar({ name, square }) {
  return <span className={square ? 'avatar-sq' : 'avatar-sq'} style={{ background: avatarColor(name), borderRadius: square ? 6 : '50%' }}>{initials(name)}</span>;
}

function KPI({ label, value, delta, icon, tone, deltaTone }) {
  return (
    <div className={`kpi ${tone ? 'is-' + tone : ''}`}>
      <span className="accent" />
      <div className="label">{icon && <Icon name={icon} size={13} />}{label}</div>
      <div className="value">{value}</div>
      {delta && <div className="delta" style={deltaTone ? { color: `var(--${deltaTone})` } : null}>{delta}</div>}
    </div>
  );
}

// Horizontal proportional bar made of colored segments
function StackBar({ segments }) {
  const total = segments.reduce((s, x) => s + x.value, 0) || 1;
  return (
    <div className="aging-bar">
      {segments.map((s, i) => (
        s.value > 0 ? <span key={i} style={{ flex: s.value, background: s.color }} title={`${s.label}`}>
          {(s.value / total) > 0.1 ? s.short : ''}
        </span> : null
      ))}
    </div>
  );
}

function MiniBar({ segments }) {
  return <div className="minibar">{segments.map((s, i) => <span key={i} style={{ flex: s.value, background: s.color }} />)}</div>;
}

function Empty({ children }) { return <div className="empty">{children}</div>; }

function Toolbar({ children }) { return <div className="toolbar">{children}</div>; }

function Segmented({ options, value, onChange }) {
  return (
    <div className="segmented">
      {options.map((o) => {
        const v = typeof o === 'string' ? o : o.value;
        const l = typeof o === 'string' ? o : o.label;
        return <button key={v} className={v === value ? 'on' : ''} onClick={() => onChange(v)}>{l}</button>;
      })}
    </div>
  );
}

function YearStepper({ year, onChange }) {
  return (
    <div className="stepper">
      <button onClick={() => onChange(year - 1)}><Icon name="chevL" size={14} /></button>
      <span className="yr">{year}</span>
      <button onClick={() => onChange(year + 1)}><Icon name="chevR" size={14} /></button>
    </div>
  );
}

function SearchBox({ value, onChange, placeholder }) {
  return (
    <div className="search">
      <Icon name="search" size={14} />
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder || 'Search…'} />
    </div>
  );
}

function Panel({ title, sub, actions, children, flush, style }) {
  return (
    <section className="panel" style={style}>
      {(title || actions) && (
        <div className="panel-head">
          <div>
            <h2>{title}</h2>
            {sub && <div className="sub">{sub}</div>}
          </div>
          {actions && <div className="actions">{actions}</div>}
        </div>
      )}
      <div className={`panel-body ${flush ? 'flush' : ''}`}>{children}</div>
    </section>
  );
}

function TodoRemarksDrawer({ item, categoryName, open, onClose, onSave }) {
  const [remarks, setRemarks] = useState('');
  useEffect(() => {
    if (open) setRemarks((item && item.remarks) || '');
  }, [open, item && item.id]);

  if (!open || !item) return null;

  const title = item.title || 'Untitled todo';
  return (
    <React.Fragment>
      <div className="overlay todo-remarks-overlay" onClick={onClose} />
      <aside className="drawer todo-remarks-drawer">
        <header>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2>Todo remarks</h2>
            <div className="sub">{categoryName || item.category || 'Todo'} · {title}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={17} /></button>
        </header>
        <div className="body">
          <div className="field">
            <label>Remarks</label>
            <textarea className="inp todo-remarks-area" autoFocus rows="12" value={remarks} onChange={(event) => setRemarks(event.target.value)} placeholder="Add implementation notes, context, or handoff details." />
          </div>
        </div>
        <footer>
          <button className="btn ghost" onClick={onClose}>Cancel</button>
          <button className="btn" onClick={() => onSave(remarks)}><Icon name="check" size={14} />Apply remarks</button>
        </footer>
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { Pill, Avatar, avatarColor, initials, KPI, StackBar, MiniBar, Empty, Toolbar, Segmented, YearStepper, SearchBox, Panel, TodoRemarksDrawer });