import React, { useState, useEffect, useCallback } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import {
  Activity,
  AlertTriangle,
  Clock,
  Filter,
  RefreshCw,
  ChevronLeft,
  ChevronRight,
  X,
  Link2,
  ArrowRight,
  Trash2,
} from 'lucide-react';

// ------------------------------------------------------------------ //
//  Types                                                               //
// ------------------------------------------------------------------ //

interface CallTrace {
  id: string;
  trace_id?: string;
  task_id?: string;
  parent_call_id?: string;
  call_type: 'model' | 'mcp' | 'skill';
  status: 'success' | 'failed' | 'cancelled' | 'timeout';
  started_at: number;
  ended_at?: number;
  duration_ms: number;
  name: string;
  action: string;
  mcp_key?: string;
  mcp_name?: string;
  skill_key?: string;
  skill_name?: string;
  model?: string;
  input_summary?: string;
  output_summary?: string;
  error_id?: string;
  error_message?: string;
  meta?: Record<string, unknown>;
}

interface ErrorLog {
  id: string;
  trace_id?: string;
  task_id?: string;
  call_id?: string;
  source: string;
  level: 'warning' | 'error';
  happened_at: number;
  message: string;
  recoverable: boolean;
  mcp_key?: string;
  mcp_name?: string;
  skill_key?: string;
  skill_name?: string;
  model?: string;
  action?: string;
  input_summary?: string;
  params_summary?: Record<string, unknown>;
}

interface PagedResponse<T> {
  items: T[];
  total: number;
  page: number;
  page_size: number;
}

interface Options {
  models: string[];
  mcps: { key: string; name: string }[];
  skills: { key: string; name: string }[];
  statuses: string[];
  sources: string[];
}

// ------------------------------------------------------------------ //
//  Helpers                                                             //
// ------------------------------------------------------------------ //

function formatTs(ms: number): string {
  return new Date(ms).toLocaleString('zh-CN', { hour12: false });
}

function formatDuration(ms: number): string {
  if (ms < 1000) return `${ms}ms`;
  return `${(ms / 1000).toFixed(2)}s`;
}

const STATUS_COLORS: Record<string, string> = {
  success: 'bg-green-500/20 text-green-400',
  failed: 'bg-red-500/20 text-red-400',
  timeout: 'bg-yellow-500/20 text-yellow-400',
  cancelled: 'bg-slate-500/20 text-slate-400',
  warning: 'bg-yellow-500/20 text-yellow-400',
  error: 'bg-red-500/20 text-red-400',
};

const TYPE_COLORS: Record<string, string> = {
  model: 'bg-blue-500/20 text-blue-400',
  mcp: 'bg-purple-500/20 text-purple-400',
  skill: 'bg-cyan-500/20 text-cyan-400',
};

const SOURCE_COLORS: Record<string, string> = {
  model: 'bg-blue-500/20 text-blue-400',
  llm: 'bg-blue-500/20 text-blue-400',
  mcp: 'bg-purple-500/20 text-purple-400',
  skill: 'bg-cyan-500/20 text-cyan-400',
  orchestrator: 'bg-orange-500/20 text-orange-400',
  network: 'bg-pink-500/20 text-pink-400',
};

const backUrl = 'https://ch1.b.uat.4.cn/zncmback'

function Badge({ label, colorClass }: { label: string; colorClass: string }) {
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
      {label}
    </span>
  );
}

// ------------------------------------------------------------------ //
//  API                                                                 //
// ------------------------------------------------------------------ //

