import { useEffect, useState } from 'react';
import { useMailStore } from '../stores/mailStore';
import { useSessionStore } from '../stores/sessionStore';
import { useUIStore } from '../stores/uiStore';
import type { Mail } from '../types';
import { groupMailsBySession, isFlatGroup, splitByPermission, type MailGroup } from '../lib/mailGroups';
import { ShieldIcon, PaperclipIcon, ChevronRightIcon } from './icons';
import { participantAddress } from '../lib/replyTarget';

export default function MailList() {
  const viewMode = useUIStore(s => s.viewMode);
  const cancelCompose = useUIStore(s => s.cancelCompose);
  const showDetail = useUIStore(s => s.showDetail);

  const inbox = useMailStore(s => s.inbox);
  const sent = useMailStore(s => s.sent);
  const currentMail = useMailStore(s => s.currentMail);
  const selectMail = useMailStore(s => s.selectMail);
  const fetchInbox = useMailStore(s => s.fetchInbox);
  const fetchSent = useMailStore(s => s.fetchSent);
  const clearSession = useSessionStore(s => s.clearSession);

  // 哪些会话组被展开。默认全部折叠 —— 收件箱的问题正是「一次任务的几十封信
  // 淹掉其他任务」，默认展开等于没分组
  const [expanded, setExpanded] = useState<Set<string>>(new Set());

  useEffect(() => {
    if (viewMode === 'sent') fetchSent();
    else if (viewMode === 'inbox') fetchInbox('all');
  }, [viewMode]);

  // 切换收件箱/发件箱时收起所有组：两个箱子的会话集合不同，
  // 留着上一个箱子的展开状态会让人以为某个组「自己展开了」
  useEffect(() => {
    setExpanded(new Set());
  }, [viewMode]);

  const isSent = viewMode === 'sent';
  // 权限请求已经有自己的导航项（授权），收件箱只放要读的内容。
  // 不过滤的后果实测过：一个会话的 17 封权限邮件把另外两个会话的信挤出视野。
  // 发件箱不筛：人发不出权限请求（那是 Agent 发的），筛也筛不掉什么。
  const source = isSent ? sent : splitByPermission(inbox).normal;
  const list = source;
  const groups = groupMailsBySession(list);

  const toggle = (sessionId: string) => {
    setExpanded(prev => {
      const next = new Set(prev);
      if (next.has(sessionId)) next.delete(sessionId);
      else next.add(sessionId);
      return next;
    });
  };

  const pick = (m: Mail) => {
    clearSession();
    cancelCompose();
    selectMail(m);
    // 窄屏下列表与详情共用一栏，选中后要切过去；
    // 宽屏下这个状态不影响渲染（两栏并排），但仍然维护 ——
    // 否则从窄屏拖宽再拖回来，用户会发现自己回到了列表，刚打开的邮件不见了
    showDetail();
  };

  return (
    <div className="w-full lg:w-[320px] shrink-0 border-r border-gray-200 bg-white flex flex-col min-w-0">
      <div className="px-4 py-3 border-b border-gray-200 flex items-center gap-1">
        <h2 className="text-sm font-semibold text-gray-800">{isSent ? '发件箱' : '收件箱'}</h2>
        {/* 显示「会话数 · 邮件数」而不是只显示邮件数：分组之后前者才是
            「有几件事」，后者只是流量 */}
        <span className="ml-2 text-xs text-gray-500">
          {groups.length > 0 && groups.length !== list.length
            ? `${groups.length} 组 · ${list.length} 封`
            : list.length}
        </span>
      </div>

      <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
        {groups.map(g =>
          isFlatGroup(g) ? (
            <MailItem
              key={g.latest.mail_id}
              mail={g.latest}
              active={currentMail?.mail_id === g.latest.mail_id}
              showTo={isSent}
              onClick={() => pick(g.latest)}
            />
          ) : (
            <SessionGroup
              key={g.sessionId}
              group={g}
              showTo={isSent}
              open={expanded.has(g.sessionId)}
              onToggle={() => toggle(g.sessionId)}
              currentMailID={currentMail?.mail_id}
              onPick={pick}
            />
          )
        )}
        {list.length === 0 && (
          <p className="text-xs text-gray-500 text-center py-6">暂无邮件</p>
        )}
      </div>
    </div>
  );
}

/**
 * 一个会话折叠成的一组。
 *
 * 组头答的是「哪件事、进行到哪」；展开后才是逐封邮件。
 * 权限请求不在这里 —— 它们在单独的「授权」导航项里。
 */
