// HelperMatch Admin — Messages center (READ-ONLY conversation log)
// Admin can: browse conversations, filter, search, export.
// Admin CANNOT: send messages, freeze threads, intervene, flag content.
// HelperMatch sees only metadata — conversations are private between employer & candidate.

const msgTimeRel = (d) => {
  if (!d) return '';
  const diff = (Date.now() - new Date(d).getTime()) / 60000;
  if (diff < 1) return '剛剛';
  if (diff < 60) return Math.floor(diff) + ' 分';
  if (diff < 1440) return Math.floor(diff / 60) + ' 小時';
  if (diff < 10080) return Math.floor(diff / 1440) + ' 天';
  const D = new Date(d);
  return (D.getMonth() + 1) + '/' + D.getDate();
};
const msgTimeFull = (d) => {
  const D = new Date(d);
  return `${D.getMonth()+1}/${D.getDate()} ${String(D.getHours()).padStart(2,'0')}:${String(D.getMinutes()).padStart(2,'0')}`;
};
const msgDateHeader = (d) => {
  const D = new Date(d);
  const now = new Date();
  const isToday = D.toDateString() === now.toDateString();
  const y = new Date(now); y.setDate(y.getDate() - 1);
  const isYest = D.toDateString() === y.toDateString();
  if (isToday) return '今天';
  if (isYest) return '昨天';
  return `${D.getFullYear()}/${D.getMonth()+1}/${D.getDate()}`;
};

const NAT_FLAG = { ID: '🇮🇩', PH: '🇵🇭', VN: '🇻🇳', TH: '🇹🇭' };