async function fetchOptions(): Promise<Options> {
  const res = await fetch(`${backUrl}/api/observability/options`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

async function fetchCalls(params: Record<string, string | number | undefined>): Promise<PagedResponse<CallTrace>> {
  const qs = new URLSearchParams();
  Object.entries(params).forEach(([k, v]) => {
    if (v !== undefined && v !== null && v !== '') qs.append(k, String(v));
  });
  const res = await fetch(`${backUrl}/api/observability/calls?${qs}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

async function fetchErrors(params: Record<string, string | number | undefined>): Promise<PagedResponse<ErrorLog>> {
  const qs = new URLSearchParams();
  Object.entries(params).forEach(([k, v]) => {
    if (v !== undefined && v !== null && v !== '') qs.append(k, String(v));
  });
  const res = await fetch(`${backUrl}/api/observability/errors?${qs}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// ------------------------------------------------------------------ //
//  Shared UI atoms                                                     //
// ------------------------------------------------------------------ //

function Select({
  value, onChange, options, placeholder, cls,
}: {
  value: string; onChange: (v: string) => void;
  options: { value: string; label: string }[]; placeholder?: string; cls?: string;
}) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)}
      className={`text-sm rounded-lg border px-3 py-1.5 outline-none ${cls ?? ''}`}>
      {placeholder && <option value="">{placeholder}</option>}
      {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
}

function Pagination({ page, pageSize, total, onPage, isDark }: {
  page: number; pageSize: number; total: number; onPage: (p: number) => void; isDark: boolean;
}) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
  const btn = `p-1.5 rounded-lg transition-all disabled:opacity-40 ${isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100'}`;
  return (
    <div className={`flex items-center gap-3 text-sm ${textMuted}`}>
      <span>共 {total} 条</span>
      <div className="flex items-center gap-1">
        <button className={btn} disabled={page <= 1} onClick={() => onPage(page - 1)}><ChevronLeft className="w-4 h-4" /></button>
        <span className="px-2">{page} / {totalPages}</span>
        <button className={btn} disabled={page >= totalPages} onClick={() => onPage(page + 1)}><ChevronRight className="w-4 h-4" /></button>
      </div>
    </div>
  );
}

// ------------------------------------------------------------------ //
//  Linked items — shown inside detail modals                          //
// ------------------------------------------------------------------ //

function LinkedErrors({ callId, traceId, isDark }: { callId: string; traceId?: string; isDark: boolean }) {
  const [items, setItems] = useState<ErrorLog[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchErrors({ call_id: callId, page: 1, page_size: 10 })
      .then((r) => setItems(r.items))
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  }, [callId]);

  const label = isDark ? 'text-slate-400' : 'text-gray-500';
  const rowBg = isDark ? 'bg-red-900/20 border-red-800/30' : 'bg-red-50 border-red-200';

  if (loading) return <p className={`text-xs ${label}`}>加载相关错误…</p>;
  if (items.length === 0) return <p className={`text-xs ${label}`}>无相关错误日志</p>;
  return (
    <div className="space-y-1.5">
      {items.map((e) => (
        <div key={e.id} className={`rounded-lg border p-2.5 ${rowBg}`}>
          <div className="flex items-center gap-2 flex-wrap">
            <Badge label={e.level} colorClass={STATUS_COLORS[e.level] ?? ''} />
            <Badge label={e.source} colorClass={SOURCE_COLORS[e.source] ?? ''} />
            <span className={`text-xs ${label}`}>{formatTs(e.happened_at)}</span>
          </div>
          <p className={`text-sm mt-1 ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{e.message}</p>
        </div>
      ))}
    </div>
  );
}

function LinkedCall({ callId, isDark }: { callId: string; isDark: boolean }) {
  const [item, setItem] = useState<CallTrace | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // call_id in error = the id of the CallTrace record
    fetchCalls({ trace_id: callId, page: 1, page_size: 1 })
      .then((r) => setItem(r.items[0] ?? null))
      .catch(() => setItem(null))
      .finally(() => setLoading(false));
  }, [callId]);

  const label = isDark ? 'text-slate-400' : 'text-gray-500';
  const rowBg = isDark ? 'bg-blue-900/20 border-blue-800/30' : 'bg-blue-50 border-blue-200';

  if (loading) return <p className={`text-xs ${label}`}>加载关联调用…</p>;
  if (!item) return <p className={`text-xs ${label}`}>未找到关联调用记录（ID: {callId}）</p>;
  return (
    <div className={`rounded-lg border p-2.5 ${rowBg}`}>
      <div className="flex items-center gap-2 flex-wrap">
        <Badge label={item.call_type} colorClass={TYPE_COLORS[item.call_type] ?? ''} />
        <Badge label={item.status} colorClass={STATUS_COLORS[item.status] ?? ''} />
        <span className={`text-xs font-mono ${label}`}>{formatDuration(item.duration_ms)}</span>
        <span className={`text-xs ${label}`}>{formatTs(item.started_at)}</span>
      </div>
      <p className={`text-sm mt-1 font-medium ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{item.name}</p>
      <p className={`text-xs mt-0.5 ${label}`}>{item.action}</p>
    </div>
  );
}

// ------------------------------------------------------------------ //
//  Detail Modals                                                       //
// ------------------------------------------------------------------ //

function Section({ title, isDark, children }: { title: string; isDark: boolean; children: React.ReactNode }) {
  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';
  const label = isDark ? 'text-slate-400' : 'text-gray-500';
  return (
    <div className={`border-t pt-4 mt-4 ${divider}`}>
      <div className={`flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wide ${label}`}>
        <Link2 className="w-3.5 h-3.5" />
        {title}
      </div>
      {children}
    </div>
  );
}

function FieldRow({ label, value, isDark }: { label: string; value?: string | null; isDark: boolean }) {
  if (!value) return null;
  const rowBg = isDark ? 'bg-slate-800/40' : 'bg-gray-50';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-500';
  return (
    <div className={`rounded-lg p-2.5 ${rowBg}`}>
      <span className={`text-xs font-medium ${textSecondary}`}>{label}</span>
      <p className={`text-sm mt-0.5 break-all whitespace-pre-wrap ${textPrimary}`}>{value}</p>
    </div>
  );
}

function CallDetailModal({ item, onClose, isDark }: { item: CallTrace; onClose: () => void; isDark: boolean }) {
  const bg = isDark ? 'bg-slate-900 border-blue-800/30' : 'bg-white border-gray-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
      <div className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-xl border shadow-2xl p-6 ${bg}`}
        onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h3 className={`font-semibold text-base ${textPrimary}`}>调用详情</h3>
          <button onClick={onClose} className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}>
            <X className="w-4 h-4" />
          </button>
        </div>
        <div className="space-y-1.5">
          <FieldRow label="ID" value={item.id} isDark={isDark} />
          <FieldRow label="Trace ID" value={item.trace_id} isDark={isDark} />
          <FieldRow label="Task ID" value={item.task_id} isDark={isDark} />
          <FieldRow label="Parent Call ID" value={item.parent_call_id} isDark={isDark} />
          <FieldRow label="类型" value={item.call_type} isDark={isDark} />
          <FieldRow label="状态" value={item.status} isDark={isDark} />
          <FieldRow label="名称" value={item.name} isDark={isDark} />
          <FieldRow label="操作" value={item.action} isDark={isDark} />
          <FieldRow label="开始时间" value={formatTs(item.started_at)} isDark={isDark} />
          <FieldRow label="结束时间" value={item.ended_at ? formatTs(item.ended_at) : undefined} isDark={isDark} />
          <FieldRow label="耗时" value={formatDuration(item.duration_ms)} isDark={isDark} />
          <FieldRow label="模型" value={item.model} isDark={isDark} />
          <FieldRow label="MCP Key" value={item.mcp_key} isDark={isDark} />
          <FieldRow label="MCP 名称" value={item.mcp_name} isDark={isDark} />
          <FieldRow label="Skill Key" value={item.skill_key} isDark={isDark} />
          <FieldRow label="Skill 名称" value={item.skill_name} isDark={isDark} />
          <FieldRow label="输入摘要" value={item.input_summary} isDark={isDark} />
          <FieldRow label="输出摘要" value={item.output_summary} isDark={isDark} />
          <FieldRow label="错误信息" value={item.error_message} isDark={isDark} />
          <FieldRow label="Meta" value={item.meta && Object.keys(item.meta).length ? JSON.stringify(item.meta, null, 2) : undefined} isDark={isDark} />
        </div>

        <Section title="相关错误日志" isDark={isDark}>
          <LinkedErrors callId={item.id} traceId={item.trace_id} isDark={isDark} />
        </Section>
      </div>
    </div>
  );
}

function ErrorDetailModal({ item, onClose, isDark }: { item: ErrorLog; onClose: () => void; isDark: boolean }) {
  const bg = isDark ? 'bg-slate-900 border-blue-800/30' : 'bg-white border-gray-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
      <div className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-xl border shadow-2xl p-6 ${bg}`}
        onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h3 className={`font-semibold text-base ${textPrimary}`}>错误详情</h3>
          <button onClick={onClose} className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}>
            <X className="w-4 h-4" />
          </button>
        </div>
        <div className="space-y-1.5">
          <FieldRow label="ID" value={item.id} isDark={isDark} />
          <FieldRow label="Trace ID" value={item.trace_id} isDark={isDark} />
          <FieldRow label="Task ID" value={item.task_id} isDark={isDark} />
          <FieldRow label="Call ID" value={item.call_id} isDark={isDark} />
          <FieldRow label="来源" value={item.source} isDark={isDark} />
          <FieldRow label="级别" value={item.level} isDark={isDark} />
          <FieldRow label="发生时间" value={formatTs(item.happened_at)} isDark={isDark} />
          <FieldRow label="可恢复" value={item.recoverable ? '是' : '否'} isDark={isDark} />
          <FieldRow label="消息" value={item.message} isDark={isDark} />
          <FieldRow label="MCP Key" value={item.mcp_key} isDark={isDark} />
          <FieldRow label="MCP 名称" value={item.mcp_name} isDark={isDark} />
          <FieldRow label="Skill Key" value={item.skill_key} isDark={isDark} />
          <FieldRow label="Skill 名称" value={item.skill_name} isDark={isDark} />
          <FieldRow label="模型" value={item.model} isDark={isDark} />
          <FieldRow label="操作" value={item.action} isDark={isDark} />
          <FieldRow label="输入摘要" value={item.input_summary} isDark={isDark} />
          <FieldRow label="参数摘要" value={item.params_summary && Object.keys(item.params_summary).length ? JSON.stringify(item.params_summary, null, 2) : undefined} isDark={isDark} />
        </div>

        {item.call_id && (
          <Section title="关联调用记录" isDark={isDark}>
            <LinkedCall callId={item.call_id} isDark={isDark} />
          </Section>
        )}
      </div>
    </div>
  );
}

// ------------------------------------------------------------------ //
//  Task ID pill — clickable, stops row-click propagation              //
// ------------------------------------------------------------------ //

function TaskIdPill({
  taskId, onFilter, isDark,
}: { taskId?: string | null; onFilter: (id: string) => void; isDark: boolean }) {
  if (!taskId) return <span className={isDark ? 'text-slate-600' : 'text-gray-400'}>-</span>;
  return (
    <button
      title="按此 Task ID 筛选"
      onClick={(e) => { e.stopPropagation(); onFilter(taskId); }}
      className={`font-mono text-xs px-1.5 py-0.5 rounded transition-all max-w-[100px] truncate block
        ${isDark ? 'text-blue-400 hover:bg-blue-500/20' : 'text-blue-600 hover:bg-blue-50'}`}
    >
      {taskId}
    </button>
  );
}

// ------------------------------------------------------------------ //
//  调用耗时统计 Tab                                                     //
// ------------------------------------------------------------------ //

interface CallsTabProps {
  opts: Options;
  isDark: boolean;
  externalTaskId: string;
  onSwitchToErrors: (taskId: string) => void;
}

function CallsTab({ opts, isDark, externalTaskId, onSwitchToErrors }: CallsTabProps) {
  const [filters, setFilters] = useState({
    call_type: '', model: '', mcp_key: '', skill_key: '', status: '',
    task_id: externalTaskId, sort_by: 'started_at', sort_order: 'desc',
  });
  const [page, setPage] = useState(1);
  const [data, setData] = useState<PagedResponse<CallTrace> | null>(null);
  const [loading, setLoading] = useState(false);
  const [fetchError, setFetchError] = useState('');
  const [selected, setSelected] = useState<CallTrace | null>(null);
  const PAGE_SIZE = 20;

  // sync external task_id changes
  useEffect(() => {
    setFilters((prev) => ({ ...prev, task_id: externalTaskId }));
  }, [externalTaskId]);

  const load = useCallback(async (p: number, f = filters) => {
    setLoading(true);
    setFetchError('');
    try {
      const result = await fetchCalls({ ...f, page: p, page_size: PAGE_SIZE });
      setData(result);
      setPage(p);
    } catch (e) {
      setFetchError(String(e));
    } finally {
      setLoading(false);
    }
  }, [filters]);

  useEffect(() => { load(1); }, [filters]);

  const setF = (key: string, val: string) => setFilters((prev) => ({ ...prev, [key]: val }));

  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const selectCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200' : 'bg-white border-gray-300 text-gray-700';
  const inputCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200 placeholder-slate-500' : 'bg-white border-gray-300 text-gray-700 placeholder-gray-400';
  const trHover = isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50';
  const thCls = `text-left text-xs font-medium uppercase tracking-wide py-2.5 px-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`;
  const tdCls = `py-2.5 px-3 text-sm ${textPrimary}`;
  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';

  return (
    <div className="space-y-4">
      <div className={`${cardBg} border ${cardBorder} rounded-xl p-4`}>
        <div className="flex items-center gap-2 mb-3">
          <Filter className="w-4 h-4 text-blue-400" />
          <span className={`text-sm font-medium ${textPrimary}`}>筛选条件</span>
          {filters.task_id && (
            <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400">
              Task: {filters.task_id}
              <button onClick={() => setF('task_id', '')} className="ml-0.5 hover:text-white">
                <X className="w-3 h-3" />
              </button>
            </span>
          )}
        </div>
        <div className="flex flex-wrap gap-3">
          <Select value={filters.call_type} onChange={(v) => setF('call_type', v)} placeholder="全部类型" cls={selectCls}
            options={[{ value: 'model', label: '模型' }, { value: 'mcp', label: 'MCP' }, { value: 'skill', label: 'Skill' }]} />
          <Select value={filters.model} onChange={(v) => setF('model', v)} placeholder="全部模型" cls={selectCls}
            options={opts.models.map((m) => ({ value: m, label: m }))} />
          <Select value={filters.mcp_key} onChange={(v) => setF('mcp_key', v)} placeholder="全部MCP" cls={selectCls}
            options={opts.mcps.map((m) => ({ value: m.key, label: m.name || m.key }))} />
          <Select value={filters.skill_key} onChange={(v) => setF('skill_key', v)} placeholder="全部Skill" cls={selectCls}
            options={opts.skills.map((s) => ({ value: s.key, label: s.name || s.key }))} />
          <Select value={filters.status} onChange={(v) => setF('status', v)} placeholder="全部状态" cls={selectCls}
            options={opts.statuses.map((s) => ({ value: s, label: s }))} />
          <input value={filters.task_id} onChange={(e) => setF('task_id', e.target.value)}
            placeholder="Task ID" className={`text-sm rounded-lg border px-3 py-1.5 outline-none w-36 ${inputCls}`} />
          <Select value={filters.sort_by} onChange={(v) => setF('sort_by', v)} cls={selectCls}
            options={[{ value: 'started_at', label: '按时间' }, { value: 'duration_ms', label: '按耗时' }]} />
          <Select value={filters.sort_order} onChange={(v) => setF('sort_order', v)} cls={selectCls}
            options={[{ value: 'desc', label: '降序' }, { value: 'asc', label: '升序' }]} />
          <button onClick={() => load(1)}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-600 hover:bg-red-500 text-white'}`}>
            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />刷新
          </button>
        </div>
      </div>

      <div className={`${cardBg} border ${cardBorder} rounded-xl overflow-hidden`}>
        {fetchError && <div className="p-4 text-red-400 text-sm">{fetchError}</div>}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className={`border-b ${divider}`}>
                <th className={thCls}>时间</th>
                <th className={thCls}>类型</th>
                <th className={thCls}>名称</th>
                <th className={thCls}>操作</th>
                <th className={thCls}>耗时</th>
                <th className={thCls}>状态</th>
                <th className={thCls}>Task ID</th>
                <th className={thCls}>输入摘要</th>
                <th className={thCls}>输出摘要</th>
              </tr>
            </thead>
            <tbody>
              {loading && !data && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>加载中…</td></tr>}
              {!loading && data?.items.length === 0 && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>暂无数据</td></tr>}
              {data?.items.map((row) => (
                <tr key={row.id} className={`border-b ${divider} cursor-pointer transition-colors ${trHover}`}
                  onClick={() => setSelected(row)}>
                  <td className={`${tdCls} whitespace-nowrap text-xs ${textSecondary}`}>{formatTs(row.started_at)}</td>
                  <td className={tdCls}><Badge label={row.call_type} colorClass={TYPE_COLORS[row.call_type] ?? ''} /></td>
                  <td className={`${tdCls} max-w-[120px] truncate`}>{row.name}</td>
                  <td className={`${tdCls} max-w-[160px] truncate ${textSecondary} text-xs`}>{row.action}</td>
                  <td className={`${tdCls} whitespace-nowrap font-mono`}>{formatDuration(row.duration_ms)}</td>
                  <td className={tdCls}><Badge label={row.status} colorClass={STATUS_COLORS[row.status] ?? ''} /></td>
                  <td className={tdCls}>
                    <div className="flex items-center gap-1">
                      <TaskIdPill taskId={row.task_id} onFilter={(id) => setF('task_id', id)} isDark={isDark} />
                      {row.task_id && (
                        <button title="在报错日志中查看" onClick={(e) => { e.stopPropagation(); onSwitchToErrors(row.task_id!); }}
                          className={`p-0.5 rounded transition-all ${isDark ? 'text-slate-500 hover:text-red-400' : 'text-gray-400 hover:text-red-500'}`}>
                          <ArrowRight className="w-3 h-3" />
                        </button>
                      )}
                    </div>
                  </td>
                  <td className={`${tdCls} max-w-[160px] truncate text-xs ${textSecondary}`}>{row.input_summary ?? '-'}</td>
                  <td className={`${tdCls} max-w-[160px] truncate text-xs ${textSecondary}`}>{row.output_summary ?? '-'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {data && (
          <div className={`flex items-center justify-end px-4 py-3 border-t ${divider}`}>
            <Pagination page={data.page} pageSize={data.page_size} total={data.total} onPage={(p) => load(p)} isDark={isDark} />
          </div>
        )}
      </div>

      {selected && <CallDetailModal item={selected} onClose={() => setSelected(null)} isDark={isDark} />}
    </div>
  );
}

// ------------------------------------------------------------------ //
//  报错日志 Tab                                                         //
// ------------------------------------------------------------------ //

interface ErrorsTabProps {
  opts: Options;
  isDark: boolean;
  externalTaskId: string;
  onSwitchToCalls: (taskId: string) => void;
}

function ErrorsTab({ opts, isDark, externalTaskId, onSwitchToCalls }: ErrorsTabProps) {
  const [filters, setFilters] = useState({
    source: '', model: '', mcp_key: '', skill_key: '', level: '',
    task_id: externalTaskId, sort_order: 'desc',
  });
  const [page, setPage] = useState(1);
  const [data, setData] = useState<PagedResponse<ErrorLog> | null>(null);
  const [loading, setLoading] = useState(false);
  const [fetchError, setFetchError] = useState('');
  const [selected, setSelected] = useState<ErrorLog | null>(null);
  const PAGE_SIZE = 20;

  useEffect(() => {
    setFilters((prev) => ({ ...prev, task_id: externalTaskId }));
  }, [externalTaskId]);

  const load = useCallback(async (p: number, f = filters) => {
    setLoading(true);
    setFetchError('');
    try {
      const result = await fetchErrors({ ...f, page: p, page_size: PAGE_SIZE });
      setData(result);
      setPage(p);
    } catch (e) {
      setFetchError(String(e));
    } finally {
      setLoading(false);
    }
  }, [filters]);

  useEffect(() => { load(1); }, [filters]);

  const setF = (key: string, val: string) => setFilters((prev) => ({ ...prev, [key]: val }));

  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const selectCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200' : 'bg-white border-gray-300 text-gray-700';
  const inputCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200 placeholder-slate-500' : 'bg-white border-gray-300 text-gray-700 placeholder-gray-400';
  const trHover = isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50';
  const thCls = `text-left text-xs font-medium uppercase tracking-wide py-2.5 px-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`;
  const tdCls = `py-2.5 px-3 text-sm ${textPrimary}`;
  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';

  return (
    <div className="space-y-4">
      <div className={`${cardBg} border ${cardBorder} rounded-xl p-4`}>
        <div className="flex items-center gap-2 mb-3">
          <Filter className="w-4 h-4 text-red-400" />
          <span className={`text-sm font-medium ${textPrimary}`}>筛选条件</span>
          {filters.task_id && (
            <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400">
              Task: {filters.task_id}
              <button onClick={() => setF('task_id', '')} className="ml-0.5 hover:text-white">
                <X className="w-3 h-3" />
              </button>
            </span>
          )}
        </div>
        <div className="flex flex-wrap gap-3">
          <Select value={filters.source} onChange={(v) => setF('source', v)} placeholder="全部来源" cls={selectCls}
            options={opts.sources.map((s) => ({ value: s, label: s }))} />
          <Select value={filters.level} onChange={(v) => setF('level', v)} placeholder="全部级别" cls={selectCls}
            options={[{ value: 'warning', label: '警告' }, { value: 'error', label: '错误' }]} />
          <Select value={filters.model} onChange={(v) => setF('model', v)} placeholder="全部模型" cls={selectCls}
            options={opts.models.map((m) => ({ value: m, label: m }))} />
          <Select value={filters.mcp_key} onChange={(v) => setF('mcp_key', v)} placeholder="全部MCP" cls={selectCls}
            options={opts.mcps.map((m) => ({ value: m.key, label: m.name || m.key }))} />
          <Select value={filters.skill_key} onChange={(v) => setF('skill_key', v)} placeholder="全部Skill" cls={selectCls}
            options={opts.skills.map((s) => ({ value: s.key, label: s.name || s.key }))} />
          <input value={filters.task_id} onChange={(e) => setF('task_id', e.target.value)}
            placeholder="Task ID" className={`text-sm rounded-lg border px-3 py-1.5 outline-none w-36 ${inputCls}`} />
          <Select value={filters.sort_order} onChange={(v) => setF('sort_order', v)} cls={selectCls}
            options={[{ value: 'desc', label: '降序' }, { value: 'asc', label: '升序' }]} />
          <button onClick={() => load(1)}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-600 hover:bg-red-500 text-white'}`}>
            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />刷新
          </button>
        </div>
      </div>

      <div className={`${cardBg} border ${cardBorder} rounded-xl overflow-hidden`}>
        {fetchError && <div className="p-4 text-red-400 text-sm">{fetchError}</div>}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className={`border-b ${divider}`}>
                <th className={thCls}>时间</th>
                <th className={thCls}>级别</th>
                <th className={thCls}>来源</th>
                <th className={thCls}>消息</th>
                <th className={thCls}>可恢复</th>
                <th className={thCls}>Task ID</th>
                <th className={thCls}>MCP</th>
                <th className={thCls}>Skill</th>
                <th className={thCls}>模型</th>
              </tr>
            </thead>
            <tbody>
              {loading && !data && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>加载中…</td></tr>}
              {!loading && data?.items.length === 0 && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>暂无数据</td></tr>}
              {data?.items.map((row) => (
                <tr key={row.id} className={`border-b ${divider} cursor-pointer transition-colors ${trHover}`}
                  onClick={() => setSelected(row)}>
                  <td className={`${tdCls} whitespace-nowrap text-xs ${textSecondary}`}>{formatTs(row.happened_at)}</td>
                  <td className={tdCls}><Badge label={row.level} colorClass={STATUS_COLORS[row.level] ?? ''} /></td>
                  <td className={tdCls}><Badge label={row.source} colorClass={SOURCE_COLORS[row.source] ?? ''} /></td>
                  <td className={`${tdCls} max-w-[240px] truncate`}>{row.message}</td>
                  <td className={`${tdCls} text-xs`}>
                    <span className={row.recoverable ? 'text-green-400' : 'text-red-400'}>{row.recoverable ? '是' : '否'}</span>
                  </td>
                  <td className={tdCls}>
                    <div className="flex items-center gap-1">
                      <TaskIdPill taskId={row.task_id} onFilter={(id) => setF('task_id', id)} isDark={isDark} />
                      {row.task_id && (
                        <button title="在调用耗时中查看" onClick={(e) => { e.stopPropagation(); onSwitchToCalls(row.task_id!); }}
                          className={`p-0.5 rounded transition-all ${isDark ? 'text-slate-500 hover:text-blue-400' : 'text-gray-400 hover:text-blue-500'}`}>
                          <ArrowRight className="w-3 h-3" />
                        </button>
                      )}
                    </div>
                  </td>
                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.mcp_name ?? row.mcp_key ?? '-'}</td>
                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.skill_name ?? row.skill_key ?? '-'}</td>
                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.model ?? '-'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {data && (
          <div className={`flex items-center justify-end px-4 py-3 border-t ${divider}`}>
            <Pagination page={data.page} pageSize={data.page_size} total={data.total} onPage={(p) => load(p)} isDark={isDark} />
          </div>
        )}
      </div>

      {selected && <ErrorDetailModal item={selected} onClose={() => setSelected(null)} isDark={isDark} />}
    </div>
  );
}

// ------------------------------------------------------------------ //
//  Main Page                                                           //
// ------------------------------------------------------------------ //

const MANUAL_PURGE_DAYS = 14;

async function callPurge(retainDays: number): Promise<{ deleted_call_traces: number; deleted_error_logs: number }> {
  const res = await fetch(`${backUrl}/api/observability/purge?retain_days=${retainDays}`, { method: 'DELETE' });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

export default function ObservabilityPage() {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [activeTab, setActiveTab] = useState<'calls' | 'errors'>('calls');
  const [opts, setOpts] = useState<Options>({ models: [], mcps: [], skills: [], statuses: [], sources: [] });
  const [sharedTaskId, setSharedTaskId] = useState('');
  const [purging, setPurging] = useState(false);
  const [purgeMsg, setPurgeMsg] = useState('');

  useEffect(() => {
    fetchOptions().then(setOpts).catch(console.error);
  }, []);

  const handlePurge = async () => {
    if (!window.confirm(`确认清理 ${MANUAL_PURGE_DAYS} 天前的旧记录？此操作不可撤销。`)) return;
    setPurging(true);
    setPurgeMsg('');
    try {
      const r = await callPurge(MANUAL_PURGE_DAYS);
      setPurgeMsg(`已清理：调用记录 ${r.deleted_call_traces} 条，错误日志 ${r.deleted_error_logs} 条`);
    } catch (e) {
      setPurgeMsg(`清理失败：${e}`);
    } finally {
      setPurging(false);
    }
  };

  const handleSwitchToErrors = (taskId: string) => {
    setSharedTaskId(taskId);
    setActiveTab('errors');
  };
  const handleSwitchToCalls = (taskId: string) => {
    setSharedTaskId(taskId);
    setActiveTab('calls');
  };

  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const tabActive = isDark ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' : 'bg-red-50 text-red-600 border border-red-200';
  const tabInactive = isDark ? 'text-slate-400 hover:text-white hover:bg-slate-800/50' : 'text-gray-600 hover:text-red-600 hover:bg-red-50';

  return (
    <div className="space-y-6">
      <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${isDark ? 'bg-blue-500/20' : 'bg-red-50'}`}>
              <Activity className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
            </div>
            <div>
              <h1 className={`font-bold text-lg ${textPrimary}`}>可观测性</h1>
              <p className={`text-sm ${textSecondary}`}>调用耗时统计 · 报错日志</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            {purgeMsg && (
              <span className={`text-xs px-2 py-1 rounded-lg ${isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
                {purgeMsg}
              </span>
            )}
            <button onClick={handlePurge} disabled={purging}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-all
                ${isDark ? 'border-red-800/40 text-red-400 hover:bg-red-900/20 disabled:opacity-40' : 'border-red-200 text-red-600 hover:bg-red-50 disabled:opacity-40'}`}>
              <Trash2 className={`w-3.5 h-3.5 ${purging ? 'animate-spin' : ''}`} />
              清理 {MANUAL_PURGE_DAYS} 天前数据
            </button>
          </div>
        </div>
      </div>

      <div className="flex gap-2">
        <button onClick={() => setActiveTab('calls')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'calls' ? tabActive : tabInactive}`}>
          <Clock className="w-4 h-4" />调用耗时统计
        </button>
        <button onClick={() => setActiveTab('errors')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'errors' ? tabActive : tabInactive}`}>
          <AlertTriangle className="w-4 h-4" />报错日志
        </button>
      </div>

      {activeTab === 'calls' ? (
        <CallsTab opts={opts} isDark={isDark} externalTaskId={sharedTaskId} onSwitchToErrors={handleSwitchToErrors} />
      ) : (
        <ErrorsTab opts={opts} isDark={isDark} externalTaskId={sharedTaskId} onSwitchToCalls={handleSwitchToCalls} />
      )}
    </div>
  );
}