import { useState } from 'react';
import { useStore, isEdict, STATE_LABEL } from '../store';
import type { Task, FlowEntry, TaskNode } from '../api';

export default function MemorialPanel() {
  const liveStatus = useStore((s) => s.liveStatus);
  const [filter, setFilter] = useState('all');
  const [detailTask, setDetailTask] = useState<Task | null>(null);
  const toast = useStore((s) => s.toast);

  const tasks = liveStatus?.tasks || [];

  const isTerminal = (t: Task) => {
    const st = t.status || t.state || '';
    return ['Done', 'Cancelled', 'completed', 'cancelled', 'failed'].includes(st);
  };
  const matchFilter = (t: Task, f: string) => {
    if (f === 'all') return true;
    const st = t.status || t.state || '';
    if (f === 'Done') return ['Done', 'completed'].includes(st);
    if (f === 'Cancelled') return ['Cancelled', 'cancelled'].includes(st);
    if (f === 'failed') return st === 'failed';
    return st === f;
  };
  let mems = tasks.filter((t) => isEdict(t) && isTerminal(t));
  if (filter !== 'all') mems = mems.filter((t) => matchFilter(t, filter));

  const exportMemorial = (t: Task) => {
    const fl = t.flow_log || [];
    let md = `# 📜 奏折 · ${t.title}\n\n`;
    md += `- **任务编号**: ${t.id}\n`;
    md += `- **状态**: ${t.status || t.state}\n`;
    md += `- **负责部门**: ${t.org}\n`;
    if (fl.length) {
      const startAt = fl[0].at ? fl[0].at.substring(0, 19).replace('T', ' ') : '未知';
      const endAt = fl[fl.length - 1].at ? fl[fl.length - 1].at.substring(0, 19).replace('T', ' ') : '未知';
      md += `- **开始时间**: ${startAt}\n`;
      md += `- **完成时间**: ${endAt}\n`;
    }
    md += `\n## 流转记录\n\n`;
    for (const f of fl) {
      md += `- **${f.from}** → **${f.to}**  \n  ${f.remark}  \n  _${(f.at || '').substring(0, 19)}_\n\n`;
    }
    if (t.output && t.output !== '-') md += `## 产出物\n\n\`${t.output}\`\n`;
    navigator.clipboard.writeText(md).then(
      () => toast('✅ 奏折已复制为 Markdown', 'ok'),
      () => toast('复制失败', 'err')
    );
  };

  return (
    <div>
      {/* Filter */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 16, alignItems: 'center' }}>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>筛选：</span>
        {[
          { key: 'all', label: '全部' },
          { key: 'Done', label: '✅ 已完成' },
          { key: 'Cancelled', label: '🚫 已取消' },
          { key: 'failed', label: '❌ 已失败' },
        ].map((f) => (
          <span
            key={f.key}
            className={`sess-filter${filter === f.key ? ' active' : ''}`}
            onClick={() => setFilter(f.key)}
          >
            {f.label}
          </span>
        ))}
      </div>

      {/* List */}
      <div className="mem-list">
        {!mems.length ? (
          <div className="mem-empty">暂无奏折 — 任务完成后自动生成</div>
        ) : (
          mems.map((t) => {
            const fl = t.flow_log || [];
            const depts = [...new Set(fl.map((f) => f.from).concat(fl.map((f) => f.to)).filter((x) => x && x !== '皇上' && x !== '主公'))];
            const firstAt = fl.length ? (fl[0].at || '').substring(0, 16).replace('T', ' ') : '';
            const lastAt = fl.length ? (fl[fl.length - 1].at || '').substring(0, 16).replace('T', ' ') : '';
            const stVal = t.status || t.state || '';
            const stIcon = ['Done', 'completed'].includes(stVal) ? '✅' : ['Cancelled', 'cancelled'].includes(stVal) ? '🚫' : '❌';
            return (
              <div className="mem-card" key={t.id} onClick={() => setDetailTask(t)}>
                <div className="mem-icon">📜</div>
                <div className="mem-info">
                  <div className="mem-title">
                    {stIcon} {t.title || t.id}
                  </div>
                  <div className="mem-sub">
                    {t.id} · {t.org || ''} · 流转 {fl.length} 步
                  </div>
                  <div className="mem-tags">
                    {depts.slice(0, 5).map((d) => (
                      <span className="mem-tag" key={d}>{d}</span>
                    ))}
                  </div>
                </div>
                <div className="mem-right">
                  <span className="mem-date">{firstAt}</span>
                  {lastAt !== firstAt && <span className="mem-date">{lastAt}</span>}
                </div>
              </div>
            );
          })
        )}
      </div>

      {/* Detail Modal */}
      {detailTask && (
        <MemorialDetailModal task={detailTask} onClose={() => setDetailTask(null)} onExport={exportMemorial} />
      )}
    </div>
  );
}

