// Column types: metadata, cell display/editing, pickers and group-footer summaries.
import { html, useState, useRef, useEffect } from '../vendor/preact-htm.mjs';
import { state, toast } from './store.js';
import { api } from './api.js';
import { setValue, patchColumn } from './actions.js';
import {
  Icon, Avatar, AvatarStack, openPopover, closePopover, InlineEdit, fmtDate, fmtRange, parseDate, ymd, todayStr,
  textOn, LABEL_COLORS, fileUrl, isImage, fmtSize, timeAgo, ColorPicker,
} from './ui.js';

export const COLUMN_TYPES = {
  status: { label: 'Status', icon: 'check', color: '#00c875' },
  priority: { label: 'Priority', icon: 'bolt', color: '#401694' },
  text: { label: 'Text', icon: 'edit', color: '#fdab3d' },
  people: { label: 'People', icon: 'person', color: '#579bfc' },
  date: { label: 'Date', icon: 'calendar', color: '#a25ddc' },
  timeline: { label: 'Timeline', icon: 'timeline', color: '#9d50dd' },
  number: { label: 'Numbers', icon: 'chart', color: '#ffcb00' },
  long_text: { label: 'Long text', icon: 'message', color: '#ff642e' },
  dropdown: { label: 'Dropdown', icon: 'chevDown', color: '#00a9ff' },
  tags: { label: 'Tags', icon: 'pin', color: '#00c875' },
  checkbox: { label: 'Checkbox', icon: 'check', color: '#ff7575' },
  files: { label: 'Files', icon: 'paperclip', color: '#f65f7c' },
  link: { label: 'Link', icon: 'link', color: '#66ccff' },
  email: { label: 'Email', icon: 'message', color: '#0086c0' },
  phone: { label: 'Phone', icon: 'message', color: '#037f4c' },
  rating: { label: 'Rating', icon: 'star', color: '#ffcb00' },
  created: { label: 'Creation log', icon: 'activity', color: '#7f5347' },
  updated: { label: 'Last updated', icon: 'refresh', color: '#7f5347' },
  item_id: { label: 'Item ID', icon: 'info', color: '#676879' },
};

export const DEFAULT_WIDTH = { status: 140, people: 110, date: 120, timeline: 170, number: 110, checkbox: 90, rating: 130, files: 120, text: 170, long_text: 200, dropdown: 170, tags: 170, link: 170, email: 180, phone: 140, created: 160, updated: 140, item_id: 110 };
export const colWidth = (c) => c.width || DEFAULT_WIDTH[c.type] || 150;

export function labelOf(col, id) { return (col.settings?.labels || []).find((l) => l.id === id); }
export function isDoneLabel(l) { return !!l && (l.done || /^done$/i.test(l.name)); }

// Is the item "done"? — first status column with a done label.
export function itemDone(board, item) {
  for (const c of board.columns) if (c.type === 'status' && isDoneLabel(labelOf(c, item.vals[c.id]))) return true;
  return false;
}

// Plain-text value, for search, sort and filters.
export function cellText(board, col, item) {
  const v = item.vals[col.id];
  switch (col.type) {
    case 'status': return labelOf(col, v)?.name || '';
    case 'dropdown': return (v || []).map((x) => labelOf(col, x)?.name).filter(Boolean).join(', ');
    case 'people': return (v || []).map((u) => state.usersById[u]?.name).filter(Boolean).join(', ');
    case 'timeline': return v?.from ? `${v.from} ${v.to}` : '';
    case 'link': return v ? (v.text || v.url || '') : '';
    case 'tags': return (v || []).join(', ');
    case 'checkbox': return v ? 'checked' : '';
    case 'files': return (board.files || []).filter((f) => (v || []).includes(f.id)).map((f) => f.name).join(', ');
    case 'created': return state.usersById[item.created_by]?.name || '';
    default: return v == null ? '' : String(v);
  }
}