function SessionGroup({
  group,
  showTo,
  open,
  onToggle,
  currentMailID,
  onPick
}: {
  group: MailGroup;
  showTo: boolean;
  open: boolean;
  onToggle: () => void;
  currentMailID?: string;
  onPick: (m: Mail) => void;
}) {
  const g = group;
  const time = new Date(g.latest.created_at).toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });

  // 列表行只显示「跟谁在通信」，**不带会话位**：分组头下面已经单独显示了
  // 会话别名，再拼一遍会让长别名（实测 92 字节）把这一行挤没。
  //
  // 人还是 Agent 走显式布尔；workspace 从会话取（from_workspace 对 Agent
  // 存的是 Agent 名而非路径）。
  const isPeerHuman = showTo ? g.latest.to_human : g.latest.from_human;
  const peer = participantAddress(
    showTo ? g.latest.to_name : g.latest.from_name,
    isPeerHuman,
    isPeerHuman ? '' : g.latest.session_workspace || ''
  );

  // 组内含选中邮件时给个边框，否则展开一个组再滚下去会找不到自己在看哪封
  const hasActive = currentMailID ? g.mails.some(m => m.mail_id === currentMailID) : false;

  return (
    <div
      className={`rounded-lg border ${
        hasActive ? 'border-blue-200 bg-blue-50/40' : 'border-transparent'
      }`}
    >
      <button
        onClick={onToggle}
        className="w-full text-left px-3 py-2.5 rounded-lg hover:bg-gray-50"
      >
        <div className="flex items-center gap-2">
          <ChevronRightIcon
            className={`w-3 h-3 text-gray-400 shrink-0 transition-transform ${
              open ? 'rotate-90' : ''
            }`}
          />
          <span
            className={`text-xs truncate flex-1 font-mono ${
              g.unreadCount > 0 ? 'font-semibold text-gray-900' : 'text-gray-600'
            }`}
          >
            {showTo ? '→ ' : ''}
            {peer}
          </span>
          <span className="text-[10px] text-gray-400 shrink-0">{time}</span>
        </div>

        <div className="flex items-center gap-1.5 mt-0.5 pl-5">
          {g.unreadCount > 0 && (
            <span className="shrink-0 min-w-[16px] h-4 px-1 rounded-full bg-blue-600 text-white text-[9px] font-bold flex items-center justify-center">
              {g.unreadCount}
            </span>
          )}
          <span
            className={`text-xs truncate ${
              g.unreadCount > 0 ? 'font-medium text-gray-900' : 'text-gray-500'
            }`}
          >
            {g.subject}
          </span>
        </div>

        <div className="flex items-center gap-2 mt-0.5 pl-5">
          <span className="text-[10px] text-blue-500 font-mono truncate">
            {g.alias ? `.${g.alias}` : '(未命名会话)'}
          </span>
          <span className="text-[10px] text-gray-400 shrink-0">{g.mails.length} 封</span>
        </div>
      </button>

      {open && (
        <div className="pl-5 pr-1 pb-1.5 space-y-0.5">
          {g.mails.map(m => (
            <MailItem
              key={m.mail_id}
              mail={m}
              active={currentMailID === m.mail_id}
              showTo={showTo}
              onClick={() => onPick(m)}
              compact
            />
          ))}
        </div>
      )}
    </div>
  );
}

function MailItem({
  mail,
  active,
  showTo,
  onClick,
  compact = false
}: {
  mail: Mail;
  active: boolean;
  showTo: boolean;
  onClick: () => void;
  /** 组内条目：对端信息已在组头显示，这里省掉以免每行都重复同一个地址 */
  compact?: boolean;
}) {
  const isPermission = mail.mail_type === 'permission_request';
  const isUnread = mail.status === 'unread';
  const ccCount = mail.cc_list?.length ?? 0;
  const attachCount = mail.attachments?.length ?? 0;
  const time = new Date(mail.created_at).toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });

  const isRowHuman = showTo ? mail.to_human : mail.from_human;
  const peer = participantAddress(
    showTo ? mail.to_name : mail.from_name,
    isRowHuman,
    isRowHuman ? '' : mail.session_workspace || ''
  );

  return (
    <button
      onClick={onClick}
      className={`w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${
        active ? 'bg-blue-50 border-blue-200' : 'border-transparent hover:bg-gray-50'
      }`}
    >
      <div className="flex items-center gap-2">
        <span
          className={`text-xs truncate flex-1 ${
            compact ? '' : 'font-mono'
          } ${isUnread ? 'font-semibold text-gray-900' : 'text-gray-600'}`}
        >
          {compact ? (
            <>
              {isUnread && (
                <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-500 mr-1.5 align-middle" />
              )}
              {mail.subject}
            </>
          ) : (
            <>
              {showTo ? '→ ' : ''}
              {peer}
            </>
          )}
        </span>
        <span className="text-[10px] text-gray-400 shrink-0">{time}</span>
      </div>

      {!compact && (
        <div className="flex items-center gap-1.5 mt-0.5">
          {isUnread && <span className="w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />}
          {isPermission && (
            <span className="shrink-0 inline-flex items-center gap-0.5 px-1 py-0.5 rounded bg-orange-100 text-orange-700 text-[9px] font-medium">
              <ShieldIcon className="w-2.5 h-2.5" />
              权限
            </span>
          )}
          <span
            className={`text-xs truncate ${
              isUnread ? 'font-medium text-gray-900' : 'text-gray-500'
            }`}
          >
            {mail.subject}
          </span>
        </div>
      )}

      <div className="flex items-center gap-2 mt-0.5">
        {/* 组内条目不重复显示别名（组头已有）。
            发件箱里仍可能出现权限邮件（理论上人发不出，但不假设数据一定干净） */}
        {compact && isPermission && (
          <span
            className={`inline-flex items-center gap-0.5 text-[10px] ${
              mail.permission_result ? 'text-gray-400' : 'text-orange-600 font-medium'
            }`}
          >
            <ShieldIcon className="w-2.5 h-2.5" />
            {mail.permission_result || '待决策'}
          </span>
        )}
        {!compact && mail.session_alias && (
          <span className="min-w-0 flex-1 truncate text-[10px] text-blue-600 font-mono">.{mail.session_alias}</span>
        )}
        {ccCount > 0 && <span className="text-[10px] text-gray-400">抄送 {ccCount}</span>}
        {attachCount > 0 && (
          <span className="inline-flex items-center gap-0.5 text-[10px] text-gray-400">
            <PaperclipIcon className="w-2.5 h-2.5" />
            {attachCount}
          </span>
        )}
      </div>
    </button>
  );
}