function MemorialDetailModal({
  task: t,
  onClose,
  onExport,
}: {
  task: Task;
  onClose: () => void;
  onExport: (t: Task) => void;
}) {
  const fl = t.flow_log || [];
  const st = t.status || t.state || 'Unknown';
  const stIcon = ['Done', 'completed'].includes(st) ? '✅' : ['Cancelled', 'cancelled'].includes(st) ? '🚫' : st === 'failed' ? '❌' : '🔄';
  const depts = [...new Set(fl.map((f) => f.from).concat(fl.map((f) => f.to)).filter((x) => x && x !== '皇上' && x !== '主公'))];

  // Reconstruct phases — support both edict and moziplus terminology
  const originLog: FlowEntry[] = [];
  const planLog: FlowEntry[] = [];
  const reviewLog: FlowEntry[] = [];
  const execLog: FlowEntry[] = [];
  const resultLog: FlowEntry[] = [];
  for (const f of fl) {
    if (f.from === '皇上' || f.from === '主公') originLog.push(f);
    else if (f.to === '中书省' || f.from === '中书省' || f.to === '庞统' || f.from === '庞统') planLog.push(f);
    else if (f.to === '门下省' || f.from === '门下省' || f.to === '司马懿' || f.from === '司马懿') reviewLog.push(f);
    else if (f.remark && (f.remark.includes('完成') || f.remark.includes('回奏') || f.remark.includes('交付'))) resultLog.push(f);
    else execLog.push(f);
  }

  const renderPhase = (title: string, icon: string, items: FlowEntry[]) => {
    if (!items.length) return null;
    return (
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>
          {icon} {title}
        </div>
        <div className="md-timeline">
          {items.map((f, i) => {
            const dotCls = f.remark?.includes('✅') ? 'green' : f.remark?.includes('驳') ? 'red' : '';
            return (
              <div className="md-tl-item" key={i}>
                <div className={`md-tl-dot ${dotCls}`} />
                <div style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}>
                  <span className="md-tl-from">{f.from}</span>
                  <span className="md-tl-to">→ {f.to}</span>
                </div>
                <div className="md-tl-remark">{f.remark}</div>
                <div className="md-tl-time">{(f.at || '').substring(0, 19).replace('T', ' ')}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  // Extract nodes from task.nodes
  const nodes = t.nodes || [];

  // Extract challenges from sourceMeta.challenges
  const challenges = (t.sourceMeta?.challenges || []) as Array<{ verdict?: string; feedback?: string }>;

  return (
    <div className="modal-bg open" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div className="modal-body">
          <div style={{ fontSize: 11, color: 'var(--acc)', fontWeight: 700, letterSpacing: '.04em', marginBottom: 4 }}>{t.id}</div>
          <div style={{ fontSize: 20, fontWeight: 800, marginBottom: 6 }}>{stIcon} {t.title || t.id}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
            <span className={`tag st-${st}`}>{STATE_LABEL[st] || st}</span>
            <span style={{ fontSize: 11, color: 'var(--muted)' }}>{t.org}</span>
            <span style={{ fontSize: 11, color: 'var(--muted)' }}>流转 {fl.length} 步</span>
            {depts.map((d) => (
              <span className="mem-tag" key={d}>{d}</span>
            ))}
          </div>

          {t.now && (
            <div style={{ background: 'var(--panel2)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px', marginBottom: 18, fontSize: 12, color: 'var(--muted)' }}>
              {t.now}
            </div>
          )}

          {renderPhase('主公下令', '👑', originLog)}
          {renderPhase('庞统拆解', '📋', planLog)}
          {renderPhase('司马懿审核', '🔍', reviewLog)}
          {renderPhase('将军执行', '⚔️', execLog)}
          {renderPhase('汇总交付', '📨', resultLog)}

          {/* 各营回报 — 节点产出预览 */}
          {(() => {
            if (nodes.length === 0) return null;
            return (
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>🏕️ 各营回报</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {nodes.map((n: TaskNode, i: number) => {
                    const isDone = ['completed', 'Done', 'done'].includes(n.status);
                    const isFailed = ['failed', 'Failed'].includes(n.status);
                    const icon = isDone ? '✅' : isFailed ? '❌' : '🔄';
                    return (
                      <div key={n.node_id || i} style={{ background: 'var(--panel2)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                          <span>{icon}</span>
                          <span style={{ fontSize: 12, fontWeight: 600 }}>{n.name || n.node_id}</span>
                          {n.agent_id && <span style={{ fontSize: 11, color: 'var(--muted)' }}>· {n.agent_id}</span>}
                          <span className="mem-tag" style={{ marginLeft: 'auto' }}>{n.status}</span>
                        </div>
                        {isDone && n.output_summary && (
                          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
                            {n.output_summary.length > 200 ? n.output_summary.substring(0, 200) + '…' : n.output_summary}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })()}

          {/* 磋商实录 — 挑战记录 */}
          {(() => {
            if (challenges.length === 0) return null;
            return (
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>⚔️ 磋商实录</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {challenges.map((c: { verdict?: string; feedback?: string }, i: number) => {
                    const verdictIcon = c.verdict === 'pass' ? '✅' : c.verdict === 'fail' ? '❌' : '🔄';
                    return (
                      <div key={i} style={{ background: 'var(--panel2)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                          <span>{verdictIcon}</span>
                          <span style={{ fontSize: 12, fontWeight: 600 }}>第 {i + 1} 轮</span>
                          <span className="mem-tag">{c.verdict}</span>
                        </div>
                        {c.feedback && (
                          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
                            {c.feedback.length > 200 ? c.feedback.substring(0, 200) + '…' : c.feedback}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })()}

          {t.output && t.output !== '-' && (
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 4 }}>📦 产出物</div>
              <code style={{ fontSize: 11, wordBreak: 'break-all' }}>{t.output}</code>
            </div>
          )}

          <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
            <button className="btn btn-g" onClick={() => onExport(t)} style={{ fontSize: 12, padding: '6px 16px' }}>
              📋 复制奏折
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