// ─── Cell ────────────────────────────────────────────────
export function Cell({ board, col, item, compact }) {
  const v = item.vals[col.id];
  const boardId = board.board.id;
  const set = (val) => setValue(boardId, item.id, col.id, val);
  const open = (e, Comp, extra = {}, opts = {}) => { e.stopPropagation(); openPopover(e.currentTarget, Comp, { board, col, item, set, ...extra }, opts); };

  switch (col.type) {
    case 'status': {
      const l = labelOf(col, v);
      return html`<button class="cell-status" style=${{ background: l?.color || 'var(--status-empty)', color: l ? textOn(l.color) : 'transparent' }}
        onClick=${(e) => open(e, StatusPicker, {}, { align: 'center' })}>
        <span class="fold" />${l?.name || '-'}</button>`;
    }
    case 'people':
      return html`<button class="cell-people" onClick=${(e) => open(e, PeoplePicker, {}, { align: 'center' })}>
        <${AvatarStack} ids=${v || []} size=${compact ? 24 : 28} /></button>`;
    case 'date': {
      const d = parseDate(v);
      const overdue = d && ymd(d) < todayStr() && !itemDone(board, item);
      const today = d && ymd(d) === todayStr();
      return html`<button class="cell-date ${overdue ? 'overdue' : ''}" onClick=${(e) => open(e, DatePicker, {}, { align: 'center' })}>
        ${d ? html`${overdue ? html`<span class="warn" title="Overdue">!</span>` : today ? html`<span class="today-dot" />` : null}${fmtDate(v)}` : html`<span class="ghost-icon"><${Icon} name="calendar" /></span>`}
      </button>`;
    }
    case 'timeline': {
      const g = board.groups.find((x) => x.id === (item.group_id || board.items.find((i) => i.id === item.parent_id)?.group_id));
      const pct = v?.from ? timelineProgress(v) : 0;
      return html`<button class="cell-timeline" onClick=${(e) => open(e, DatePicker, { range: true }, { align: 'center' })}>
        ${v?.from ? html`<span class="tl-bar" style=${{ background: `linear-gradient(90deg, ${g?.color || '#579bfc'} ${pct}%, var(--tl-rest) ${pct}%)` }}><span>${fmtRange(v)}</span></span>`
          : html`<span class="tl-bar empty"><span>-</span></span>`}
      </button>`;
    }
    case 'number':
      return html`<div class="cell-number"><${InlineEdit} value=${v == null ? '' : String(v)} placeholder=""
        onSave=${(s) => { const n = s === '' ? null : Number(s.replace(/[^0-9.\-]/g, '')); if (s !== '' && !Number.isFinite(n)) return toast('Numbers only', 'error'); set(n); }} />
        ${v != null && col.settings?.unit ? html`<span class="unit">${col.settings.unit}</span>` : null}</div>`;
    case 'checkbox':
      return html`<label class="cell-check" onClick=${(e) => e.stopPropagation()}><input type="checkbox" checked=${!!v} onChange=${(e) => set(e.target.checked || null)} /><span /></label>`;
    case 'rating': {
      const max = col.settings?.max || 5;
      return html`<div class="cell-rating">${Array.from({ length: max }, (_, i) => html`
        <button key=${i} class=${i < (v || 0) ? 'on' : ''} onClick=${(e) => { e.stopPropagation(); set(v === i + 1 ? null : i + 1); }}><${Icon} name="star" fill=${i < (v || 0)} size=${15} /></button>`)}</div>`;
    }
    case 'long_text':
      return html`<button class="cell-text long" title=${v || ''} onClick=${(e) => open(e, LongTextEditor, {}, { keepOnScroll: true })}>${v || ''}</button>`;
    case 'dropdown':
      return html`<button class="cell-chips" onClick=${(e) => open(e, LabelsPicker, {}, { matchWidth: true })}>
        ${(v || []).map((x) => labelOf(col, x)).filter(Boolean).map((l) => html`<span key=${l.id} class="chip">${l.name}</span>`)}</button>`;
    case 'tags':
      return html`<button class="cell-chips" onClick=${(e) => open(e, TagsEditor, {}, { matchWidth: true })}>
        ${(v || []).map((t) => html`<span key=${t} class="chip tag">#${t}</span>`)}</button>`;
    case 'link':
      return html`<div class="cell-link">
        ${v?.url ? html`<a href=${v.url} target="_blank" rel="noopener" onClick=${(e) => e.stopPropagation()}>${v.text || v.url}</a>` : null}
        <button class="cell-edit-btn" onClick=${(e) => open(e, LinkEditor)}><${Icon} name=${v?.url ? 'edit' : 'link'} size=${13} /></button></div>`;
    case 'email':
      return html`<div class="cell-link">${v ? html`<a href=${'mailto:' + v} onClick=${(e) => e.stopPropagation()}>${v}</a>` : null}
        <button class="cell-edit-btn" onClick=${(e) => open(e, SimpleEditor, { kind: 'email' })}><${Icon} name="edit" size=${13} /></button></div>`;
    case 'phone':
      return html`<div class="cell-link">${v ? html`<a href=${'tel:' + v} onClick=${(e) => e.stopPropagation()}>${v}</a>` : null}
        <button class="cell-edit-btn" onClick=${(e) => open(e, SimpleEditor, { kind: 'tel' })}><${Icon} name="edit" size=${13} /></button></div>`;
    case 'files': {
      const files = (board.files || []).filter((f) => (v || []).includes(f.id));
      return html`<button class="cell-files" onClick=${(e) => open(e, FilesEditor, {}, { keepOnScroll: true })}>
        ${files.slice(0, 3).map((f) => isImage(f) ? html`<img key=${f.id} src=${fileUrl(f)} alt="" loading="lazy" />` : html`<span key=${f.id} class="file-ext">${ext(f.name)}</span>`)}
        ${files.length > 3 ? html`<span class="file-more">+${files.length - 3}</span>` : null}
        ${!files.length ? html`<span class="ghost-icon"><${Icon} name="paperclip" /></span>` : null}
      </button>`;
    }
    case 'created':
      return html`<div class="cell-meta"><${Avatar} user=${state.usersById[item.created_by]} size=${22} /><span>${fmtDate(ymd(new Date(item.created_at)))}</span></div>`;
    case 'updated':
      return html`<div class="cell-meta muted">${timeAgo(item.updated_at)} ago</div>`;
    case 'item_id':
      return html`<div class="cell-meta muted mono">${item.id}</div>`;
    default:
      return html`<div class="cell-text"><${InlineEdit} value=${v || ''} onSave=${(s) => set(s || null)} /></div>`;
  }
}