const MessagesPage = () => {
  const { user } = useAuth();
  const { navigate } = useRoute();
  const { t } = useI18n();
  const toast = useToast();
  const threads = ADMIN.threads || [];
  const messages = ADMIN.messages || [];

  const [selId, setSelId] = useState(() => {
    const sorted = threads.slice().sort((a,b)=> new Date(b.lastMessageAt) - new Date(a.lastMessageAt));
    return sorted[0]?.id;
  });
  const [filter, setFilter] = useState('ALL'); // ALL / RECENT / ACTIVE / DORMANT
  const [q, setQ] = useState('');
  const streamRef = useRef(null);

  useEffect(() => {
    if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight;
  }, [selId]);

  const filtered = useMemo(() => {
    let list = threads.slice();
    if (filter === 'RECENT') {
      const cutoff = Date.now() - 24 * 3600 * 1000;
      list = list.filter(t => new Date(t.lastMessageAt).getTime() >= cutoff);
    }
    if (filter === 'ACTIVE') list = list.filter(t => t.messageCount >= 10);
    if (filter === 'DORMANT') {
      const cutoff = Date.now() - 7 * 24 * 3600 * 1000;
      list = list.filter(t => new Date(t.lastMessageAt).getTime() < cutoff);
    }
    if (q) {
      const qL = q.toLowerCase();
      list = list.filter(t =>
        (t.employerName || '').toLowerCase().includes(qL) ||
        (t.candidateName || '').toLowerCase().includes(qL) ||
        (t.jobTitle || '').toLowerCase().includes(qL) ||
        (t.jobCity || '').toLowerCase().includes(qL) ||
        (t.jobId || '').toLowerCase().includes(qL)
      );
    }
    list.sort((a,b) => new Date(b.lastMessageAt) - new Date(a.lastMessageAt));
    return list;
  }, [threads, filter, q]);

  const sel = threads.find(t => t.id === selId);
  const selMsgs = useMemo(() => sel ? messages.filter(m => m.threadId === sel.id && m.from !== 'admin' && m.from !== 'system').sort((a,b)=> new Date(a.at) - new Date(b.at)) : [], [sel, messages]);

  const counts = {
    ALL: threads.length,
    RECENT: threads.filter(t => (Date.now() - new Date(t.lastMessageAt).getTime()) < 24*3600*1000).length,
    ACTIVE: threads.filter(t => t.messageCount >= 10).length,
    DORMANT: threads.filter(t => (Date.now() - new Date(t.lastMessageAt).getTime()) >= 7*24*3600*1000).length,
  };

  // KPI row
  const totalMessages = messages.filter(m => m.from !== 'admin' && m.from !== 'system').length;
  const uniqueEmployers = new Set(threads.map(t => t.employerId)).size;
  const uniqueCandidates = new Set(threads.map(t => t.candidateId)).size;
  const last24hMessages = messages.filter(m => m.from !== 'admin' && m.from !== 'system' && (Date.now() - new Date(m.at).getTime()) < 24*3600*1000).length;

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.messages.title')}</h1>
          <p className="a-page-sub">{t('admin.messages.subtitle')}</p>
        </div>
        <div className="a-page-header-actions">
          {/* Message metadata export — Super Admin only (privacy gate). */}
          {isSuperAdmin(user) && <button className="a-btn a-btn-default" onClick={()=>toast(t('common.export') + ' ✓', 'success')}><AIcon name="download" size={13}/> {t('admin.messages.exportMeta')}</button>}
        </div>
      </div>

      {/* KPI row */}
      <div className="grid-4 mb-16">
        <div className="a-stat">
          <div className="a-stat-label">{t('admin.messages.activeThreads')}</div>
          <div className="a-stat-value tnum">{threads.length}</div>
          <div className="a-stat-foot">{t('admin.messages.recent24h')} {counts.RECENT}</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">{t('admin.messages.totalMessages')}</div>
          <div className="a-stat-value tnum">{totalMessages.toLocaleString()}</div>
          <div className="a-stat-foot">{t('common.today')} +{last24hMessages}</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">{t('admin.messages.uniqueEmployers')}</div>
          <div className="a-stat-value tnum">{uniqueEmployers}</div>
          <div className="a-stat-foot"> </div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">{t('admin.messages.uniqueCandidates')}</div>
          <div className="a-stat-value tnum">{uniqueCandidates}</div>
          <div className="a-stat-foot"> </div>
        </div>
      </div>

      {/* Privacy notice */}
      <div className="mb-16" style={{padding:'12px 16px', background:'#FFF8EC', border:'1px solid #F7D27A', borderRadius:10}}>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <div style={{color:'#B54708'}}><AIcon name="shield" size={16}/></div>
          <div style={{flex:1}}>
            <div style={{fontSize:13,fontWeight:600,color:'#8A6508',marginBottom:2}}>{t('admin.messages.privacyTitle')}</div>
            <div style={{fontSize:12,color:'#AC8118',lineHeight:1.55}}>
              {t('admin.messages.privacyBody')}
            </div>
          </div>
        </div>
      </div>

      <div className="a-card" style={{padding:0, overflow:'hidden'}}>
        <div className="a-msg-log-layout">
          {/* Thread list */}
          <div className="a-thread-list-inline">
            <div className="a-thread-list-head">
              <div className="a-input-group mb-10">
                <span className="a-input-group-prefix"><AIcon name="search" size={13}/></span>
                <input className="a-input" placeholder={t('common.search')} value={q} onChange={e=>setQ(e.target.value)}/>
              </div>
              <div className="flex items-center gap-6 flex-wrap">
                {[
                  ['ALL', t('common.all')],
                  ['RECENT', t('admin.messages.recent24h')],
                  ['ACTIVE', t('admin.messages.active')],
                  ['DORMANT', t('admin.messages.dormant')],
                ].map(([k,label]) => (
                  <button key={k} className={`a-thread-filter ${filter===k?'active':''}`} onClick={()=>setFilter(k)}>
                    {label} <span style={{marginLeft:4,opacity:0.75}}>{counts[k]}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="a-thread-items">
              {filtered.length === 0 && (
                <div className="a-empty" style={{padding:'40px 16px'}}>
                  <div className="a-empty-ic"><AIcon name="mail" size={18}/></div>
                  <div className="a-empty-title">無對話</div>
                  <div className="a-empty-sub">調整篩選條件試試</div>
                </div>
              )}
              {/* Thread rows root the JOB at the top — every conversation
                  starts from a candidate applying to a specific job, so the
                  job title is the most useful signal for triaging. The two
                  parties (employer ↔ candidate) sit underneath. */}
              {filtered.map(t => (
                <div key={t.id} className={`a-thread-item ${t.id===selId?'active':''}`} onClick={()=>setSelId(t.id)}>
                  <div className="a-thread-item-ava" style={{background:'var(--a-primary-bg, #FBE2D5)', color:'var(--a-primary, #B85A2C)'}}>
                    <AIcon name="briefcase" size={14}/>
                  </div>
                  <div className="a-thread-item-body">
                    <div className="a-thread-item-top">
                      <span className="a-thread-item-name" title={t.jobTitle || ''}>
                        {t.jobTitle || <span style={{fontStyle:'italic',color:'var(--a-ink-muted)'}}>未關聯職缺</span>}
                      </span>
                      <span className="a-thread-item-time">{msgTimeRel(t.lastMessageAt)}</span>
                    </div>
                    <div className="a-thread-item-snippet">
                      {t.employerName} <AIcon name="arrowRight" size={10}/> {t.candidateName} {NAT_FLAG[t.candidateNat] || ''}
                    </div>
                    <div className="a-thread-item-foot">
                      {t.jobMarket && <span className="a-chip" style={{fontSize:10,padding:'1px 6px'}}>{t.jobMarket}{t.jobCity ? ` · ${t.jobCity}` : ''}</span>}
                      <span className="a-chip" style={{fontSize:10,padding:'1px 6px'}}>{t.messageCount} 則</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Chat pane — read only */}
          {!sel && (
            <div className="a-chat">
              <div className="a-chat-empty">
                <AIcon name="mail" size={36} stroke={1.2}/>
                <div className="fs-14 fw-600 mt-10" style={{color:'var(--a-ink)'}}>{t('admin.messages.selectThread')}</div>
                <div className="fs-12 mt-4">{t('admin.messages.selectThreadHint')}</div>
              </div>
            </div>
          )}

          {sel && <>
            <div className="a-chat">
              {/* Chat header — job is the root signal. Title is the
                  prominent line, with the two parties + job location
                  shown as supporting metadata underneath. */}
              <div className="a-chat-head">
                <div className="a-chat-head-ava" style={{background:'var(--a-primary-bg, #FBE2D5)', color:'var(--a-primary, #B85A2C)'}}>
                  <AIcon name="briefcase" size={16}/>
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div className="fw-600 fs-14" style={{whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
                    {sel.jobTitle || <span style={{fontStyle:'italic',color:'var(--a-ink-muted)'}}>未關聯職缺</span>}
                    {sel.jobId && <Mono style={{fontSize:11, marginLeft:8, opacity:0.6}}>{sel.jobId}</Mono>}
                  </div>
                  <div className="flex items-center gap-8 fs-12 text-muted mt-2" style={{flexWrap:'wrap'}}>
                    <span className="fw-500" style={{color:'var(--a-ink-soft)'}}>{sel.employerName}</span>
                    <AIcon name="arrowRight" size={10}/>
                    <span className="fw-500" style={{color:'var(--a-ink-soft)'}}>{sel.candidateName} {NAT_FLAG[sel.candidateNat] || ''}</span>
                    {sel.jobMarket && <><span style={{color:'var(--a-line-strong)'}}>·</span><span><Flag code={sel.jobMarket}/> {sel.jobCity}</span></>}
                    <span style={{color:'var(--a-line-strong)'}}>·</span>
                    <span>{sel.messageCount} 則</span>
                  </div>
                </div>
                <div className="flex items-center gap-6">
                  <button className="a-btn a-btn-ghost" title={t('admin.messages.exportThread')} onClick={()=>toast(t('common.export') + ' ✓', 'success')}>
                    <AIcon name="download" size={14}/>
                  </button>
                </div>
              </div>
              <div ref={streamRef} className="a-chat-stream">
                {selMsgs.map((m, i) => {
                  const prev = selMsgs[i-1];
                  const showDate = !prev || msgDateHeader(prev.at) !== msgDateHeader(m.at);
                  return <React.Fragment key={m.id}>
                    {showDate && <div style={{textAlign:'center', fontSize:11, color:'var(--a-ink-faint)', margin:'8px 0 4px'}}>{msgDateHeader(m.at)}</div>}
                    <Bubble m={m} thread={sel}/>
                  </React.Fragment>;
                })}
              </div>
              <div className="a-chat-readonly-bar">
                <AIcon name="lock2" size={12}/>
                <span>{t('admin.messages.readonly')}</span>
              </div>
            </div>

            {/* Side panel */}
            <ThreadSidePanel thread={sel} msgs={selMsgs} navigate={navigate} t={t}/>
          </>}
        </div>
      </div>
    </div>
  );
};

const Bubble = ({ m, thread }) => {
  const side = m.from; // 'emp' or 'cnd'
  const name = side === 'emp' ? thread.employerName : thread.candidateName;
  const initial = (name || '?').slice(0,1).toUpperCase();
  return (
    <div className={`a-bubble-row ${side}`}>
      <div className={`a-bubble-ava ${side}`} title={name}>{initial}</div>
      <div style={{minWidth:0, maxWidth:'100%'}}>
        <div className={`a-bubble ${side}`}>{m.body}</div>
        <div className="a-bubble-time">{msgTimeFull(m.at)}</div>
      </div>
    </div>
  );
};

const ThreadSidePanel = ({ thread, msgs, navigate }) => {
  const emp = (ADMIN.employers || []).find(e => e.id === thread.employerId);
  const cnd = (ADMIN.candidates || []).find(c => c.id === thread.candidateId);
  const empMsgs = msgs.filter(m => m.from === 'emp').length;
  const cndMsgs = msgs.filter(m => m.from === 'cnd').length;
  const firstMsgAt = msgs[0]?.at;
  const lastMsgAt = msgs[msgs.length - 1]?.at;
  const durationDays = firstMsgAt && lastMsgAt ? Math.max(1, Math.ceil((new Date(lastMsgAt) - new Date(firstMsgAt)) / 86400000)) : 0;

  return (
    <aside className="a-msg-side">
      {/* Job card — the root of every conversation. Reorder so the job
          appears at the TOP of the side panel above the parties (it's the
          "what is this conversation about" anchor). Wired to the admin
          Jobs page via deep-link. */}
      <div className="a-msg-side-section">
        <h3 className="a-msg-side-h">職缺（對話根)</h3>
        {thread.jobId ? (() => {
          const job = (ADMIN.jobs || []).find(j => j.id === thread.jobId);
          return (
            <>
              <div className="fs-13 fw-600 mb-4" style={{lineHeight:1.4}}>{thread.jobTitle}</div>
              <div className="fs-11 text-muted" style={{lineHeight:1.6}}>
                <Mono>{thread.jobId}</Mono>
                {thread.jobMarket && <> · <Flag code={thread.jobMarket}/> {thread.jobCity}</>}
                {thread.jobStatus && <> · <span className="fw-500">{
                  thread.jobStatus === 'ACTIVE' ? '上架中' :
                  thread.jobStatus === 'PENDING_REVIEW' ? '待審核' :
                  thread.jobStatus === 'DRAFT' ? '草稿' :
                  thread.jobStatus === 'CLOSED' ? '已下架' :
                  thread.jobStatus === 'EXPIRED' ? '已過期' :
                  thread.jobStatus
                }</span></>}
              </div>
              {job && (
                <div className="fs-11 text-muted mt-6" style={{lineHeight:1.6}}>
                  {job.position || job.jobType} · {job.type || 'Live-in'}
                  {(job.salaryText || (job.salaryMin && job.salaryMax)) && <> · <span className="fw-500" style={{color:'var(--a-ink-soft)'}}>{job.salaryText || `${job.salaryCurrency || 'NT$'}${Number(job.salaryMin).toLocaleString()}-${Number(job.salaryMax).toLocaleString()}/mo`}</span></>}
                </div>
              )}
              <div className="mt-8">
                <button
                  className="a-btn a-btn-ghost"
                  style={{padding:'4px 8px', fontSize:11}}
                  onClick={() => navigate && navigate('/jobs?id=' + thread.jobId)}
                >
                  查看職缺
                </button>
              </div>
            </>
          );
        })() : (
          <div className="fs-12 text-muted">未關聯職缺（可疑外撥對話）</div>
        )}
      </div>

      <div className="a-msg-side-section">
        <h3 className="a-msg-side-h">雇主</h3>
        <div className="fs-13 fw-600">{thread.employerName}</div>
        <div className="fs-11 text-muted">{emp?.email}</div>
        {emp && <div className="fs-11 text-muted mt-2">
          <AIcon name="globe" size={10}/> {emp.homeMarket || emp.market} · {(emp.subscription || '').toUpperCase()}
        </div>}
        <div className="mt-6 flex gap-6">
          <button className="a-btn a-btn-ghost" style={{padding:'4px 8px',fontSize:11}} onClick={()=>navigate && navigate('/employers?id='+thread.employerId)}>查看資料</button>
        </div>
      </div>

      <div className="a-msg-side-section">
        <h3 className="a-msg-side-h">候選人</h3>
        <div className="fs-13 fw-600">{thread.candidateName} {NAT_FLAG[thread.candidateNat] || ''}</div>
        <div className="fs-11 text-muted">{cnd?.id} · {cnd?.status}{cnd?.tier ? ` · Tier ${cnd.tier}` : ''}</div>
        <div className="mt-6 flex gap-6">
          <button className="a-btn a-btn-ghost" style={{padding:'4px 8px',fontSize:11}} onClick={()=>navigate && navigate('/candidates?id='+thread.candidateId)}>查看資料</button>
        </div>
      </div>

      <div className="a-msg-side-section">
        <h3 className="a-msg-side-h">對話統計</h3>
        <div className="fcol gap-6">
          <div className="flex items-center jc-between fs-12">
            <span className="text-muted">總訊息數</span><span className="fw-700 tnum">{msgs.length}</span>
          </div>
          <div className="flex items-center jc-between fs-12">
            <span className="text-muted">雇主發送</span><span className="fw-600 tnum">{empMsgs}</span>
          </div>
          <div className="flex items-center jc-between fs-12">
            <span className="text-muted">候選人發送</span><span className="fw-600 tnum">{cndMsgs}</span>
          </div>
          <div style={{height:1, background:'var(--a-line)', margin:'4px 0'}}/>
          <div className="flex items-center jc-between fs-12">
            <span className="text-muted">對話期間</span><span className="fw-600 tnum">{durationDays} 天</span>
          </div>
          <div className="flex items-center jc-between fs-12">
            <span className="text-muted">最後活動</span><span className="fw-600">{msgTimeRel(thread.lastMessageAt)}前</span>
          </div>
        </div>
      </div>

      <div className="a-msg-side-section">
        <h3 className="a-msg-side-h">稽核工具</h3>
        <div className="fcol gap-6">
          <button className="a-btn a-btn-default w-full" style={{fontSize:12}} onClick={()=>alert('已產生對話稽核報告 (PDF)')}>
            <AIcon name="download" size={12}/> 產生稽核報告
          </button>
          <div className="fs-11 text-muted" style={{lineHeight:1.5}}>
            稽核報告含完整對話、時間戳、雙方資料，可用於糾紛處理或法律要求。
          </div>
        </div>
      </div>
    </aside>
  );
};

Object.assign(window, { MessagesPage });