'use client';
/**
 * HistoryTable / HistorySkeleton / Pagination / DownloadButton
 * 历史归档页子组件（按约束拆出 ≤100行）
 *
 * C1修复：下载走 fetch+blob，不用 window.open。
 * window.open 无法附带 Authorization header，会 401。
 * 改法：api.getBlob 拿二进制流 → URL.createObjectURL → a.click → revoke。
 */
import { useState, Fragment } from 'react';
import Link from 'next/link';
import { clsx } from 'clsx';
import { TaskListItem } from '@/types';
import { api } from '@/lib/api';

const STATUS_LABEL: Record<string, { text: string; color: string }> = {
  approved: { text: '已通过', color: 'text-green-600 bg-green-50' },
  archived: { text: '已归档', color: 'text-gray-500 bg-gray-100' },
  rejected: { text: '被打回', color: 'text-red-500 bg-red-50' },
  failed: { text: '生成失败', color: 'text-red-600 bg-red-50' },
  fission: { text: '裂变', color: 'text-orange-600 bg-orange-50' },
};

// --- DownloadButton --- 触发打包→轮询→下载 zip
function DownloadButton({ taskId }: { taskId: number }) {
  const [state, setState] = useState<'idle' | 'packaging' | 'done' | 'error'>('idle');
  const [pkgId, setPkgId] = useState<number | null>(null);

  async function handleDownload() {
    setState('packaging');
    try {
      // 1. 触发打包
      const pkg = await api.post<{ delivery_package_id: number }>(`/api/v1/tasks/${taskId}/package`, {});
      const id = pkg.delivery_package_id;
      setPkgId(id);
      // 2. 轮询 status（最多20次，每2s）
      for (let i = 0; i < 20; i++) {
        await new Promise((r) => setTimeout(r, 2000));
        const info = await api.get<{ status: string }>(`/api/v1/delivery-packages/${id}/download`);
        if (info.status === 'ready' || info.status === 'downloaded') {
          // 3. fetch+blob 下载（带 Authorization header，避免 window.open 401）
          const blob = await api.getBlob(`/api/v1/delivery-packages/${id}/download-file`);
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `delivery-${id}.zip`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
          await api.post(`/api/v1/delivery-packages/${id}/mark-downloaded`);
          setState('done');
          return;
        }
      }
      setState('error');
    } catch { setState('error'); }
  }

  if (state === 'done') return (
    <span className="text-xs text-green-600" title="文件已保存到浏览器默认下载目录（通常是「下载」文件夹）">
      ✓ 已下载到「下载」文件夹
    </span>
  );
  if (state === 'error') return <span className="text-xs text-red-500">失败，刷新重试</span>;
  return (
    <button
      onClick={handleDownload}
      disabled={state === 'packaging'}
      className="text-xs text-brand-orange hover:underline disabled:text-text-tertiary"
    >
      {state === 'packaging' ? '打包中…' : '下载交付包'}
    </button>
  );
}

function FissionDownloadButton({ fissionId }: { fissionId: number }) {
  const [state, setState] = useState<'idle' | 'downloading' | 'done' | 'error'>('idle');

  async function handleDownload() {
    setState('downloading');
    try {
      const blob = await api.getBlob(`/api/v1/fission/${fissionId}/download`);
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `fission-${fissionId}.zip`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      setState('done');
    } catch {
      setState('error');
    }
  }

  if (state === 'done') return <span className="text-xs text-green-600">✓ 已下载</span>;
  if (state === 'error') return <span className="text-xs text-red-500">失败，刷新重试</span>;
  return (
    <button
      onClick={handleDownload}
      disabled={state === 'downloading'}
      className="text-xs text-brand-orange hover:underline disabled:text-text-tertiary"
    >
      {state === 'downloading' ? '下载中…' : '下载裂变包'}
    </button>
  );
}