const ext = (n) => (n.split('.').pop() || 'file').slice(0, 4).toUpperCase();

function timelineProgress(v) {
  const a = parseDate(v.from); const b = parseDate(v.to || v.from);
  const now = new Date(); now.setHours(0, 0, 0, 0);
  if (now < a) return 0;
  if (now >= b) return 100;
  return Math.round(((now - a) / (b - a + 86400000)) * 100);
}

// ─── Status picker (with label editing) ──────────────────
export function StatusPicker({ board, col, set, item, onPick }) {
  const [editing, setEditing] = useState(false);
  const labels = col.settings?.labels || [];
  const pick = (id) => { closePopover(); onPick ? onPick(id) : set(id); };
  if (editing) return html`<${LabelEditor} board=${board} col=${col} onDone=${() => setEditing(false)} />`;
  return html`<div class="status-picker">
    <div class="status-grid">
      ${labels.map((l) => html`<button key=${l.id} class="status-opt" style=${{ background: l.color, color: textOn(l.color) }} onClick=${() => pick(l.id)}>${l.name}</button>`)}
      <button class="status-opt blank" onClick=${() => pick(null)}>-</button>
    </div>
    <div class="menu-divider" />
    <button class="menu-item" onClick=${() => setEditing(true)}><${Icon} name="edit" /> Edit labels</button>
  </div>`;
}

