/* ============================================
   SHARED COMPONENTS
   ============================================ */

// ── AVATAR ──
const Avatar = ({ user, size = 'sm', tooltip = true }) => {
  if (!user) return null;
  const u = typeof user === 'string' ? getUser(user) : user;
  if (!u) return (
    <span className={`av av-${size}`} style={{ background: '#94A3B8' }}>?</span>
  );
  return (
    <span
      className={`av av-${size}`}
      style={{ background: u.color }}
      title={tooltip ? u.name : undefined}
    >
      {initials(u.name)}
    </span>
  );
};

const AvatarStack = ({ users, max = 3, size = 'sm' }) => {
  const shown = users.slice(0, max);
  const more = users.length - shown.length;
  const sizeMap = { xs: 18, sm: 22, md: 28, lg: 36 };
  const px = sizeMap[size] || 22;
  return (
    <span className="av-stack">
      {shown.map((u, i) => <Avatar key={i} user={u} size={size} />)}
      {more > 0 && (
        <span className="av-stack-more" style={{ width: px, height: px }}>+{more}</span>
      )}
    </span>
  );
};

// ── BADGES ──
const PriorityBadge = ({ priority }) => {
  if (!priority) return null;
  return (
    <span className={`badge badge-prio prio-${priority}`}>
      <span className="dot" />
      {priority}
    </span>
  );
};

const ProjectChip = ({ projectId, size = 'sm' }) => {
  const p = getProject(projectId);
  if (!p) return null;
  const styles = {
    fontSize: size === 'sm' ? 11 : 12,
  };
  return (
    <span className="card-proj" style={{ background: `${p.color}1A`, color: p.color, ...styles }}>
      <span className="dot" style={{ width: 6, height: 6, borderRadius: '50%', background: p.color, display: 'inline-block', flexShrink: 0 }} />
      {p.name}
    </span>
  );
};

const StatusPill = ({ status, onClick }) => {
  const s = getStatus(status);
  if (!s) return null;
  return (
    <span className="detail-status-pill" onClick={onClick} style={{ borderColor: `${s.color}66`, background: `${s.color}14`, color: s.color }}>
      <span className="dot" style={{ background: s.color }} />
      {s.label}
      {onClick && <Icon name="chevronDown" size={12} />}
    </span>
  );
};

// ── DUE PILL ──
const DuePill = ({ date, status }) => {
  const rel = relativeDue(date, status);
  if (!rel) return null;
  const colorMap = {
    overdue: 'var(--c-rose)',
    today: 'var(--c-orange)',
    soon: 'var(--c-amber)',
    normal: 'var(--text-muted)',
  };
  return (
    <span style={{ color: colorMap[rel.kind], fontWeight: rel.kind === 'overdue' ? 700 : 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      <Icon name={rel.kind === 'overdue' ? 'warning' : 'clock'} size={11} />
      {rel.text}
    </span>
  );
};

// ── BUTTON ──
const Btn = ({ children, kind = 'secondary', icon, size, onClick, type = 'button', ...rest }) => {
  const cls = `btn btn-${kind}`;
  return (
    <button type={type} className={cls} onClick={onClick} {...rest}>
      {icon && <Icon name={icon} size={14} />}
      {children}
    </button>
  );
};

const IconBtn = ({ icon, onClick, title, hasDot, size = 16, ...rest }) => (
  <button className={`icon-btn${hasDot ? ' has-dot' : ''}`} onClick={onClick} title={title} {...rest}>
    <Icon name={icon} size={size} />
  </button>
);

// ── TOGGLE ──
const Toggle = ({ checked, onChange, label }) => (
  <label className={`toggle${checked ? ' on' : ''}`} onClick={(e) => { e.preventDefault(); onChange(!checked); }}>
    <span className="toggle-track"><span className="toggle-knob" /></span>
    {label && <span>{label}</span>}
  </label>
);

// ── POPOVER (simple — anchored to click) ──
const Popover = ({ open, onClose, children, x = 0, y = 0, align = 'left' }) => {
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (!e.target.closest('.popover')) onClose && onClose();
    };
    setTimeout(() => document.addEventListener('click', handler), 0);
    return () => document.removeEventListener('click', handler);
  }, [open]);
  if (!open) return null;
  const style = align === 'right'
    ? { right: x, top: y }
    : { left: x, top: y };
  return <div className="popover" style={style}>{children}</div>;
};

// ── MODAL ──
const Modal = ({ open, onClose, title, footer, children, width }) => {
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [open, onClose]);
  return (
    <div className={`modal-overlay${open ? ' open' : ''}`} onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={width ? { width } : undefined}>
        <div className="modal-head">
          <div className="modal-title">{title}</div>
          <div style={{ marginLeft: 'auto' }}>
            <IconBtn icon="x" onClick={onClose} />
          </div>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
};

// ── DONUT CHART ──
const Donut = ({ data, size = 140, thickness = 22 }) => {
  const total = data.reduce((a, b) => a + b.value, 0) || 1;
  const r = (size - thickness) / 2;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg width={size} height={size} className="donut" viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-2)" strokeWidth={thickness} />
      {data.map((d, i) => {
        const len = (d.value / total) * c;
        const dash = `${len} ${c - len}`;
        const el = (
          <circle
            key={i}
            cx={size / 2}
            cy={size / 2}
            r={r}
            fill="none"
            stroke={d.color}
            strokeWidth={thickness}
            strokeDasharray={dash}
            strokeDashoffset={-offset}
            transform={`rotate(-90 ${size / 2} ${size / 2})`}
            strokeLinecap="butt"
          />
        );
        offset += len;
        return el;
      })}
      <text
        x={size / 2}
        y={size / 2 - 4}
        textAnchor="middle"
        fontWeight="800"
        fontSize="22"
        fill="var(--text)"
        fontFamily="var(--font-sans)"
        letterSpacing="-0.02em"
      >{total}</text>
      <text
        x={size / 2}
        y={size / 2 + 14}
        textAnchor="middle"
        fontSize="11"
        fill="var(--text-subtle)"
        fontWeight="500"
        fontFamily="var(--font-sans)"
      >tasks</text>
    </svg>
  );
};

// ── TOAST ──
function useToast() {
  const [toasts, setToasts] = React.useState([]);
  const push = React.useCallback((msg) => {
    const id = Math.random();
    setToasts(t => [...t, { id, msg }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2400);
  }, []);
  const ui = (
    <>
      {toasts.map((t, i) => (
        <div key={t.id} className="toast" style={{ bottom: 24 + i * 50 }}>
          <Icon name="check" size={14} /> {t.msg}
        </div>
      ))}
    </>
  );
  return { push, ui };
}

Object.assign(window, {
  Avatar, AvatarStack, PriorityBadge, ProjectChip, StatusPill, DuePill,
  Btn, IconBtn, Toggle, Popover, Modal, Donut, useToast,
});