import { Rocket, ChevronDown, Check } from "lucide-react";
import { SelectPopover } from "@/shared/ui/SelectPopover";

type LipsyncModelMode = "default" | "fast" | "advanced";

const MODEL_OPTIONS: Array<{ value: LipsyncModelMode; label: string; desc: string }> = [
  { value: "default", label: "默认模型", desc: "按时长智能路由" },
  { value: "fast", label: "快速模型", desc: "速度优先" },
  { value: "advanced", label: "高级模型", desc: "质量优先" },
];

interface GenerateActionBarProps {
  isGenerating: boolean;
  progress: number;
  disabled: boolean;
  materialCount?: number;
  modelMode: LipsyncModelMode;
  onModelModeChange: (value: LipsyncModelMode) => void;
  onGenerate: () => void;
}

export function GenerateActionBar({
  isGenerating,
  progress,
  disabled,
  materialCount = 1,
  modelMode,
  onModelModeChange,
  onGenerate,
}: GenerateActionBarProps) {
  const currentModel = MODEL_OPTIONS.find((opt) => opt.value === modelMode) || MODEL_OPTIONS[0];

  return (
    <div>
      <div className="flex items-center gap-2">
        <button
          onClick={onGenerate}
          disabled={disabled}
          className={`flex-1 py-4 rounded-xl font-bold text-lg transition-all ${disabled
            ? "bg-gray-600 cursor-not-allowed text-gray-400"
            : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-purple-500/25"
            }`}
        >
          {isGenerating ? (
            <span className="flex items-center justify-center gap-3">
              <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                <circle
                  className="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  strokeWidth="4"
                  fill="none"
                />
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                />
              </svg>
              生成中... {progress}%
            </span>
          ) : (
            <span className="flex items-center justify-center gap-2">
              <Rocket className="h-5 w-5" />
              生成视频
            </span>
          )}
        </button>

        <SelectPopover
          sheetTitle="选择唇形模型"
          disabled={isGenerating}
          trigger={({ open, toggle }) => (
            <button
              type="button"
              onClick={toggle}
              disabled={isGenerating}
              className="h-[58px] min-w-[152px] rounded-xl border border-white/15 bg-black/30 px-3 text-left text-sm text-gray-200 transition-colors hover:border-white/30 disabled:cursor-not-allowed disabled:opacity-50"
              title="选择唇形模型"
            >
              <span className="flex items-center justify-between gap-2">
                <span className="min-w-0">
                  <span className="block truncate text-sm text-white">{currentModel.label}</span>
                  <span className="mt-0.5 block text-xs text-gray-400">{currentModel.desc}</span>
                </span>
                <ChevronDown className={`h-4 w-4 text-gray-300 transition-transform ${open ? "rotate-180" : ""}`} />
              </span>
            </button>
          )}
        >
          {({ close }) => (
            <div className="space-y-1">
              {MODEL_OPTIONS.map((opt) => {
                const isSelected = opt.value === modelMode;
                return (
                  <button
                    key={opt.value}
                    type="button"
                    data-popover-selected={isSelected ? "true" : undefined}
                    onClick={() => {
                      onModelModeChange(opt.value);
                      close();
                    }}
                    className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left transition-colors ${isSelected
                      ? "border-purple-500 bg-purple-500/20"
                      : "border-white/10 bg-white/5 hover:border-white/30"
                      }`}
                  >
                    <span>
                      <span className="block text-sm text-white">{opt.label}</span>
                      <span className="mt-0.5 block text-xs text-gray-400">{opt.desc}</span>
                    </span>
                    {isSelected && <Check className="h-4 w-4 text-purple-300" />}
                  </button>
                );
              })}
            </div>
          )}
        </SelectPopover>
      </div>
      {!isGenerating && materialCount >= 2 && (
        <p className="text-xs text-gray-400 text-center mt-1.5">
          多素材模式 ({materialCount} 个机位)，生成耗时较长
        </p>
      )}
    </div>
  );
}
