import { useState } from "react";
import { useNavigate, useParams } from "react-router";
import { ArrowRight, Check, Loader2 } from "lucide-react";
import { useUpdateProject } from "../../hooks/useProjects";
import { projectStyleOptions } from "../../lib/projectStyles";

export function StyleSelection() {
  const navigate = useNavigate();
  const { projectId } = useParams();
  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
  const updateProject = useUpdateProject(projectId ?? "");

  const handleContinue = async () => {
    if (!selectedStyle) return;
    await updateProject.mutateAsync({ style: selectedStyle });
    navigate(`/project/${projectId}/outline`);
  };

  return (
    <div className="h-full overflow-auto bg-background p-6">
      <div className="mx-auto max-w-6xl">
        <div className="mb-8 text-center">
          <h1 className="mb-2 text-3xl font-semibold text-foreground">选择项目视觉风格</h1>
          <p className="text-sm text-muted-foreground">
            这里选择的是视觉呈现方式，不是题材类型。AI 会根据所选风格影响人物、场景与后续图像生成。
          </p>
        </div>

        <div className="mb-8 grid grid-cols-3 gap-4">
          {projectStyleOptions.map((style) => (
            <button
              key={style.value}
              onClick={() => setSelectedStyle(style.value)}
              className={`group relative overflow-hidden rounded-xl border transition-all ${
                selectedStyle === style.value
                  ? "border-primary shadow-md"
                  : "border-border hover:border-primary/50"
              }`}
            >
              <div className="relative aspect-[4/3] overflow-hidden">
                <img
                  src={style.image}
                  alt={style.label}
                  className="h-full w-full object-cover transition-transform group-hover:scale-105"
                />
                {selectedStyle === style.value && (
                  <div className="absolute right-3 top-3 flex h-6 w-6 items-center justify-center rounded-full bg-primary">
                    <Check className="h-4 w-4 text-white" />
                  </div>
                )}
              </div>

              <div className="bg-card p-4 text-left">
                <h3 className="mb-1 font-medium text-foreground">{style.label}</h3>
                <p className="text-sm text-muted-foreground">{style.description}</p>
              </div>
            </button>
          ))}
        </div>

        <button
          onClick={handleContinue}
          disabled={!selectedStyle || updateProject.isPending}
          className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] py-3 text-white transition-all hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none"
        >
          {updateProject.isPending ? (
            <Loader2 className="h-5 w-5 animate-spin" />
          ) : (
            <>
              <span>继续</span>
              <ArrowRight className="h-5 w-5" />
            </>
          )}
        </button>
      </div>
    </div>
  );
}
