"use client";

import { useState, useCallback } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import { Loader2, Download, Check, RotateCcw, Move3D, Sparkles } from "lucide-react";
import { toast } from "sonner";
import { AngleController3D } from "./angle-controller-3d";
import { cn } from "@/lib/utils";

interface AngleEditDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  imageUrl: string;
  onComplete?: (resultUrl: string) => void;
}

interface AngleParams {
  azimuth: string;
  elevation: string;
  distance: string;
  azimuthDegree: number;
  elevationDegree: number;
  distanceFactor: number;
}

export function AngleEditDialog({
  open,
  onOpenChange,
  imageUrl,
  onComplete,
}: AngleEditDialogProps) {
  const [isProcessing, setIsProcessing] = useState(false);
  const [resultUrl, setResultUrl] = useState<string | null>(null);
  const [loraScale, setLoraScale] = useState(0.9);
  const [currentAngles, setCurrentAngles] = useState<AngleParams>({
    azimuth: "front-right",
    elevation: "eye-level",
    distance: "medium",
    azimuthDegree: 45,
    elevationDegree: 0,
    distanceFactor: 1.0,
  });

  // 处理角度变化
  const handleAngleChange = useCallback((angles: AngleParams) => {
    setCurrentAngles(angles);
    // 清除之前的结果，因为角度变了
    setResultUrl(null);
  }, []);

  // 生成新视角
  const handleGenerate = useCallback(async () => {
    setIsProcessing(true);
    setResultUrl(null);

    try {
      const response = await fetch("/api/angle-edit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          image_url: imageUrl,
          azimuth: currentAngles.azimuth,
          elevation: currentAngles.elevation,
          distance: currentAngles.distance,
          lora_scale: loraScale,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "生成失败");
      }

      const data = await response.json();
      setResultUrl(data.image_url);
      toast.success("视角生成成功！");
    } catch (error) {
      console.error("角度编辑失败:", error);
      toast.error(error instanceof Error ? error.message : "生成失败，请重试");
    } finally {
      setIsProcessing(false);
    }
  }, [imageUrl, currentAngles, loraScale]);

  // 下载结果图片
  const handleDownload = useCallback(async () => {
    if (!resultUrl) return;

    try {
      const response = await fetch(resultUrl);
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `angle-edit-${currentAngles.azimuth}-${currentAngles.elevation}-${Date.now()}.png`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      toast.success("图片已下载");
    } catch {
      toast.error("下载失败");
    }
  }, [resultUrl, currentAngles]);

  // 使用此图片
  const handleUseImage = useCallback(() => {
    if (resultUrl) {
      onComplete?.(resultUrl);
      onOpenChange(false);
    }
  }, [resultUrl, onComplete, onOpenChange]);

  // 重置
  const handleReset = useCallback(() => {
    setResultUrl(null);
    setCurrentAngles({
      azimuth: "front-right",
      elevation: "eye-level",
      distance: "medium",
      azimuthDegree: 45,
      elevationDegree: 0,
      distanceFactor: 1.0,
    });
    setLoraScale(0.9);
  }, []);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col p-0 gap-0">
        <DialogHeader className="px-6 py-4 border-b bg-muted/30">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="p-2 bg-primary/10 rounded-lg">
                <Move3D className="h-5 w-5 text-primary" />
              </div>
              <div>
                <DialogTitle>多角度编辑</DialogTitle>
                <DialogDescription className="mt-1">
                  拖拽 3D 控制器选择相机角度，AI 将生成对应视角的图像
                </DialogDescription>
              </div>
            </div>
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto p-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 h-full">
            {/* 左侧：3D 控制器 (占 5 列) */}
            <div className="lg:col-span-5 space-y-6 flex flex-col">
              <div className="flex-1">
                <AngleController3D
                  onChange={handleAngleChange}
                  initialAzimuth={currentAngles.azimuthDegree}
                  initialElevation={currentAngles.elevationDegree}
                  initialDistance={currentAngles.distanceFactor}
                />
              </div>

              {/* LoRA 强度控制 - 放入卡片 */}
              <div className="rounded-lg border bg-card p-4 space-y-4 shadow-sm">
                <div className="flex justify-between items-center">
                  <Label className="text-sm font-medium">变换强度</Label>
                  <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
                    {(loraScale * 100).toFixed(0)}%
                  </span>
                </div>
                <Slider
                  value={[loraScale]}
                  onValueChange={([v]: number[]) => setLoraScale(v)}
                  min={0.5}
                  max={1.0}
                  step={0.05}
                  className="py-2"
                />
                <p className="text-xs text-muted-foreground leading-relaxed">
                  强度越高角度变化越明显，越低则保留更多原图特征。建议 85-95%。
                </p>
              </div>
            </div>

            {/* 右侧：图片预览 (占 7 列) */}
            <div className="lg:col-span-7 flex flex-col gap-4 min-h-[500px]">
              <div className="grid grid-rows-2 gap-4 flex-1 h-full">
                {/* 原图 */}
                <div className="relative rounded-xl border bg-muted/30 overflow-hidden group">
                  <div className="absolute top-3 left-3 z-10 bg-background/80 backdrop-blur-sm px-2 py-1 rounded text-xs font-medium border shadow-sm">
                    原图
                  </div>
                  <img
                    src={imageUrl}
                    alt="原图"
                    className="w-full h-full object-contain p-4 transition-transform duration-300 group-hover:scale-[1.02]"
                  />
                </div>

                {/* 结果图 */}
                <div className={cn(
                  "relative rounded-xl border overflow-hidden transition-all duration-300",
                  resultUrl ? "bg-muted/30 border-primary/20 shadow-sm" : "bg-muted/10 border-dashed"
                )}>
                  <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
                    <div className={cn(
                      "px-2 py-1 rounded text-xs font-medium border shadow-sm backdrop-blur-sm",
                      resultUrl ? "bg-primary/10 text-primary border-primary/20" : "bg-background/80 text-muted-foreground"
                    )}>
                      生成结果
                    </div>
                    {resultUrl && (
                      <span className="flex items-center gap-1 text-[10px] text-green-600 bg-green-50 px-1.5 py-0.5 rounded-full border border-green-100">
                        <Check className="h-3 w-3" /> 完成
                      </span>
                    )}
                  </div>
                  
                  <div className="w-full h-full flex items-center justify-center">
                    {isProcessing ? (
                      <div className="text-center space-y-4">
                        <div className="relative">
                          <div className="h-12 w-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin mx-auto" />
                          <div className="absolute inset-0 flex items-center justify-center">
                            <Sparkles className="h-5 w-5 text-primary/50 animate-pulse" />
                          </div>
                        </div>
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-foreground">正在生成新视角...</p>
                          <p className="text-xs text-muted-foreground">预计需要 10-30 秒</p>
                        </div>
                      </div>
                    ) : resultUrl ? (
                      <img
                        src={resultUrl}
                        alt="生成结果"
                        className="w-full h-full object-contain p-4 animate-in fade-in zoom-in-95 duration-300"
                      />
                    ) : (
                      <div className="text-center text-muted-foreground p-8">
                        <div className="bg-muted rounded-full p-4 w-fit mx-auto mb-4">
                          <Move3D className="h-8 w-8 opacity-50" />
                        </div>
                        <p className="text-sm font-medium text-foreground">准备就绪</p>
                        <p className="text-xs mt-1">调整左侧角度后点击生成</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 底部操作栏 */}
        <div className="px-6 py-4 border-t bg-muted/30 flex justify-between items-center">
          <Button 
            variant="ghost" 
            onClick={handleReset} 
            disabled={isProcessing}
            className="text-muted-foreground hover:text-foreground"
          >
            <RotateCcw className="h-4 w-4 mr-2" />
            重置参数
          </Button>

          <div className="flex gap-3">
            {resultUrl ? (
              <>
                <Button variant="outline" onClick={handleDownload}>
                  <Download className="h-4 w-4 mr-2" />
                  下载
                </Button>
                <Button onClick={handleUseImage} className="min-w-[120px]">
                  <Check className="h-4 w-4 mr-2" />
                  使用此图
                </Button>
              </>
            ) : (
              <Button 
                onClick={handleGenerate} 
                disabled={isProcessing}
                className="min-w-[140px]"
              >
                {isProcessing ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    生成中...
                  </>
                ) : (
                  <>
                    <Sparkles className="h-4 w-4 mr-2" />
                    生成新视角
                  </>
                )}
              </Button>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

export default AngleEditDialog;