// Intake — one inbox for every channel, AI triaged (two-pane).
function IntakeRow({ item, sel, onClick }) {
  return (
    <div className={`in-row ${sel ? 'sel' : ''}`} onClick={onClick}>
      <div className="left">
        <div className="chan"><Icon name={item.chan} /></div>
        <span className={`prio ${item.prio}`}>{item.prio.toUpperCase()}</span>
      </div>
      <div>
        <div className="bldg">{siteOf(item.bldg).short} · {siteOf(item.bldg).sp} · {item.channel}</div>
        <div className="summ">{item.summ}</div>
        <div className="meta"><span className="ai"><Icon name="sparkles" />{item.ai}</span></div>
      </div>
      <div className="rt"><span className="tm">{item.time}</span><TagFromStatus status={item.statusLabel} /></div>
    </div>
  );
}

function IntakeDetail({ item }) {
  return (
    <div className="detail">
      <div className="det-head">
        <div className="bldg">{item.id} · {item.time} ago</div>
        <h2>{item.summ}</h2>
        <div className="site-line">
          <Icon name="map-pin" />
          <span>{siteOf(item.bldg).short}</span>
          <span className="sep">·</span>
          <span>{siteOf(item.bldg).sp}</span>
          {(() => { const m = (item.kv.Reporter || '').match(/(Lot|Unit)\s+\w+/i); return m ? <React.Fragment><span className="sep">·</span><span>{m[0]}</span></React.Fragment> : null; })()}
        </div>
        <BuildingLocation address={item.bldg.replace(/^[^-]+-\s*/, '').trim() + ', Australia'} size="card" />
        <div className="row">
          <Tag prio={item.prio} />
          <TagFromStatus status={item.statusLabel} />
          <Tag stage="triaged">{item.kv.Category}</Tag>
        </div>
      </div>
      <div className="det-body">
        {item.story && (
          <section className="story" aria-label="Thread story">
            <header className="story-h">
              <span className="story-ic"><Icon name="book-open" /></span>
              <div>
                <div className="story-t">What's the story?</div>
                <div className="story-s">A plain-English summary, for anyone reading the ticket.</div>
              </div>
              {item.story.by && (
                <span className={`story-by ${item.status === 'urgent' ? 'urgent' : item.status === 'warning' ? 'warn' : ''}`}>
                  <Icon name="clock" />{item.story.by}
                </span>
              )}
            </header>
            <ol className="story-rows">
              <li className="story-row started">
                <span className="dot"></span>
                <div><div className="k">How it started</div><p>{item.story.started}</p></div>
              </li>
              <li className="story-row sofar">
                <span className="dot"></span>
                <div><div className="k">What's happened since</div><p>{item.story.sofar}</p></div>
              </li>
              <li className={`story-row next ${item.story.by ? '' : 'done'}`}>
                <span className="dot"></span>
                <div><div className="k">What we need to do next</div><p>{item.story.next}</p></div>
              </li>
            </ol>
          </section>
        )}
        <div className="ai-card">
          <div className="hd"><Icon name="sparkles" />Opsmera AI · triage</div>
          <p>{item.aiSummary}</p>
        </div>
        {item.rec && item.rec.action && (
          <AiBlock title="Opsmera AI · recommended next step" body={item.rec.do} basis={item.rec.basis}
            actions={[[item.rec.action, 'zap'], ['Why this', 'help-circle']]} />
        )}
        <div className="blk">
          <h4>Workflow</h4>
          {item.flow.map(([state, icon, tx, sub], i) => (
            <div key={i} className={`flow-step ${state}`}>
              <div className="ic"><Icon name={state === 'done' ? 'check' : icon} /></div>
              <div className="tx">{tx}{sub && <small>{sub}</small>}</div>
            </div>
          ))}
        </div>
        <div className="blk">
          <h4>Details</h4>
          <dl style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '10px 14px', fontSize: 13, margin: 0 }}>
            {Object.entries(item.kv).map(([k, v]) => (
              <React.Fragment key={k}><dt style={{ color: 'var(--fg-3)' }}>{k}</dt><dd style={{ color: 'var(--fg-1)', margin: 0 }}>{v}</dd></React.Fragment>
            ))}
          </dl>
        </div>
      </div>
      <div className="det-actions">
        <button className="btn btn-primary" onClick={() => act('Vendor assignment opened', { kind: 'info', icon: 'user-round-plus', sub: 'Pick a trade for ' + item.id })}><Icon name="user-round-plus" />Assign vendor</button>
        <button className="btn btn-ghost" onClick={() => act('Scheduling ' + item.id, { kind: 'info', icon: 'calendar', sub: 'Choose a window with the resident' })}><Icon name="calendar" />Schedule</button>
        <button className="btn btn-ghost" onClick={() => act('Marked resolved', { kind: 'resolved', sub: item.id + ' closed with an audit trail' })}><Icon name="check" />Resolve</button>
      </div>
    </div>
  );
}

