import { useNavigate, useParams } from "react-router";
import { ArrowRight, Film, Loader2, AlertCircle, RefreshCw } from "lucide-react";
import { useEpisodes } from "../../hooks/useAi";

export function EpisodeGeneration() {
  const navigate = useNavigate();
  const { projectId } = useParams<{ projectId: string }>();
  const pid = projectId ?? "";

  const { data: episodes = [], isLoading, isFetching, error, refetch } = useEpisodes(pid);

  if (isLoading || (isFetching && episodes.length === 0)) {
    return (
      <div className="h-full flex items-center justify-center bg-background">
        <div className="text-center">
          <Loader2 className="w-10 h-10 text-primary animate-spin mx-auto mb-4" />
          <p className="text-sm text-muted-foreground">加载分集数据...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="h-full flex items-center justify-center p-6">
        <div className="flex items-center gap-3 text-red-600">
          <AlertCircle className="w-5 h-5" />
          <span className="text-sm">{(error as Error).message}</span>
        </div>
      </div>
    );
  }

  if (episodes.length === 0) {
    return (
      <div className="h-full flex items-center justify-center bg-background p-6">
        <div className="text-center">
          <Film className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
          <h3 className="text-lg font-medium text-foreground mb-2">暂无分集</h3>
          <p className="text-sm text-muted-foreground mb-6">请先在大纲页面生成分集内容</p>
          <div className="flex gap-3 justify-center">
            <button
              onClick={() => refetch()}
              className="px-4 py-2 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-colors text-sm flex items-center gap-2"
            >
              <RefreshCw className="w-4 h-4" />
              刷新
            </button>
            <button
              onClick={() => navigate(`/project/${projectId}/outline`)}
              className="px-4 py-2 rounded-lg bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white hover:shadow-md transition-all text-sm"
            >
              返回大纲页面
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full overflow-auto bg-background p-6">
      <div className="max-w-6xl mx-auto">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-semibold text-foreground mb-1">分集列表</h1>
            <p className="text-sm text-muted-foreground">AI已生成 {episodes.length} 集内容</p>
          </div>
          {isFetching && (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="w-4 h-4 animate-spin" />
              刷新中...
            </div>
          )}
        </div>

        <div className="grid grid-cols-1 gap-3 mb-8">
          {episodes.map((ep) => (
            <div
              key={ep.id}
              onClick={() => navigate(`/project/${projectId}/storyboard/${ep.id}`)}
              className="rounded-xl border border-border bg-card p-4 hover:border-primary transition-colors cursor-pointer"
            >
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#5b5ff9] to-[#8b5ff9] flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm">
                  {ep.episodeNumber}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <Film className="w-3.5 h-3.5 text-primary flex-shrink-0" />
                    <span className="font-medium text-foreground text-sm">{ep.title || `第${ep.episodeNumber}集`}</span>
                  </div>
                  <p className="text-xs text-muted-foreground line-clamp-2">{ep.summary}</p>
                </div>
                <span className={`text-xs px-2 py-1 rounded-full flex-shrink-0 ${
                  ep.status === "ready" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
                }`}>
                  {ep.status === "ready" ? "已就绪" : "草稿"}
                </span>
              </div>
            </div>
          ))}
        </div>

        <button
          onClick={() => navigate(`/project/${projectId}/storyboard/${episodes[0].id}`)}
          className="w-full py-3 rounded-xl bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white flex items-center justify-center gap-2 hover:shadow-md transition-all"
        >
          <span>进入分镜工作台</span>
          <ArrowRight className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
}
