'use client';
/**
 * 历史归档 /history
 * 角色：熟手 + 组长（管理员也能进）
 * 数据：GET /api/v1/tasks?status=approved,archived,rejected
 */
import { useEffect, useState, useCallback } from 'react';
import { api } from '@/lib/api';
import { TaskListItem, PaginatedResponse } from '@/types';
import { getErrorAction } from '@/types/errors';
import { clsx } from 'clsx';
import { HistoryTable, HistorySkeleton, Pagination } from './components';

const HISTORY_STATUSES = ['approved', 'archived', 'rejected', 'failed'];
const STATUS_LABELS: Record<string, string> = {
  approved: '已通过', archived: '已归档', rejected: '被打回', failed: '生成失败',
};
const PAGE_SIZE = 20;

export default function HistoryPage() {
  const [tasks, setTasks] = useState<TaskListItem[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const fetchHistory = useCallback(async (p: number, status: string) => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({ page: String(p), page_size: String(PAGE_SIZE) });
      if (status !== 'all') params.append('status', status);
      else HISTORY_STATUSES.forEach((s) => params.append('status', s));
      const res = await api.get<PaginatedResponse<TaskListItem>>(`/api/v1/tasks?${params}`);
      setTasks(res.items);
      setTotal(res.total);
    } catch (e: unknown) {
      const ae = e as { code?: number };
      setError(getErrorAction(ae.code ?? 50001).message);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { fetchHistory(page, statusFilter); }, [page, statusFilter, fetchHistory]);

  const totalPages = Math.ceil(total / PAGE_SIZE);

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold text-text-primary">历史归档</h1>
        <span className="text-sm text-text-tertiary">共 {total} 条</span>
      </div>

      {/* 状态筛选 */}
      <div className="flex gap-2" role="group" aria-label="状态筛选">
        {[{ key: 'all', label: '全部' }, ...HISTORY_STATUSES.map((s) => ({
          key: s, label: STATUS_LABELS[s],
        }))].map((opt) => (
          <button
            key={opt.key}
            onClick={() => { setStatusFilter(opt.key); setPage(1); }}
            className={clsx(
              'px-3 py-1 rounded-full text-sm border transition-colors',
              statusFilter === opt.key
                ? 'bg-brand-orange text-white border-brand-orange'
                : 'border-border-default text-text-secondary hover:border-brand-orange'
            )}
          >
            {opt.label}
          </button>
        ))}
      </div>

      {error && (
        <div className="rounded-lg bg-red-50 border border-red-200 p-4 text-sm text-red-600">
          {error}
          <button className="ml-4 underline" onClick={() => fetchHistory(page, statusFilter)}>
            重试
          </button>
        </div>
      )}

      {loading ? <HistorySkeleton /> : tasks.length === 0 ? (
        <div className="py-20 text-center text-text-tertiary text-sm">暂无历史记录</div>
      ) : (
        <HistoryTable tasks={tasks} />
      )}

      {totalPages > 1 && <Pagination page={page} total={totalPages} onChange={setPage} />}
    </div>
  );
}