function LabelEditor({ board, col, onDone }) {
  const [labels, setLabels] = useState(() => (col.settings?.labels || []).map((l) => ({ ...l })));
  const save = () => { patchColumn(board.board.id, col.id, { settings: { ...col.settings, labels: labels.filter((l) => l.name.trim()) } }); onDone(); };
  const upd = (i, patch) => setLabels(labels.map((l, j) => (j === i ? { ...l, ...patch } : l)));
  return html`<div class="label-editor">
    ${labels.map((l, i) => html`<div key=${l.id} class="label-row">
      <button class="swatch popover-keep" style=${{ background: l.color }} onClick=${(e) => {
        const next = LABEL_COLORS[(LABEL_COLORS.indexOf(l.color) + 1) % LABEL_COLORS.length]; upd(i, { color: next });
      }} title="Click to change color" />
      <input class="input sm" value=${l.name} onInput=${(e) => upd(i, { name: e.target.value })} />
      ${col.type === 'status' ? html`<button class="icon-btn ${l.done ? 'on' : ''}" title="Counts as done" onClick=${() => upd(i, { done: !l.done })}><${Icon} name="check" /></button>` : null}
      <button class="icon-btn" title="Remove" onClick=${() => setLabels(labels.filter((_, j) => j !== i))}><${Icon} name="x" /></button>
    </div>`)}
    <button class="btn ghost sm" onClick=${() => setLabels([...labels, { id: Math.random().toString(36).slice(2, 9), name: 'New label', color: LABEL_COLORS[labels.length % LABEL_COLORS.length] }])}><${Icon} name="plus" /> New label</button>
    <div class="modal-actions"><button class="btn ghost sm" onClick=${onDone}>Cancel</button><button class="btn primary sm" onClick=${save}>Apply</button></div>
  </div>`;
}

// ─── Dropdown labels (multi) ─────────────────────────────
function LabelsPicker({ board, col, item, set }) {
  const [q, setQ] = useState('');
  const sel = item.vals[col.id] || [];
  const labels = col.settings?.labels || [];
  const shown = labels.filter((l) => l.name.toLowerCase().includes(q.toLowerCase()));
  const toggle = (id) => set(sel.includes(id) ? sel.filter((x) => x !== id) : [...sel, id]);
  const create = () => {
    const l = { id: Math.random().toString(36).slice(2, 9), name: q.trim(), color: LABEL_COLORS[labels.length % LABEL_COLORS.length] };
    patchColumn(board.board.id, col.id, { settings: { ...col.settings, labels: [...labels, l] } });
    set([...sel, l.id]); setQ('');
  };
  return html`<div class="picker">
    <input class="input sm" placeholder="Search or add options" value=${q} onInput=${(e) => setQ(e.target.value)} autofocus
      onKeyDown=${(e) => { if (e.key === 'Enter' && q.trim()) { const ex = labels.find((l) => l.name.toLowerCase() === q.trim().toLowerCase()); ex ? toggle(ex.id) : create(); } }} />
    <div class="picker-list">
      ${shown.map((l) => html`<button key=${l.id} class="picker-row" onClick=${() => toggle(l.id)}>
        <span class="check-box ${sel.includes(l.id) ? 'on' : ''}"><${Icon} name="check" size=${12} /></span><span class="chip">${l.name}</span></button>`)}
      ${q.trim() && !labels.some((l) => l.name.toLowerCase() === q.trim().toLowerCase()) ? html`<button class="picker-row" onClick=${create}><${Icon} name="plus" /> Create "${q.trim()}"</button>` : null}
      ${!labels.length && !q ? html`<div class="muted pad">Type to add the first option</div>` : null}
    </div></div>`;
}

