// Item panel: slides in from the right (full screen on phones). Updates, info, files, activity.
import { html, useState, useEffect, useRef } from '../vendor/preact-htm.mjs';
import { api } from './api.js';
import { state, useStore, navigate, boardPath, loadBoard, toast } from './store.js';
import { Icon, Avatar, InlineEdit, menu, timeAgo, RichText, fileUrl, isImage, fmtSize, confirmDialog, Spinner, fmtDate, ymd } from './ui.js';
import { Cell, COLUMN_TYPES } from './cells.js';
import * as A from './actions.js';

export function ItemPanel({ board, itemId, viewId }) {
  const s = useStore();
  const boardId = board.board.id;
  const item = board.items.find((i) => i.id === itemId);
  const [detail, setDetail] = useState(null);
  const [tab, setTab] = useState(window.innerWidth < 769 ? 'info' : 'updates');
  const close = () => navigate(boardPath(boardId, { viewId }));
  const reload = () => api.get(`/api/items/${itemId}`).then(setDetail).catch((e) => { if (e.status === 404) close(); });
  useEffect(() => { reload(); }, [itemId]);
  useEffect(() => {
    const fn = (e) => { if (e.detail === boardId) reload(); };
    window.addEventListener('wb:board-changed', fn);
    const key = (e) => { if (e.key === 'Escape' && !s.popover && !s.modal && !/INPUT|TEXTAREA/.test(document.activeElement?.tagName)) close(); };
    document.addEventListener('keydown', key);
    return () => { window.removeEventListener('wb:board-changed', fn); document.removeEventListener('keydown', key); };
  }, [itemId]);
  if (!item) {
    return html`<aside class="item-panel"><div class="panel-head"><button class="icon-btn" onClick=${close}><${Icon} name="x" /></button></div>
      ${detail === null ? html`<${Spinner} />` : html`<p class="pad muted">This item was deleted or moved.</p>`}</aside>`;
  }
  const parent = item.parent_id ? board.items.find((i) => i.id === item.parent_id) : null;
  const group = board.groups.find((g) => g.id === (item.group_id || parent?.group_id));
  const subs = board.items.filter((i) => i.parent_id === item.id).sort((a, b) => a.position - b.position);
  const nUpdates = detail?.updates.filter((u) => !u.parent_id).length ?? board.updateCounts?.[item.id] ?? 0;
  const nFiles = detail?.files.length ?? 0;
  const itemMenu = (e) => menu(e, [
    { label: 'Duplicate', icon: 'copy', onClick: () => A.duplicateItems(boardId, [item.id]) },
    { label: 'Copy link', icon: 'link', onClick: () => { navigator.clipboard?.writeText(location.origin + boardPath(boardId, { itemId: item.id })); toast('Link copied'); } },
    !item.parent_id && { label: 'Move to board', icon: 'board', keepOpen: true, onClick: (ev) => menu(ev, state.boards.filter((b) => b.id !== boardId).map((b) => ({ label: b.name, onClick: () => { A.moveItemToBoard(boardId, item.id, b.id); close(); } }))) },
    { label: 'Archive', icon: 'archive', onClick: () => { A.archiveItems(boardId, [item.id]); close(); } },
    { label: 'Delete', icon: 'trash', danger: true, onClick: () => A.deleteItems(boardId, [item.id]) },
  ], { align: 'right' });
  return html`<div class="panel-backdrop" onClick=${close} />
  <aside class="item-panel" role="dialog" aria-label=${item.name}>
    <div class="panel-head">
      <button class="icon-btn" onClick=${close} aria-label="Close"><${Icon} name="x" size=${20} /></button>
      <div class="crumbs muted small">
        <span>${board.board.name}</span>
        ${group ? html`<${Icon} name="chevRight" size=${12} /><span style=${{ color: group.color }}>${group.title}</span>` : null}
        ${parent ? html`<${Icon} name="chevRight" size=${12} /><button class="link" onClick=${() => navigate(boardPath(boardId, { viewId, itemId: parent.id }))}>${parent.name}</button>` : null}
      </div>
      <button class="icon-btn" onClick=${itemMenu}><${Icon} name="dots" size=${20} /></button>
    </div>
    <h2 class="panel-title"><${InlineEdit} value=${item.name} onSave=${(n) => n && A.renameItem(boardId, item.id, n)} /></h2>
    <nav class="panel-tabs">
      <button class=${tab === 'updates' ? 'active' : ''} onClick=${() => setTab('updates')}>Updates${nUpdates ? ` / ${nUpdates}` : ''}</button>
      <button class=${tab === 'info' ? 'active' : ''} onClick=${() => setTab('info')}>Info${subs.length ? ` / ${subs.length}` : ''}</button>
      <button class=${tab === 'files' ? 'active' : ''} onClick=${() => setTab('files')}>Files${nFiles ? ` / ${nFiles}` : ''}</button>
      <button class=${tab === 'activity' ? 'active' : ''} onClick=${() => setTab('activity')}>Activity</button>
    </nav>
    <div class="panel-body">
      ${!detail ? html`<${Spinner} />`
        : tab === 'updates' ? html`<${Updates} item=${item} detail=${detail} reload=${reload} board=${board} />`
        : tab === 'info' ? html`<${Info} board=${board} item=${item} subs=${subs} viewId=${viewId} detail=${detail} />`
        : tab === 'files' ? html`<${Files} item=${item} detail=${detail} reload=${reload} boardId=${boardId} />`
        : html`<${Activity} detail=${detail} />`}
    </div>
  </aside>`;
}