// --- HistoryTable ---
export function HistoryTable({ tasks }: { tasks: TaskListItem[] }) {
  return (
    <div className="overflow-x-auto rounded-lg border border-border-default">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-surface-secondary text-text-secondary">
            <th className="px-4 py-3 text-left font-medium">任务</th>
            <th className="px-4 py-3 text-left font-medium">产品</th>
            <th className="px-4 py-3 text-left font-medium">状态</th>
            <th className="px-4 py-3 text-left font-medium">文案</th>
            <th className="px-4 py-3 text-left font-medium">图片</th>
            <th className="px-4 py-3 text-left font-medium">创建时间</th>
            <th className="px-4 py-3 text-left font-medium">操作</th>
          </tr>
        </thead>
        <tbody>
          {tasks.map((task, i) => (
            <Fragment key={task.id}>
            <tr
              className={clsx(
                'border-t border-border-default hover:bg-surface-tertiary transition-colors',
                i % 2 === 0 ? 'bg-white' : 'bg-surface-primary'
              )}
            >
              <td className="px-4 py-3 text-text-primary font-medium max-w-xs truncate">
                {task.theme}
              </td>
              <td className="px-4 py-3 text-text-secondary">
                {task.product_name ?? '-'}
              </td>
              <td className="px-4 py-3">
                <span className={clsx(
                  'px-2 py-0.5 rounded-full text-xs font-medium',
                  STATUS_LABEL[task.status]?.color ?? 'text-gray-500 bg-gray-100'
                )}>
                  {STATUS_LABEL[task.status]?.text ?? task.status}
                </span>
              </td>
              <td className="px-4 py-3 text-text-secondary">{task.text_count} 条</td>
              <td className="px-4 py-3 text-text-secondary">{task.image_count} 张</td>
              <td className="px-4 py-3 text-text-tertiary">
                {new Date(task.created_at).toLocaleDateString('zh-CN')}
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-3">
                  <Link
                    href={task.item_type === 'fission' ? `/fission/${task.id}/notes` : `/tasks/${task.id}/confirm`}
                    className="text-brand-orange hover:underline text-xs"
                  >
                    查看
                  </Link>
                  {task.item_type !== 'fission' && task.status !== 'failed' && (
                    <Link
                      href={`/tasks/${task.id}/images`}
                      className="text-brand-orange hover:underline text-xs"
                    >
                      排图
                    </Link>
                  )}
                  {task.status === 'approved' && <DownloadButton taskId={task.id} />}
                  {task.item_type === 'fission' && <FissionDownloadButton fissionId={task.id} />}
                </div>
              </td>
            </tr>
            {/* 被打回任务：原因独占一行展示,运营见"为何被打回"可重做(R8历史复用) */}
            {task.status === 'rejected' && task.reject_reason && (
              <tr className={i % 2 === 0 ? 'bg-white' : 'bg-surface-primary'}>
                <td colSpan={7} className="px-4 pb-3 pt-0">
                  <div className="rounded-md bg-red-50 border border-red-200 px-3 py-2 text-xs text-red-600">
                    <span className="font-medium">打回原因：</span>{task.reject_reason}
                  </div>
                </td>
              </tr>
            )}
            </Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// --- HistorySkeleton ---
export function HistorySkeleton() {
  return (
    <div className="rounded-lg border border-border-default overflow-hidden animate-pulse">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="flex gap-4 px-4 py-3 border-t border-border-default first:border-t-0">
          <div className="h-4 bg-gray-200 rounded flex-1" />
          <div className="h-4 bg-gray-200 rounded w-20" />
          <div className="h-4 bg-gray-200 rounded w-16" />
          <div className="h-4 bg-gray-200 rounded w-12" />
          <div className="h-4 bg-gray-200 rounded w-12" />
          <div className="h-4 bg-gray-200 rounded w-24" />
          <div className="h-4 bg-gray-200 rounded w-8" />
        </div>
      ))}
    </div>
  );
}

// --- Pagination ---
export function Pagination({
  page, total, onChange,
}: { page: number; total: number; onChange: (p: number) => void }) {
  return (
    <div className="flex items-center justify-center gap-2" aria-label="分页">
      <button
        disabled={page <= 1}
        onClick={() => onChange(page - 1)}
        className="px-3 py-1 rounded border border-border-default text-sm disabled:opacity-40 hover:bg-surface-tertiary"
        aria-label="上一页"
      >
        上一页
      </button>
      <span className="text-sm text-text-secondary px-2">
        第 {page} / {total} 页
      </span>
      <button
        disabled={page >= total}
        onClick={() => onChange(page + 1)}
        className="px-3 py-1 rounded border border-border-default text-sm disabled:opacity-40 hover:bg-surface-tertiary"
        aria-label="下一页"
      >
        下一页
      </button>
    </div>
  );
}