function TagsEditor({ col, item, set }) {
  const [q, setQ] = useState('');
  const tags = item.vals[col.id] || [];
  return html`<div class="picker">
    <div class="chips-wrap">${tags.map((t) => html`<span key=${t} class="chip tag">#${t}<button onClick=${() => set(tags.filter((x) => x !== t))}><${Icon} name="x" size=${10} /></button></span>`)}</div>
    <input class="input sm" placeholder="Add a tag and press Enter" value=${q} autofocus onInput=${(e) => setQ(e.target.value)}
      onKeyDown=${(e) => { if (e.key === 'Enter' && q.trim()) { const t = q.trim().replace(/^#/, ''); if (!tags.includes(t)) set([...tags, t]); setQ(''); } }} />
  </div>`;
}

// ─── People ──────────────────────────────────────────────
export function PeoplePicker({ col, item, set, value, onChange, single }) {
  const [q, setQ] = useState('');
  const sel = value ?? (item?.vals[col.id] || []);
  const apply = onChange || set;
  const users = state.users.filter((u) => u.active && (u.name + ' ' + u.email).toLowerCase().includes(q.toLowerCase()));
  const toggle = (id) => {
    if (single) { apply(sel.includes(id) ? [] : [id]); closePopover(); return; }
    apply(sel.includes(id) ? sel.filter((x) => x !== id) : [...sel, id]);
  };
  const chosen = sel.map((id) => state.usersById[id]).filter(Boolean);
  return html`<div class="picker people-picker">
    ${chosen.length ? html`<div class="chips-wrap">${chosen.map((u) => html`<span key=${u.id} class="chip person"><${Avatar} user=${u} size=${20} />${u.name}
      <button onClick=${() => toggle(u.id)} aria-label="Remove"><${Icon} name="x" size=${10} /></button></span>`)}</div>` : null}
    <input class="input sm" placeholder="Search names" value=${q} onInput=${(e) => setQ(e.target.value)} autofocus />
    <div class="picker-list">
      <div class="picker-section">Suggested people</div>
      ${users.filter((u) => !sel.includes(u.id)).slice(0, 50).map((u) => html`<button key=${u.id} class="picker-row" onClick=${() => toggle(u.id)}>
        <${Avatar} user=${u} size=${24} /><span>${u.name}</span><span class="muted small">${u.email}</span></button>`)}
      ${!users.length ? html`<div class="muted pad">No one matches "${q}"</div>` : null}
    </div></div>`;
}

// ─── Dates ───────────────────────────────────────────────
export function DatePicker({ col, item, set, range, value: v0, onChange }) {
  const value = v0 !== undefined ? v0 : item?.vals[col.id];
  const apply = onChange || set;
  const init = range ? parseDate(value?.from) : parseDate(value);
  const [month, setMonth] = useState(() => { const d = init || new Date(); return new Date(d.getFullYear(), d.getMonth(), 1); });
  const [from, setFrom] = useState(range ? value?.from || null : null);
  const [time, setTime] = useState(!range && String(value || '').includes('T') ? String(value).split('T')[1] : '');
  const [showTime, setShowTime] = useState(!!time);
  const sel = range ? null : (value ? String(value).slice(0, 10) : null);
  const days = [];
  const start = new Date(month); start.setDate(1 - start.getDay());
  for (let i = 0; i < 42; i++) { const d = new Date(start); d.setDate(start.getDate() + i); days.push(d); }
  const pending = useRef(false);
  const click = (d) => {
    const s = ymd(d);
    if (!range) { apply(showTime && time ? `${s}T${time}` : s); closePopover(); return; }
    if (!pending.current) { setFrom(s); pending.current = true; apply({ from: s, to: s }); return; }
    const [a, b] = s < from ? [s, from] : [from, s];
    pending.current = false; apply({ from: a, to: b }); closePopover();
  };
  const inRange = (s) => range && value?.from && s >= value.from && s <= (value.to || value.from);
  return html`<div class="datepicker">
    <div class="dp-head">
      <button class="icon-btn" onClick=${() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}><${Icon} name="chevLeft" /></button>
      <strong>${month.toLocaleString([], { month: 'long', year: 'numeric' })}</strong>
      <button class="icon-btn" onClick=${() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}><${Icon} name="chevRight" /></button>
    </div>
    <div class="dp-grid">
      ${['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => html`<span key=${'h' + i} class="dp-dow">${d}</span>`)}
      ${days.map((d) => { const s = ymd(d); return html`<button key=${s} class="dp-day ${d.getMonth() !== month.getMonth() ? 'out' : ''} ${s === todayStr() ? 'today' : ''} ${s === sel || (range && (s === value?.from || s === value?.to)) ? 'sel' : ''} ${inRange(s) ? 'inrange' : ''}" onClick=${() => click(d)}>${d.getDate()}</button>`; })}
    </div>
    ${range ? html`<div class="muted small pad-x">${pending.current ? 'Now pick the end date' : 'Pick a start date, then an end date'}</div>` : null}
    <div class="dp-foot">
      <button class="btn ghost sm" onClick=${() => { click(new Date()); }}>Today</button>
      ${!range ? html`<button class="btn ghost sm" onClick=${() => setShowTime(!showTime)}>${showTime ? 'No time' : 'Add time'}</button>` : null}
      ${value ? html`<button class="btn ghost sm" onClick=${() => { apply(null); closePopover(); }}>Clear</button>` : null}
    </div>
    ${showTime && !range ? html`<div class="dp-time"><input type="time" class="input sm" value=${time} onInput=${(e) => setTime(e.target.value)} />
      <button class="btn primary sm" disabled=${!sel} onClick=${() => { apply(time ? `${sel}T${time}` : sel); closePopover(); }}>Set</button></div>` : null}
  </div>`;
}

// ─── Text-ish editors ────────────────────────────────────
function LongTextEditor({ col, item, set }) {
  const [v, setV] = useState(item.vals[col.id] || '');
  const save = () => { if (v !== (item.vals[col.id] || '')) set(v.trim() || null); closePopover(); };
  return html`<div class="longtext-editor">
    <textarea class="input" rows="8" value=${v} onInput=${(e) => setV(e.target.value)} autofocus
      onKeyDown=${(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) save(); }} />
    <div class="modal-actions"><span class="muted small">⌘/Ctrl + Enter to save</span><button class="btn primary sm" onClick=${save}>Save</button></div>
  </div>`;
}
function LinkEditor({ col, item, set }) {
  const cur = item.vals[col.id] || {};
  const [url, setUrl] = useState(cur.url || '');
  const [text, setText] = useState(cur.text || '');
  const save = (e) => { e.preventDefault(); let u = url.trim(); if (u && !/^[a-z]+:/i.test(u)) u = 'https://' + u; set(u ? { url: u, text: text.trim() } : null); closePopover(); };
  return html`<form class="form-pop" onSubmit=${save}>
    <label class="field-label">Web address</label><input class="input sm" value=${url} onInput=${(e) => setUrl(e.target.value)} placeholder="www.example.com" autofocus />
    <label class="field-label">Text to display</label><input class="input sm" value=${text} onInput=${(e) => setText(e.target.value)} placeholder="Optional" />
    <div class="modal-actions"><button class="btn primary sm">Save</button></div></form>`;
}
function SimpleEditor({ col, item, set, kind }) {
  const [v, setV] = useState(item.vals[col.id] || '');
  const save = (e) => { e.preventDefault(); set(v.trim() || null); closePopover(); };
  return html`<form class="form-pop" onSubmit=${save}>
    <input class="input sm" type=${kind} value=${v} onInput=${(e) => setV(e.target.value)} autofocus />
    <div class="modal-actions"><button class="btn primary sm">Save</button></div></form>`;
}

// ─── Files ───────────────────────────────────────────────
export function FilesEditor({ board, col, item }) {
  const ids = item.vals[col.id] || [];
  const files = (board.files || []).filter((f) => ids.includes(f.id));
  const [busy, setBusy] = useState(false);
  const input = useRef();
  const upload = async (list) => {
    if (!list?.length) return;
    setBusy(true);
    const fd = new FormData();
    for (const f of list) fd.append('files', f);
    fd.append('column_id', col.id);
    try { await api.post(`/api/items/${item.id}/files`, fd); const { loadBoard } = await import('./store.js'); await loadBoard(board.board.id); }
    catch (e) { toast(e.message, 'error'); }
    setBusy(false);
  };
  const remove = async (f) => {
    await api.del(`/api/files/${f.id}`);
    const { loadBoard } = await import('./store.js'); loadBoard(board.board.id);
  };
  return html`<div class="files-pop" onDragOver=${(e) => e.preventDefault()} onDrop=${(e) => { e.preventDefault(); upload(e.dataTransfer.files); }}>
    <div class="files-list">
      ${files.map((f) => html`<div key=${f.id} class="file-row">
        ${isImage(f) ? html`<img src=${fileUrl(f)} alt="" />` : html`<span class="file-ext">${ext(f.name)}</span>`}
        <a href=${fileUrl(f)} target="_blank" rel="noopener">${f.name}</a><span class="muted small">${fmtSize(f.size)}</span>
        <a class="icon-btn" href=${fileUrl(f, true)} title="Download"><${Icon} name="download" /></a>
        <button class="icon-btn" title="Remove" onClick=${() => remove(f)}><${Icon} name="trash" /></button></div>`)}
      ${!files.length ? html`<div class="muted pad">Drop files here</div>` : null}
    </div>
    <input type="file" multiple hidden ref=${input} onChange=${(e) => upload(e.target.files)} />
    <button class="btn primary sm" disabled=${busy} onClick=${() => input.current.click()}><${Icon} name="upload" /> ${busy ? 'Uploading…' : 'Add files'}</button>
  </div>`;
}

// ─── Group footer summaries ──────────────────────────────
export function Summary({ board, col, items }) {
  if (col.type === 'status' || col.type === 'dropdown') {
    const counts = {};
    let total = 0;
    for (const it of items) {
      const vs = col.type === 'status' ? [it.vals[col.id] || '_'] : (it.vals[col.id]?.length ? it.vals[col.id] : ['_']);
      for (const v of vs) { counts[v] = (counts[v] || 0) + 1; total++; }
    }
    if (!total) return html`<div class="summary" />`;
    const segs = Object.entries(counts).map(([id, n]) => ({ l: labelOf(col, id), n }))
      .sort((a, b) => (a.l ? 0 : 1) - (b.l ? 0 : 1));
    return html`<div class="summary"><div class="battery" title=${segs.map((s) => `${s.l?.name || 'Empty'}: ${s.n}`).join('\n')}>
      ${segs.map((s, i) => html`<span key=${i} style=${{ flex: s.n, background: s.l?.color || 'var(--status-empty)' }} />`)}</div></div>`;
  }
  if (col.type === 'number') {
    const nums = items.map((i) => i.vals[col.id]).filter((x) => typeof x === 'number');
    const sum = nums.reduce((a, b) => a + b, 0);
    return html`<div class="summary num">${nums.length ? html`<strong>${+sum.toFixed(2)}${col.settings?.unit ? ' ' + col.settings.unit : ''}</strong><span class="muted small">sum</span>` : null}</div>`;
  }
  if (col.type === 'date' || col.type === 'timeline') {
    const ds = items.flatMap((i) => { const v = i.vals[col.id]; return !v ? [] : col.type === 'date' ? [String(v).slice(0, 10)] : [v.from, v.to]; }).filter(Boolean).sort();
    if (!ds.length) return html`<div class="summary" />`;
    return html`<div class="summary"><span class="tl-bar summary-range"><span>${fmtRange({ from: ds[0], to: ds[ds.length - 1] })}</span></span></div>`;
  }
  if (col.type === 'people') {
    const ids = [...new Set(items.flatMap((i) => i.vals[col.id] || []))];
    return html`<div class="summary">${ids.length ? html`<${AvatarStack} ids=${ids} size=${22} />` : null}</div>`;
  }
  if (col.type === 'checkbox') {
    const n = items.filter((i) => i.vals[col.id]).length;
    return html`<div class="summary muted small">${items.length ? `${n}/${items.length}` : ''}</div>`;
  }
  if (col.type === 'files') {
    const n = items.reduce((a, i) => a + (i.vals[col.id]?.length || 0), 0);
    return html`<div class="summary muted small">${n ? `${n} files` : ''}</div>`;
  }
  return html`<div class="summary" />`;
}

export { ColorPicker };