// Persona authority — which intake tickets each persona can see.
// Maintenance lead only sees work for trades; treasurer only governance/finance;
// building manager only operational tickets at their building; strata sees all.
function authorityFilter(persona, t) {
  if (!persona) return true;
  const cat = (t.kv && t.kv.Category) || '';
  const bldg = (t.bldg || '').toLowerCase();
  if (persona.id === 'strata') return true;
  if (persona.id === 'treasurer') {
    if (!bldg.startsWith('harbourview')) return false;
    return ['Strata', 'Compliance', 'Fire safety'].includes(cat);
  }
  if (persona.id === 'building') {
    if (!bldg.startsWith('the lumen')) return false;
    return ['Maintenance', 'Fire safety', 'Compliance'].includes(cat);
  }
  if (persona.id === 'maintenance') {
    // Cameron sees tradework across all his sites, never strata governance issues.
    return ['Maintenance', 'Fire safety', 'Compliance'].includes(cat);
  }
  return true;
}

function Intake({ persona }) {
  // Authority-filtered universe of tickets for this persona.
  const POOL = INTAKE.filter(t => authorityFilter(persona, t));
  const [sel, setSel] = React.useState((POOL[0] && POOL[0].id) || (INTAKE[0] && INTAKE[0].id));
  const pid = persona && persona.id;
  // Default filter changes by persona — Cameron lands on Maintenance, Helen on Strata, etc.
  const defaultFilter = pid === 'maintenance' ? 'Maintenance' : pid === 'treasurer' ? 'Strata' : 'Open';
  const [filter, setFilter] = React.useState(defaultFilter);
  const [showDetail, setShowDetail] = React.useState(false); // mobile master-detail
  const isMobile = useIsMobile(820);
  // Persona-aware filter chips. Maintenance never gets a Strata chip; treasurer never gets Maintenance.
  const allFilters = ['Open', 'All', 'Closed', 'Urgent', 'Maintenance', 'Strata', 'Compliance'];
  const filters = allFilters.filter(f => {
    if (['Open','All','Closed','Urgent'].includes(f)) return true;
    if (pid === 'maintenance') return ['Maintenance','Compliance'].includes(f);
    if (pid === 'treasurer') return ['Strata','Compliance'].includes(f);
    if (pid === 'building') return ['Maintenance','Compliance'].includes(f);
    return true;
  });
  const matchFilter = (t) => {
    if (filter === 'All') return true;
    if (filter === 'Open') return !t.resolved;
    if (filter === 'Closed') return !!t.resolved;
    if (filter === 'Urgent') return t.status === 'urgent' || t.prio === 'p1';
    return (t.kv?.Category || '').toLowerCase() === filter.toLowerCase();
  };
  const visible = POOL.filter(matchFilter);
  // If current selection is filtered out, drop to first visible.
  React.useEffect(() => { if (visible.length && !visible.find(t => t.id === sel)) setSel(visible[0].id); }, [filter, pid]);
  const item = POOL.find(t => t.id === sel) || visible[0];
  const pick = id => { setSel(id); setShowDetail(true); };
  return (
    <div className="view"><div className={`split ${showDetail ? 'show-detail' : ''}`}>
      <div className="split-list">
        <div className="in-toolbar">
          <div className="seg">{filters.map(f => <button key={f} className={f === filter ? 'on' : ''} onClick={() => setFilter(f)}>{f}{(f === 'Open' || f === 'Closed') && <span className="seg-count">{POOL.filter(t => f === 'Open' ? !t.resolved : !!t.resolved).length}</span>}</button>)}</div>
        </div>
        {visible.map(t => <IntakeRow key={t.id} item={t} sel={t.id === sel} onClick={() => pick(t.id)} />)}
        {visible.length === 0 && <div className="intake-empty"><Icon name="check-check" /><h4>Nothing in this filter</h4><p>All clear - try another filter.</p></div>}
      </div>
      <div className="split-detail">
        {isMobile && <button className="detail-back" onClick={() => setShowDetail(false)}><Icon name="arrow-left" />All intake</button>}
        {item && (item.resolved ? <ResolvedRecord item={item} /> : <IntakeDetail item={item} />)}
      </div>
    </div></div>
  );
}
Object.assign(window, { Intake });