// ─── Updates ─────────────────────────────────────────────
function Updates({ item, detail, reload, board }) {
  const top = detail.updates.filter((u) => !u.parent_id);
  const replies = {};
  for (const u of detail.updates) if (u.parent_id) (replies[u.parent_id] ||= []).unshift(u);
  return html`<div class="updates">
    <${Composer} itemId=${item.id} onPosted=${reload} boardId=${board.board.id} />
    ${top.map((u) => html`<${UpdateCard} key=${u.id} u=${u} replies=${replies[u.id] || []} reload=${reload} itemId=${item.id} boardId=${board.board.id} />`)}
    ${!top.length ? html`<div class="empty-updates"><${Icon} name="message" size=${40} /><h3>No updates yet</h3>
      <p class="muted">Share progress, mention a teammate with @, or attach files.</p></div>` : null}
  </div>`;
}

function Composer({ itemId, parentId, onPosted, boardId, compact, autoFocus }) {
  const [text, setText] = useState('');
  const [files, setFiles] = useState([]);
  const [mentions, setMentions] = useState([]);
  const [suggest, setSuggest] = useState(null);
  const [busy, setBusy] = useState(false);
  const [open, setOpen] = useState(!compact || autoFocus);
  const ta = useRef();
  const fileIn = useRef();
  const onInput = (e) => {
    setText(e.target.value);
    const upto = e.target.value.slice(0, e.target.selectionStart);
    const m = upto.match(/(^|\s)@([\w .'-]{0,30})$/);
    setSuggest(m ? m[2] : null);
  };
  const pick = (u) => {
    const pos = ta.current.selectionStart;
    const before = text.slice(0, pos).replace(/@([\w .'-]{0,30})$/, `@${u.name} `);
    setText(before + text.slice(pos));
    setMentions([...new Set([...mentions, u.id])]);
    setSuggest(null);
    setTimeout(() => { ta.current.focus(); ta.current.selectionStart = ta.current.selectionEnd = before.length; }, 0);
  };
  const submit = async () => {
    if (!text.trim() && !files.length) return;
    setBusy(true);
    let body = text;
    const used = mentions.filter((id) => text.includes('@' + state.usersById[id]?.name));
    for (const id of used) body = body.split('@' + state.usersById[id].name).join(`@[${state.usersById[id].name}](${id})`);
    const fd = new FormData();
    fd.append('body', body);
    fd.append('mentions', JSON.stringify(used));
    if (parentId) fd.append('parent_id', parentId);
    for (const f of files) fd.append('files', f);
    try {
      await api.post(`/api/items/${itemId}/updates`, fd);
      setText(''); setFiles([]); setMentions([]); if (compact) setOpen(false);
      onPosted(); loadBoard(boardId);
    } catch (e) { toast(e.message, 'error'); }
    setBusy(false);
  };
  if (!open) return html`<button class="reply-open" onClick=${() => setOpen(true)}>Write a reply…</button>`;
  const sugg = suggest !== null ? state.users.filter((u) => u.active && u.name.toLowerCase().includes(suggest.toLowerCase())).slice(0, 6) : [];
  return html`<div class="composer ${compact ? 'compact' : ''}"
    onDragOver=${(e) => e.preventDefault()} onDrop=${(e) => { e.preventDefault(); setFiles([...files, ...e.dataTransfer.files]); }}>
    <textarea ref=${ta} rows=${compact ? 2 : 3} placeholder=${parentId ? 'Write a reply… (@ to mention)' : 'Write an update and mention others with @'} value=${text}
      onInput=${onInput} autofocus=${autoFocus}
      onKeyDown=${(e) => {
        if (sugg.length && (e.key === 'Enter' || e.key === 'Tab')) { e.preventDefault(); pick(sugg[0]); return; }
        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submit();
        if (e.key === 'Escape') setSuggest(null);
      }}
      onPaste=${(e) => { const fs = [...(e.clipboardData?.files || [])]; if (fs.length) { e.preventDefault(); setFiles([...files, ...fs]); } }} />
    ${sugg.length ? html`<div class="mention-pop">${sugg.map((u) => html`<button key=${u.id} onMouseDown=${(e) => { e.preventDefault(); pick(u); }}><${Avatar} user=${u} size=${22} />${u.name}</button>`)}</div>` : null}
    ${files.length ? html`<div class="composer-files">${files.map((f, i) => html`<span key=${i} class="chip">${f.name}<button onClick=${() => setFiles(files.filter((_, j) => j !== i))}><${Icon} name="x" size=${10} /></button></span>`)}</div>` : null}
    <div class="composer-actions">
      <button class="icon-btn" title="Attach files" onClick=${() => fileIn.current.click()}><${Icon} name="paperclip" /></button>
      <button class="icon-btn" title="Mention someone" onClick=${() => { setText(text + (text && !text.endsWith(' ') ? ' @' : '@')); setSuggest(''); ta.current.focus(); }}>@</button>
      <input type="file" multiple hidden ref=${fileIn} onChange=${(e) => setFiles([...files, ...e.target.files])} />
      <span class="spacer" />
      ${compact ? html`<button class="btn ghost sm" onClick=${() => setOpen(false)}>Cancel</button>` : null}
      <button class="btn primary sm" disabled=${busy || (!text.trim() && !files.length)} onClick=${submit}>${busy ? 'Posting…' : parentId ? 'Reply' : 'Update'}</button>
    </div>
  </div>`;
}

function UpdateCard({ u, replies, reload, itemId, boardId, isReply }) {
  const me = state.me;
  const author = state.usersById[u.user_id];
  const [editing, setEditing] = useState(false);
  const [replying, setReplying] = useState(false);
  const liked = u.likes?.includes(me.id);
  const mine = u.user_id === me.id || me.role === 'admin';
  const cardMenu = (e) => menu(e, [
    { label: 'Edit', icon: 'edit', onClick: () => setEditing(true) },
    { label: 'Copy text', icon: 'copy', onClick: () => navigator.clipboard?.writeText(u.body.replace(/@\[([^\]]+)\]\([\w-]+\)/g, '@$1')) },
    { label: 'Delete', icon: 'trash', danger: true, onClick: async () => { if (await confirmDialog({ title: 'Delete this update?' })) { await api.del(`/api/updates/${u.id}`); reload(); loadBoard(boardId); } } },
  ], { align: 'right' });
  return html`<article class="update ${isReply ? 'reply' : ''}">
    <header class="update-head">
      <${Avatar} user=${author || { name: u.author_name || 'Imported', email: u.author_name || '' }} size=${isReply ? 28 : 34} />
      <div class="update-meta"><strong>${author?.name || u.author_name || 'Imported'}</strong>
        <span class="muted small" title=${new Date(u.created_at).toLocaleString()}>${timeAgo(u.created_at)}${u.edited_at ? ' · edited' : ''}</span></div>
      ${mine ? html`<button class="icon-btn" onClick=${cardMenu}><${Icon} name="dots" /></button>` : null}
    </header>
    ${editing ? html`<${EditUpdate} u=${u} done=${() => { setEditing(false); reload(); }} />`
      : html`<div class="update-body"><${RichText} text=${u.body} /></div>`}
    ${u.files?.length ? html`<div class="update-files">${u.files.map((f) => isImage(f)
      ? html`<a key=${f.id} href=${fileUrl(f)} target="_blank" rel="noopener"><img src=${fileUrl(f)} alt=${f.name} loading="lazy" /></a>`
      : html`<a key=${f.id} class="file-chip" href=${fileUrl(f)} target="_blank" rel="noopener"><${Icon} name="file" /> ${f.name}</a>`)}</div>` : null}
    <footer class="update-actions">
      <button class=${liked ? 'on' : ''} onClick=${async () => { await api.post(`/api/updates/${u.id}/like`); reload(); }}>
        <${Icon} name="thumb" /> ${liked ? 'Liked' : 'Like'}${u.likes?.length ? ` · ${u.likes.length}` : ''}</button>
      ${!isReply ? html`<button onClick=${() => setReplying(true)}><${Icon} name="reply" /> Reply</button>` : null}
    </footer>
    ${replies.length || replying ? html`<div class="replies">
      ${replies.map((r) => html`<${UpdateCard} key=${r.id} u=${r} replies=${[]} reload=${reload} itemId=${itemId} boardId=${boardId} isReply=${true} />`)}
      ${replying ? html`<${Composer} itemId=${itemId} parentId=${u.id} onPosted=${() => { setReplying(false); reload(); }} boardId=${boardId} compact=${true} autoFocus=${true} />` : null}
    </div>` : null}
  </article>`;
}

function EditUpdate({ u, done }) {
  const [v, setV] = useState(u.body);
  return html`<div class="composer"><textarea rows="4" value=${v} onInput=${(e) => setV(e.target.value)} autofocus />
    <div class="composer-actions"><span class="spacer" /><button class="btn ghost sm" onClick=${done}>Cancel</button>
    <button class="btn primary sm" onClick=${async () => { await api.patch(`/api/updates/${u.id}`, { body: v }); done(); }}>Save</button></div></div>`;
}

// ─── Info (all columns + subitems) ───────────────────────
function Info({ board, item, subs, viewId, detail }) {
  const boardId = board.board.id;
  const [newSub, setNewSub] = useState('');
  const creator = state.usersById[item.created_by];
  return html`<div class="info">
    <div class="info-grid">
      ${board.columns.map((c) => html`<div key=${c.id} class="info-row">
        <div class="info-label"><span class="type-dot" style=${{ background: COLUMN_TYPES[c.type]?.color }}><${Icon} name=${COLUMN_TYPES[c.type]?.icon || 'edit'} size=${11} /></span>${c.title}</div>
        <div class="info-value tc-${c.type}"><${Cell} board=${board} col=${c} item=${item} /></div>
      </div>`)}
    </div>
    ${!item.parent_id ? html`<div class="info-subitems">
      <h4>Subitems <span class="muted">${subs.length}</span></h4>
      ${subs.map((s) => {
        const status = board.columns.find((c) => c.type === 'status');
        return html`<div key=${s.id} class="sub-line">
          <button class="link" onClick=${() => navigate(boardPath(boardId, { viewId, itemId: s.id }))}>${s.name}</button>
          ${status ? html`<div class="sub-status cell-status"><${Cell} board=${board} col=${status} item=${s} /></div>` : null}
        </div>`;
      })}
      <input class="input sm" placeholder="+ Add subitem" value=${newSub} onInput=${(e) => setNewSub(e.target.value)}
        onKeyDown=${async (e) => { if (e.key === 'Enter' && newSub.trim()) { const n = newSub.trim(); setNewSub(''); await A.createItem(boardId, { parent_id: item.id, name: n }); } }} />
    </div>` : null}
    <p class="muted small info-foot">Created ${creator ? `by ${creator.name} ` : ''}on ${fmtDate(ymd(new Date(item.created_at)), { year: true })} · Updated ${timeAgo(item.updated_at)} ago</p>
  </div>`;
}

// ─── Files ───────────────────────────────────────────────
function Files({ item, detail, reload, boardId }) {
  const input = useRef();
  const [busy, setBusy] = useState(false);
  const upload = async (list) => {
    if (!list?.length) return;
    setBusy(true);
    const fd = new FormData();
    for (const f of list) fd.append('files', f);
    try { await api.post(`/api/items/${item.id}/files`, fd); reload(); loadBoard(boardId); } catch (e) { toast(e.message, 'error'); }
    setBusy(false);
  };
  return html`<div class="files-tab" onDragOver=${(e) => e.preventDefault()} onDrop=${(e) => { e.preventDefault(); upload(e.dataTransfer.files); }}>
    <button class="dropzone" onClick=${() => input.current.click()}><${Icon} name="upload" size=${24} /><span>${busy ? 'Uploading…' : 'Drag files here or click to upload'}</span></button>
    <input type="file" multiple hidden ref=${input} onChange=${(e) => upload(e.target.files)} />
    <div class="file-grid">
      ${detail.files.map((f) => html`<div key=${f.id} class="file-card">
        <a href=${fileUrl(f)} target="_blank" rel="noopener" class="file-thumb">${isImage(f) ? html`<img src=${fileUrl(f)} alt="" loading="lazy" />` : html`<span class="file-ext big">${(f.name.split('.').pop() || '').slice(0, 4).toUpperCase()}</span>`}</a>
        <div class="file-info"><span class="file-name" title=${f.name}>${f.name}</span><span class="muted small">${fmtSize(f.size)} · ${timeAgo(f.created_at)}</span></div>
        <div class="file-actions">
          <a class="icon-btn" href=${fileUrl(f, true)} title="Download"><${Icon} name="download" /></a>
          <button class="icon-btn" title="Delete" onClick=${async () => { if (await confirmDialog({ title: `Delete ${f.name}?` })) { await api.del(`/api/files/${f.id}`); reload(); loadBoard(boardId); } }}><${Icon} name="trash" /></button>
        </div>
      </div>`)}
    </div>
  </div>`;
}

// ─── Activity ────────────────────────────────────────────
export function activityText(a) {
  const d = a.data || {};
  switch (a.action) {
    case 'item_created': return 'created this item';
    case 'renamed': return html`renamed from <s>${d.from}</s> to <b>${d.to}</b>`;
    case 'moved_group': return html`moved to group <b>${d.to}</b>`;
    case 'moved_board': return 'moved from another board';
    case 'value': return html`<span class="act-col">${d.column}</span> ${d.from ? html`<span class="act-from">${d.from}</span> → ` : ''}<span class="act-to">${d.to || '(cleared)'}</span>`;
    case 'update_posted': return 'posted an update';
    case 'file_added': return html`added ${(d.names || []).join(', ')}`;
    case 'archived': return 'archived this item';
    default: return a.action.replace(/_/g, ' ');
  }
}
function Activity({ detail }) {
  return html`<div class="activity">
    ${detail.activity.map((a) => html`<div key=${a.id} class="act-row">
      <span class="muted small act-time">${timeAgo(a.created_at)}</span>
      <${Avatar} user=${state.usersById[a.user_id] || (a.user_id ? null : { name: 'Automation', email: 'auto' })} size=${24} />
      <span class="act-who">${state.usersById[a.user_id]?.name || 'Automation'}</span>
      <span class="act-what">${activityText(a)}</span>
    </div>`)}
    ${!detail.activity.length ? html`<p class="muted pad">No activity yet.</p>` : null}
  </div>`;
}