// Inbox.jsx — the heart of the ticketing system (3-pane: filters / list / detail)

function useInboxSelection() {
  const [id, setId] = React.useState(() => localStorage.getItem('gtm.ticket') || 'GTM-142');
  React.useEffect(() => { if (id) localStorage.setItem('gtm.ticket', id); }, [id]);
  return [id, setId];
}

// Derive filter predicate from the left-rail view id
function filterFromView(viewId) {
  const v = GTM_VIEWS.find(x => x.id === viewId);
  if (v) return v.filter;
  if (viewId && viewId.startsWith('team-')) {
    const team = viewId.slice(5);
    return (t) => t.requester === team;
  }
  return () => true;
}

function viewLabel(viewId) {
  const v = GTM_VIEWS.find(x => x.id === viewId);
  if (v) return v.label;
  if (viewId && viewId.startsWith('team-')) {
    const t = TEAMS.find(x => x.id === viewId.slice(5));
    return t ? `${t.label} requests` : 'Team';
  }
  return 'All tickets';
}

// ----- Ticket row in the middle list column -----
function TicketRow({ ticket: t, selected, onClick, layout }) {
  const req = TEAMS.find(x => x.id === t.requester);
  return (
    <div className={`ticket-row ${selected ? 'on' : ''}`} onClick={onClick}>
      <div className="tr-top">
        <StatusChip status={t.status} size="sm" />
        <span className="tr-id">{t.id}</span>
        <span className="tr-updated">{t.updatedAt || t.createdAt}</span>
      </div>
      <div className="tr-title">{t.title}</div>
      <div className="tr-goal">
        <span className="tr-goal-kicker">Goal</span>
        {t.jtbd.outcome}
      </div>
      <div className="tr-foot">
        <span className="tr-req" style={{ color: req?.color }}>
          <span className="d" style={{ background: req?.color }} />
          {req?.label}
        </span>
        <div className="tr-labels">
          {t.labels.slice(0, 2).map(l => <LabelChip key={l} id={l} />)}
        </div>
        <div className="tr-right">
          <PriorityChip priority={t.priority} />
          {t.owner ? <Person id={t.owner} size={20} /> : <span className="tr-unassigned">Unassigned</span>}
        </div>
      </div>
      {t.status === 'progress' && (
        <div className="tr-progress">
          <ProgressBar pct={t.progress} color={STATUSES.find(s => s.id === 'progress').color} />
          <span className="tr-phase">{PHASES.find(p => p.id === t.phase)?.label}</span>
        </div>
      )}
    </div>
  );
}

