'use client';

import { GenerationLoadingPanel } from '@/components/create/generation-loading-panel';
import { Button } from '@/components/ui/button';
import type { GenerationJobStatus } from '@/lib/generation-job-client';
import { AlertTriangle, Loader2 } from 'lucide-react';

export type ActiveGenerationTask = {
  id: string;
  title: string;
  startedAt: number;
  estimateSeconds: number;
  jobStatus: GenerationJobStatus | null;
  finalCountdownSeconds: number | null;
  syncConfirmation?: {
    message: string;
    confirming?: boolean;
  };
};

type GenerationTaskListProps = {
  tasks: ActiveGenerationTask[];
  onConfirmSync?: (taskId: string) => void;
  onCancelSync?: (taskId: string) => void;
};

function TaskContent({
  task,
  title,
  className = '',
  onConfirmSync,
  onCancelSync,
}: {
  task: ActiveGenerationTask;
  title: string;
  className?: string;
  onConfirmSync?: (taskId: string) => void;
  onCancelSync?: (taskId: string) => void;
}) {
  if (task.syncConfirmation) {
    return (
      <div className={`flex min-h-[260px] w-full flex-col justify-center px-6 py-8 ${className}`}>
        <div className="mx-auto max-w-md space-y-4 text-left">
          <div className="flex items-start gap-3">
            <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
            <div className="min-w-0">
              <p className="font-medium text-foreground">{title}</p>
              <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                {task.syncConfirmation.message}
              </p>
            </div>
          </div>
          <div className="flex flex-wrap justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={task.syncConfirmation.confirming}
              onClick={() => onCancelSync?.(task.id)}
            >
              取消
            </Button>
            <Button
              type="button"
              size="sm"
              disabled={task.syncConfirmation.confirming}
              onClick={() => onConfirmSync?.(task.id)}
            >
              {task.syncConfirmation.confirming ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
              确认同步生成
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <GenerationLoadingPanel
      startedAt={task.startedAt}
      estimateSeconds={task.estimateSeconds}
      jobStatus={task.jobStatus}
      finalCountdownSeconds={task.finalCountdownSeconds}
      title={title}
      className={className}
    />
  );
}

export function GenerationTaskList({ tasks, onConfirmSync, onCancelSync }: GenerationTaskListProps) {
  if (tasks.length === 0) return null;

  if (tasks.length === 1) {
    const task = tasks[0];

    return (
      <div className="liquid-glass min-h-[300px] overflow-hidden rounded-2xl border-dashed text-muted-foreground">
        <TaskContent
          task={task}
          title={task.title}
          onConfirmSync={onConfirmSync}
          onCancelSync={onCancelSync}
        />
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between gap-3 text-sm font-medium">
        <span>生成任务</span>
        <span className="rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-xs text-primary">
          {tasks.length} 个进行中
        </span>
      </div>
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
        {tasks.map((task, index) => (
          <div
            key={task.id}
            className="liquid-glass min-h-[260px] overflow-hidden rounded-2xl border-dashed text-muted-foreground"
          >
            <TaskContent
              task={task}
              title={`${task.title} #${index + 1}`}
              className="min-h-[260px] px-5 py-10"
              onConfirmSync={onConfirmSync}
              onCancelSync={onCancelSync}
            />
          </div>
        ))}
      </div>
    </div>
  );
}
