"use client";

import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { createVersion } from "@/actions/versions";
import { useToast } from "@/components/ui/use-toast";
import { Upload, Film, X, CheckCircle2 } from "lucide-react";
import { formatFileSize } from "@/lib/utils";
import { cn } from "@/lib/utils";

interface VersionUploadProps {
  taskId: string;
  projectId: string;
  currentVersionNumber: number;
  open: boolean;
  onClose: () => void;
  onSuccess?: (versionId: string) => void;
}

export function VersionUpload({
  taskId,
  projectId,
  currentVersionNumber,
  open,
  onClose,
  onSuccess,
}: VersionUploadProps) {
  const [file, setFile] = useState<File | null>(null);
  const [notes, setNotes] = useState("");
  const [fps, setFps] = useState("24");
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadState, setUploadState] = useState<
    "idle" | "uploading" | "processing" | "done" | "error"
  >("idle");
  const [isDragOver, setIsDragOver] = useState(false);
  const { toast } = useToast();
  const router = useRouter();

  const nextVersion = currentVersionNumber + 1;
  const versionLabel = `v${String(nextVersion).padStart(3, "0")}`;
  const acceptedTypes = "video/mp4,video/quicktime,video/x-msvideo,.mp4,.mov,.avi,.mxf";

  const handleFileSelect = (selectedFile: File) => {
    if (!selectedFile.type.match(/video\//)) {
      toast({ title: "Please select a video file (.mp4, .mov)", variant: "destructive" });
      return;
    }
    if (selectedFile.size > 2 * 1024 * 1024 * 1024) {
      toast({ title: "File too large (max 2GB)", variant: "destructive" });
      return;
    }
    setFile(selectedFile);
  };

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(false);
    const dropped = e.dataTransfer.files[0];
    if (dropped) handleFileSelect(dropped);
  }, []);

  const handleUpload = async () => {
    if (!file) return;
    setUploadState("uploading");
    setUploadProgress(0);

    try {
      // Upload via local API (XHR for progress) or UploadThing
      const fileUrl = await uploadViaLocal(file, (p) =>
        setUploadProgress(Math.round(p * 0.85))
      );

      setUploadProgress(90);
      setUploadState("processing");

      const result = await createVersion({
        taskId,
        fileUrl,
        fileName: file.name,
        fileSize: file.size,
        mimeType: file.type,
        fps: parseFloat(fps) || 24,
        notes: notes.trim() || undefined,
      });

      setUploadProgress(100);
      setUploadState("done");
      toast({ title: `${versionLabel} uploaded successfully` });
      setTimeout(() => {
        onSuccess?.(result.version.id);
        router.refresh();
        onClose();
        resetState();
      }, 1000);
    } catch (err) {
      setUploadState("error");
      toast({
        title: "Upload failed",
        description: (err as Error).message,
        variant: "destructive",
      });
    }
  };

  const resetState = () => {
    setFile(null);
    setNotes("");
    setFps("24");
    setUploadProgress(0);
    setUploadState("idle");
  };

  const handleClose = () => {
    if (uploadState === "uploading") return;
    resetState();
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Film className="h-5 w-5 text-amber-500" />
            Upload {versionLabel}
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {/* Drop zone */}
          {!file ? (
            <div
              onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
              onDragLeave={() => setIsDragOver(false)}
              onDrop={handleDrop}
              className={cn(
                "relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-10 transition-colors cursor-pointer",
                isDragOver
                  ? "border-amber-500 bg-amber-500/10"
                  : "border-zinc-700 hover:border-amber-500/50 hover:bg-zinc-800/50"
              )}
              onClick={() => document.getElementById("file-input")?.click()}
            >
              <input
                id="file-input"
                type="file"
                accept={acceptedTypes}
                className="hidden"
                onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
              />
              <Upload className="h-8 w-8 text-zinc-500 mb-3" />
              <p className="text-sm font-medium text-white">Drop video here or click to browse</p>
              <p className="text-xs text-zinc-400 mt-1">MP4, MOV, AVI up to 2 GB</p>
            </div>
          ) : (
            <div className="flex items-center gap-3 rounded-lg border border-zinc-700 p-3 bg-zinc-800/50">
              <Film className="h-8 w-8 text-amber-500 shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate text-white">{file.name}</p>
                <p className="text-xs text-zinc-400">{formatFileSize(file.size)}</p>
              </div>
              {uploadState === "idle" && (
                <Button variant="ghost" size="icon-sm" onClick={() => setFile(null)}>
                  <X className="h-4 w-4" />
                </Button>
              )}
              {uploadState === "done" && (
                <CheckCircle2 className="h-5 w-5 text-green-400" />
              )}
            </div>
          )}

          {/* Metadata */}
          {file && uploadState === "idle" && (
            <>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label htmlFor="fps" className="text-xs">Frame Rate (FPS)</Label>
                  <Input
                    id="fps"
                    value={fps}
                    onChange={(e) => setFps(e.target.value)}
                    placeholder="24"
                    className="h-8 text-sm"
                  />
                </div>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="notes" className="text-xs">Version Notes</Label>
                <Textarea
                  id="notes"
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  placeholder="What changed in this version?"
                  className="text-sm min-h-[80px]"
                />
              </div>
            </>
          )}

          {/* Upload progress */}
          {(uploadState === "uploading" || uploadState === "processing" || uploadState === "done") && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs">
                <span className="text-zinc-400">
                  {uploadState === "uploading" && "Uploading..."}
                  {uploadState === "processing" && "Processing..."}
                  {uploadState === "done" && "Complete!"}
                </span>
                <span className="text-amber-400 font-mono">{uploadProgress}%</span>
              </div>
              <Progress value={uploadProgress} />
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={handleClose} disabled={uploadState === "uploading"}>
            Cancel
          </Button>
          <Button
            onClick={handleUpload}
            disabled={!file || uploadState !== "idle"}
            className="gap-2"
          >
            <Upload className="h-4 w-4" />
            Upload {versionLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

/** Upload a file to /api/upload/local using XHR so we get progress events. */
function uploadViaLocal(
  file: File,
  onProgress: (fraction: number) => void
): Promise<string> {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append("file", file);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload/local");

    xhr.upload.addEventListener("progress", (e) => {
      if (e.lengthComputable) onProgress(e.loaded / e.total);
    });

    xhr.addEventListener("load", () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const json = JSON.parse(xhr.responseText);
          if (json.url) resolve(json.url);
          else reject(new Error(json.error ?? "Upload failed"));
        } catch {
          reject(new Error("Invalid server response"));
        }
      } else {
        try {
          const json = JSON.parse(xhr.responseText);
          reject(new Error(json.error ?? `HTTP ${xhr.status}`));
        } catch {
          reject(new Error(`HTTP ${xhr.status}`));
        }
      }
    });

    xhr.addEventListener("error", () => reject(new Error("Network error")));
    xhr.addEventListener("abort", () => reject(new Error("Upload cancelled")));

    xhr.send(formData);
  });
}