// ----- The narrative detail view (right pane) -----
function TicketDetail({ ticket, onClose, onPostToSlack, onAddComment }) {
  const [commentText, setCommentText] = React.useState('');

  const handleAddComment = () => {
    if (!commentText.trim() || !ticket) return;
    ticket.comments.push({ who: 'LR', when: 'just now', body: commentText.trim() });
    onAddComment && onAddComment();
    setCommentText('');
  };

  if (!ticket) {
    return (
      <div className="detail empty">
        <Icon name="TrayIcon" size={36} style={{ color: 'var(--neutral-300)' }} />
        <div style={{ marginTop: 12, fontSize: 14, color: 'var(--text-neutral-subtle)' }}>Select a ticket to read the brief</div>
      </div>
    );
  }
  const t = ticket;
  const req = TEAMS.find(x => x.id === t.requester);
  const phaseIdx = PHASES.findIndex(p => p.id === t.phase);
  const pm = PEOPLE[t.reporterPm];

  return (
    <div className="detail">
      {/* Header */}
      <div className="detail-head">
        <div className="dh-breadcrumb">
          <span>Inbox</span>
          <Icon name="CaretRightIcon" size={10} />
          <span>{req?.label}</span>
          <Icon name="CaretRightIcon" size={10} />
          <span className="here">{t.id}</span>
        </div>
        <div className="dh-actions">
          <Button variant="ghost" size="sm" icon="ShareNetworkIcon">Share</Button>
          <Button variant="secondary" size="sm" icon="ChatCircleIcon"
                  onClick={() => onPostToSlack && onPostToSlack(t)}>
            Post to #gtm-funnel
          </Button>
          <Button variant="secondary" size="sm" icon="PencilIcon">Edit</Button>
          {onClose && <Button variant="ghost" size="sm" icon="XIcon" onClick={onClose} />}
        </div>
      </div>

      <div className="detail-body">
        <div className="detail-main">
          {/* Title block */}
          <div className="d-title">
            <div className="d-meta">
              <StatusChip status={t.status} />
              <PriorityChip priority={t.priority} />
              {t.labels.map(l => <LabelChip key={l} id={l} />)}
              <span className="d-id">{t.id}</span>
            </div>
            <h1>{t.title}</h1>
            <div className="d-sub">
              Requested by <b>{t.requesterPeople.map(id => PEOPLE[id]?.name).filter(Boolean).join(', ')}</b> on <TeamChip id={t.requester} />
              {t.owner && <> · Owned by <Person id={t.owner} size={18} showName /></>}
              {pm && <> · PM <Person id={t.reporterPm} size={18} showName /></>}
            </div>
          </div>

          {/* The Ultimate Goal — hero block */}
          <div className="goal-hero">
            <div className="gh-kicker">
              <Icon name="TargetIcon" size={12} weight="fill" />
              Ultimate goal
            </div>
            <div className="gh-body">
              <span className="gh-when">When</span> {t.jtbd.when},
              {' '}<span className="gh-need">I need</span> {t.jtbd.need},
              {' '}<span className="gh-so">so that</span> {t.jtbd.outcome}.
            </div>
            {t.impactStatement && (
              <div className="gh-impact">
                <Icon name="LightningIcon" size={12} weight="fill" />
                <span>{t.impactStatement}</span>
              </div>
            )}
          </div>

          {/* Progress rail (only meaningful for in-progress / shipped) */}
          {t.status !== 'triage' && (
            <div className="prog-rail-wrap">
              <div className="prog-rail">
                <div className="prog-rail-fill" style={{ width: `${(phaseIdx / (PHASES.length - 1)) * 100}%` }} />
                {PHASES.map((p, i) => (
                  <div key={p.id} className={`prog-node ${i < phaseIdx ? 'done' : i === phaseIdx ? 'current' : ''}`}>
                    <span className="pn-dot" />
                    <span className="pn-label">{p.label}</span>
                  </div>
                ))}
              </div>
              <div className="prog-meta">
                <span><b>{t.progress}%</b> complete</span>
                {t.targetShip && <span>Target ship <b>{t.targetShip}</b></span>}
                {t.shippedAt && <span>Shipped <b>{t.shippedAt}</b></span>}
              </div>
            </div>
          )}

          {/* Narrative sections */}
          <section className="narr">
            <div className="narr-label">
              <Icon name="WarningIcon" size={11} weight="fill" style={{ color: '#dc2626' }} /> Problem
            </div>
            <p><MD text={t.problem} /></p>
          </section>

          <section className="narr">
            <div className="narr-label">
              <Icon name="WrenchIcon" size={11} weight="fill" style={{ color: 'var(--brand-500)' }} /> Approach
            </div>
            <p><MD text={t.approach} /></p>
          </section>

          {/* Success metric hero — big number */}
          {t.baselineMetric && (
            <section className="metric-card-hero">
              <div className="mh-kicker">Success metric</div>
              <div className="mh-label">{t.baselineMetric.label}</div>
              <div className="mh-nums">
                <div className={`mh-now ${t.baselineMetric.improved ? 'improved' : ''}`}>
                  {t.baselineMetric.improved && <div className="mh-was">was {t.baselineMetric.was}</div>}
                  <div className="mh-v">{t.baselineMetric.now}</div>
                  <div className="mh-l">now</div>
                </div>
                <Icon name="ArrowRightIcon" size={20} style={{ color: 'var(--neutral-300)' }} />
                <div className="mh-target">
                  <div className="mh-v">{t.baselineMetric.target}</div>
                  <div className="mh-l">target</div>
                </div>
              </div>
              {t.supportMetrics && t.supportMetrics.length > 0 && (
                <div className="mh-sup">
                  {t.supportMetrics.map((m, i) => (
                    <div key={i} className="mh-sup-row">
                      <span className="l">{m.label}</span>
                      <span className="w">
                        {m.improved && <span className="from">{m.was}</span>}
                        {m.improved && <Icon name="ArrowRightIcon" size={10} style={{ color: 'var(--neutral-400)' }} />}
                        <span className="n">{m.now}</span>
                        <span className="sep">→</span>
                        <span className="t">{m.target}</span>
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </section>
          )}

          {/* Milestones */}
          {t.milestones && t.milestones.length > 0 && (
            <section className="narr">
              <div className="narr-label">
                <Icon name="FlagIcon" size={11} weight="fill" style={{ color: 'var(--brand-500)' }} /> Milestones
              </div>
              <div className="mstones">
                {t.milestones.map((m, i) => (
                  <div key={i} className={`mstone ${m.status}`}>
                    <div className="ms-dot">
                      {m.status === 'done' && <Icon name="CheckIcon" size={10} weight="bold" color="#fff" />}
                      {m.status === 'doing' && <span className="ms-pulse" />}
                    </div>
                    <div className="ms-body">
                      <div className="ms-t">{m.label}</div>
                      <div className="ms-d">{m.date}</div>
                    </div>
                  </div>
                ))}
              </div>
            </section>
          )}

          {/* Risks */}
          {t.risks && t.risks.length > 0 && (
            <section className="narr">
              <div className="narr-label">
                <Icon name="WarningIcon" size={11} weight="fill" style={{ color: '#f59e0b' }} /> Risks & blockers
              </div>
              <div className="risks">
                {t.risks.map((r, i) => (
                  <div key={i} className={`risk-row ${r.level}`}>
                    <span className="rl-bar" />
                    <div className="rl-body">
                      <div className="rl-t">{r.title}</div>
                      <div className="rl-m">Mitigation: {r.mitigation}</div>
                    </div>
                    <Badge variant={r.level === 'high' ? 'danger' : r.level === 'med' ? 'warning' : 'neutral'}>{r.level}</Badge>
                  </div>
                ))}
              </div>
            </section>
          )}

          {/* Conversation / comments */}
          <section className="narr">
            <div className="narr-label">
              <Icon name="ChatCircleIcon" size={11} weight="fill" style={{ color: 'var(--brand-500)' }} /> Discussion
            </div>
            {t.comments && t.comments.length > 0 && (
              <div className="comments">
                {t.comments.map((c, i) => {
                  const p = PEOPLE[c.who];
                  return (
                    <div key={i} className="comment">
                      <Person id={c.who} size={26} />
                      <div className="c-body">
                        <div className="c-head">
                          <b>{p?.name}</b>
                          <span className="c-role">{p?.role}</span>
                          <span className="c-when">{c.when}</span>
                        </div>
                        <div className="c-text">{c.body}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
            <div className="comment-compose" style={{ marginTop: t.comments?.length > 0 ? 14 : 0 }}>
              <Person id="LR" size={26} />
              <input
                className="inp"
                placeholder="Add a comment…"
                value={commentText}
                onChange={e => setCommentText(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleAddComment(); } }}
              />
              <Button variant="primary" size="sm" onClick={handleAddComment}>Reply</Button>
            </div>
          </section>
        </div>

        {/* Sidebar column */}
        <aside className="detail-side">
          <div className="ds-block">
            <div className="ds-label">Status</div>
            <StatusChip status={t.status} />
          </div>
          <div className="ds-block">
            <div className="ds-label">Priority</div>
            <PriorityChip priority={t.priority} />
          </div>
          <div className="ds-block">
            <div className="ds-label">Requester team</div>
            <TeamChip id={t.requester} />
          </div>
          <div className="ds-block">
            <div className="ds-label">Requesters</div>
            <div className="ds-people">
              {t.requesterPeople.map(id => (
                <div key={id} className="ds-person">
                  <Person id={id} size={20} showName />
                  <span className="ds-role">{PEOPLE[id]?.role}</span>
                </div>
              ))}
            </div>
          </div>
          {t.owner && (
            <div className="ds-block">
              <div className="ds-label">Owner</div>
              <div className="ds-person">
                <Person id={t.owner} size={20} showName />
                <span className="ds-role">{PEOPLE[t.owner]?.role}</span>
              </div>
            </div>
          )}
          {t.team && t.team.length > 0 && (
            <div className="ds-block">
              <div className="ds-label">GTM Eng team</div>
              <div className="ds-people">
                {t.team.map(id => (
                  <div key={id} className="ds-person">
                    <Person id={id} size={20} showName />
                    <span className="ds-role">{PEOPLE[id]?.role}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
          <div className="ds-block">
            <div className="ds-label">Labels</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {t.labels.map(l => <LabelChip key={l} id={l} />)}
            </div>
          </div>
          <div className="ds-block">
            <div className="ds-label">Dates</div>
            <div className="ds-kv"><span>Created</span><span>{t.createdAt}</span></div>
            <div className="ds-kv"><span>Updated</span><span>{t.updatedAt || '—'}</span></div>
            {t.targetShip && <div className="ds-kv"><span>Target ship</span><span>{t.targetShip}</span></div>}
            {t.shippedAt && <div className="ds-kv"><span>Shipped</span><span>{t.shippedAt}</span></div>}
          </div>

          {/* Activity feed — the "daily standup" auto-log */}
          <div className="ds-block ds-activity">
            <div className="ds-label">Activity</div>
            <div className="act-feed">
              {t.activity.map((a, i) => (
                <div key={i} className={`act-item ${a.bot ? 'bot' : ''}`}>
                  <div className="act-ic">
                    <Icon name={a.icon || 'ChatCircleIcon'} size={12} weight={a.bot ? 'fill' : 'regular'} />
                  </div>
                  <div className="act-b">
                    <div className="act-w"><MD text={a.what} /></div>
                    <div className="act-m">
                      <Person id={a.who} size={14} />
                      <span>{PEOPLE[a.who]?.name || a.who}</span>
                      <span>·</span>
                      <span>{a.t}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ----- The main inbox (list + detail) -----
function KanbanCard({ ticket, selected, onClick }) {
  const team = TEAMS.find(x => x.id === ticket.requester);
  return (
    <button type="button" className={`kanban-card ${selected ? 'active' : ''}`} onClick={onClick}>
      <div className="kanban-card-top">
        <span className="kanban-card-id">{ticket.id}</span>
        <PriorityChip priority={ticket.priority} />
      </div>
      <div className="kanban-card-title">{ticket.title}</div>
      <div className="kanban-card-goal">{ticket.jtbd.outcome}</div>
      <div className="kanban-card-foot">
        <span className="kanban-card-team" style={{ color: team?.color }}>
          <span className="d" style={{ background: team?.color }} />
          {team?.label}
        </span>
        {ticket.owner ? <Person id={ticket.owner} size={20} /> : <span className="kanban-card-unassigned">Unassigned</span>}
      </div>
    </button>
  );
}

function InboxPage({ view, onSelectView, layout = 'split', onOpenTicket, selectedId, onSelect, onPostToSlack, onChangeLayout, onAddComment }) {
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [sort, setSort] = React.useState('updated');

  const baseFilter = filterFromView(view);
  let tickets = TICKETS.filter(baseFilter);
  if (statusFilter !== 'all') tickets = tickets.filter(t => t.status === statusFilter);

  // Sort
  tickets = [...tickets].sort((a, b) => {
    if (sort === 'priority') {
      const order = { urgent: 0, high: 1, med: 2, low: 3 };
      return order[a.priority] - order[b.priority];
    }
    if (sort === 'status') {
      const order = { progress: 0, triage: 1, shipped: 2, done: 3 };
      return order[a.status] - order[b.status];
    }
    return 0; // default: data order (already approx. updated desc)
  });

  // Group by status for the list
  const groups = [
    { id: 'progress', label: 'In progress' },
    { id: 'triage',   label: 'Triage' },
    { id: 'shipped',  label: 'Shipped' },
    { id: 'done',     label: 'Done' },
  ];
  const layoutOptions = [
    { id: 'kanban', label: 'Kanban', icon: 'KanbanIcon' },
    { id: 'split', label: 'Split', icon: 'TableIcon' },
    { id: 'full-detail', label: 'Detail', icon: 'TrayIcon' },
    { id: 'list-only', label: 'List', icon: 'ListChecksIcon' },
  ];

  const selected = TICKETS.find(t => t.id === selectedId);

  const listPane = (
    <div className="inbox-list">
      <div className="il-head">
        <div className="il-title">
          <h2>{viewLabel(view)}</h2>
          <span className="il-count">{tickets.length}</span>
        </div>
        <div className="il-actions">
          <div className="il-filters">
            {['all', 'progress', 'triage', 'shipped'].map(s => {
              const n = s === 'all' ? TICKETS.filter(baseFilter).length : TICKETS.filter(baseFilter).filter(t => t.status === s).length;
              const label = s === 'all' ? 'All' : STATUSES.find(x => x.id === s)?.short;
              return (
                <button key={s} className={`chip-btn ${statusFilter === s ? 'on' : ''}`} onClick={() => setStatusFilter(s)}>
                  {label} <span className="n">{n}</span>
                </button>
              );
            })}
          </div>
          <div className="il-controls">
            <div className="layout-switcher">
              {layoutOptions.map(option => (
                <button
                  type="button"
                  key={option.id}
                  className={`layout-chip ${layout === option.id ? 'on' : ''}`}
                  onClick={() => onChangeLayout && onChangeLayout(option.id)}
                >
                  <Icon name={option.icon} size={12} />
                  {option.label}
                </button>
              ))}
            </div>
            <select className="il-sort" value={sort} onChange={e => setSort(e.target.value)}>
              <option value="updated">Sort: Updated</option>
              <option value="priority">Sort: Priority</option>
              <option value="status">Sort: Status</option>
            </select>
          </div>
        </div>
      </div>

      <div className="il-body">
        {groups.map(g => {
          const items = tickets.filter(t => t.status === g.id);
          if (items.length === 0) return null;
          return (
            <div key={g.id} className="il-group">
              <div className="il-group-head">
                <StatusChip status={g.id} size="sm" />
                <span>{g.label}</span>
                <span className="n">{items.length}</span>
              </div>
              {items.map(t => (
                <TicketRow
                  key={t.id}
                  ticket={t}
                  selected={t.id === selectedId}
                  onClick={() => (onOpenTicket || onSelect)(t.id)}
                  layout={layout}
                />
              ))}
            </div>
          );
        })}
        {tickets.length === 0 && (
          <div className="il-empty">
            <Icon name="TrayIcon" size={32} style={{ color: 'var(--neutral-300)' }} />
            <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-neutral-subtle)' }}>No tickets match this view.</div>
          </div>
        )}
      </div>
    </div>
  );

  if (layout === 'kanban') {
    return (
      <div className="inbox layout-kanban">
        <div className="kanban-shell">
          <div className="kanban-head">
            <div>
              <h2>{viewLabel(view)}</h2>
              <div className="kanban-sub">Grouped by delivery stage so new requests and shipped work stay visible at the same time.</div>
            </div>
            <div className="layout-switcher">
              {layoutOptions.map(option => (
                <button
                  key={option.id}
                  className={`layout-chip ${layout === option.id ? 'on' : ''}`}
                  onClick={() => onChangeLayout && onChangeLayout(option.id)}
                >
                  <Icon name={option.icon} size={12} />
                  {option.label}
                </button>
              ))}
            </div>
          </div>
          <div className="kanban-board">
            {groups.map(group => {
              const items = tickets.filter(t => t.status === group.id);
              return (
                <section key={group.id} className="kanban-column">
                  <div className="kanban-column-head">
                    <StatusChip status={group.id} size="sm" />
                    <span>{group.label}</span>
                    <span className="n">{items.length}</span>
                  </div>
                  <div className="kanban-column-body">
                    {items.length === 0 ? (
                      <div className="kanban-empty">No tickets in this lane.</div>
                    ) : items.map(ticket => (
                      <KanbanCard
                        key={ticket.id}
                        ticket={ticket}
                        selected={ticket.id === selectedId}
                        onClick={() => (onOpenTicket || onSelect)(ticket.id)}
                      />
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  if (layout === 'list-only') {
    return <div className="inbox layout-list-only">{listPane}</div>;
  }

  if (layout === 'full-detail') {
    return (
      <div className="inbox layout-full">
        {selected
          ? <TicketDetail ticket={selected} onClose={() => onSelect(null)} onPostToSlack={onPostToSlack} onAddComment={onAddComment} />
          : listPane}
      </div>
    );
  }

  // default: split
  return (
    <div className="inbox layout-split">
      {listPane}
      <TicketDetail ticket={selected} onClose={() => onSelect(null)} onPostToSlack={onPostToSlack} onAddComment={onAddComment} />
    </div>
  );
}

Object.assign(window, { InboxPage, TicketDetail, TicketRow, useInboxSelection, KanbanCard });