"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { updateShot, deleteShot } from "@/actions/shots";
import { useToast } from "@/components/ui/use-toast";
import { Upload, X, Film, ImageIcon, Trash2, BookImage, Loader2 } from "lucide-react";

// ─── Shot References ──────────────────────────────────────────────────────────

interface ShotRef {
  id: string;
  fileUrl: string;
  fileName: string;
  label: string | null;
  sortOrder: number;
}

function ShotReferencesSection({ shotId }: { shotId: string }) {
  const { toast } = useToast();
  const [refs, setRefs] = useState<ShotRef[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const fetchRefs = useCallback(async () => {
    try {
      const res = await fetch(`/api/shots/${shotId}/references`);
      if (res.ok) {
        const data = await res.json();
        setRefs(data.references);
      }
    } finally {
      setLoading(false);
    }
  }, [shotId]);

  useEffect(() => { fetchRefs(); }, [fetchRefs]);

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files ?? []);
    if (!files.length) return;
    setUploading(true);
    try {
      for (const file of files) {
        const fd = new FormData();
        fd.append("file", file);
        const res = await fetch(`/api/shots/${shotId}/references`, { method: "POST", body: fd });
        if (!res.ok) throw new Error(await res.text());
        const { reference } = await res.json();
        setRefs((prev) => [...prev, reference]);
      }
    } catch (err) {
      toast({ title: "Upload failed", description: err instanceof Error ? err.message : undefined, variant: "destructive" });
    } finally {
      setUploading(false);
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  };

  const handleDelete = async (refId: string) => {
    try {
      const res = await fetch(`/api/shots/${shotId}/references?refId=${refId}`, { method: "DELETE" });
      if (!res.ok) throw new Error("Delete failed");
      setRefs((prev) => prev.filter((r) => r.id !== refId));
    } catch {
      toast({ title: "Failed to delete reference", variant: "destructive" });
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
        <BookImage className="h-4 w-4 text-amber-500" />
        References
      </div>
      <Separator />

      {loading ? (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading…
        </div>
      ) : (
        <>
          {refs.length > 0 && (
            <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
              {refs.map((ref) => (
                <div key={ref.id} className="relative group aspect-square rounded-lg overflow-hidden border border-border bg-zinc-900">
                  <Image
                    src={ref.fileUrl}
                    alt={ref.label ?? ref.fileName}
                    fill
                    className="object-cover"
                    sizes="160px"
                  />
                  {ref.label && (
                    <div className="absolute bottom-0 inset-x-0 bg-black/70 text-[10px] text-zinc-300 truncate px-1.5 py-0.5">
                      {ref.label}
                    </div>
                  )}
                  <button
                    type="button"
                    onClick={() => handleDelete(ref.id)}
                    className="absolute top-1 right-1 bg-black/70 hover:bg-red-900 text-white rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
                    title="Remove reference"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </div>
              ))}
            </div>
          )}

          <div>
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              disabled={uploading}
              className="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-dashed border-border hover:border-amber-500/50 text-sm text-muted-foreground cursor-pointer transition-colors disabled:opacity-50"
            >
              {uploading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Upload className="h-4 w-4" />
              )}
              {uploading ? "Uploading…" : "Add reference images"}
            </button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              multiple
              className="hidden"
              onChange={handleUpload}
            />
          </div>
        </>
      )}
    </div>
  );
}

// ─── Settings form ────────────────────────────────────────────────────────────

const settingsSchema = z.object({
  shotCode: z.string().min(1, "Required").max(120).regex(/^[A-Z0-9_]+$/i, "Alphanumeric and underscores only"),
  description: z.string().optional(),
  status: z.enum(["WAITING", "IN_PROGRESS", "INTERNAL_REVIEW", "READY_FOR_CLIENT", "CLIENT_REVIEW", "REVISIONS", "COMPLETE"]),
  priority: z.enum(["LOW", "NORMAL", "HIGH", "URGENT"]),
  fps: z.coerce.number().min(1).max(240),
  frameStart: z.coerce.number().int().optional().or(z.literal("")),
  frameEnd: z.coerce.number().int().optional().or(z.literal("")),
  dueDate: z.string().optional(),
  artistId: z.string().optional(),
});

type SettingsFormValues = z.infer<typeof settingsSchema>;

interface Artist {
  id: string;
  name: string | null;
  email: string;
}

interface ShotSettingsTabProps {
  shot: {
    id: string;
    shotCode: string;
    description: string | null;
    status: string;
    priority: string;
    fps: number;
    frameStart?: number | null;
    frameEnd?: number | null;
    dueDate: Date | string | null;
    artistId: string | null;
    thumbnailUrl: string | null;
    projectId: string;
  };
  artists: Artist[];
  onSaved?: () => void;
}

export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps) {
  const router = useRouter();
  const { toast } = useToast();
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(shot.thumbnailUrl ?? null);
  const [clearThumbnail, setClearThumbnail] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const formatDate = (d: Date | string | null) => {
    if (!d) return "";
    return new Date(d).toISOString().split("T")[0];
  };

  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<SettingsFormValues>({
    resolver: zodResolver(settingsSchema),
    defaultValues: {
      shotCode: shot.shotCode,
      description: shot.description ?? "",
      status: shot.status as SettingsFormValues["status"],
      priority: shot.priority as SettingsFormValues["priority"],
      fps: shot.fps,
      frameStart: shot.frameStart ?? "",
      frameEnd: shot.frameEnd ?? "",
      dueDate: formatDate(shot.dueDate),
      artistId: shot.artistId ?? "__none__",
    },
  });

  const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setThumbnailFile(file);
    setClearThumbnail(false);
    const reader = new FileReader();
    reader.onload = (ev) => setThumbnailPreview(ev.target?.result as string);
    reader.readAsDataURL(file);
  };

  const onSubmit = async (values: SettingsFormValues) => {
    setIsSaving(true);
    try {
      let thumbnailUrl: string | null | undefined = undefined;

      if (clearThumbnail) {
        thumbnailUrl = null;
      } else if (thumbnailFile) {
        const fd = new FormData();
        fd.append("file", thumbnailFile);
        fd.append("type", "image");
        const res = await fetch("/api/upload", { method: "POST", body: fd });
        if (!res.ok) throw new Error("Thumbnail upload failed");
        const data = await res.json();
        thumbnailUrl = data.url;
      }

      await updateShot({
        shotId: shot.id,
        shotCode: values.shotCode,
        description: values.description || undefined,
        status: values.status,
        priority: values.priority,
        fps: values.fps,
        frameStart: values.frameStart !== "" && values.frameStart != null ? Number(values.frameStart) : null,
        frameEnd: values.frameEnd !== "" && values.frameEnd != null ? Number(values.frameEnd) : null,
        dueDate: values.dueDate || null,
        artistId: values.artistId === "__none__" ? null : values.artistId,
        thumbnailUrl,
      });

      toast({ title: "Shot updated" });
      onSaved?.();
    } catch (e) {
      toast({ title: "Failed to save", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteShot(shot.id);
      toast({ title: "Shot deleted" });
      router.push(`/projects/${shot.projectId}`);
    } catch (e) {
      toast({ title: "Failed to delete shot", description: e instanceof Error ? e.message : undefined, variant: "destructive" });
      setIsDeleting(false);
      setConfirmDelete(false);
    }
  };

  return (
    <div className="space-y-10 max-w-2xl">
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
      {/* Details */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
          <Film className="h-4 w-4 text-amber-500" />
          Details
        </div>
        <Separator />

        <div className="space-y-1.5">
          <Label>Shot Code</Label>
          <Input
            {...register("shotCode")}
            className="font-mono uppercase"
            placeholder="SHOW_SC010_0010"
          />
          {errors.shotCode && <p className="text-xs text-destructive">{errors.shotCode.message}</p>}
        </div>

        <div className="space-y-1.5">
          <Label>Description</Label>
          <Textarea {...register("description")} rows={3} placeholder="Shot description…" />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <Label>Status</Label>
            <Select
              defaultValue={shot.status}
              onValueChange={(v) => setValue("status", v as SettingsFormValues["status"])}
            >
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="WAITING">Waiting</SelectItem>
                <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
                <SelectItem value="INTERNAL_REVIEW">Internal Review</SelectItem>
                <SelectItem value="READY_FOR_CLIENT">Ready for Client</SelectItem>
                <SelectItem value="CLIENT_REVIEW">Client Review</SelectItem>
                <SelectItem value="REVISIONS">Revisions</SelectItem>
                <SelectItem value="COMPLETE">Complete</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label>Priority</Label>
            <Select
              defaultValue={shot.priority}
              onValueChange={(v) => setValue("priority", v as SettingsFormValues["priority"])}
            >
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="LOW">Low</SelectItem>
                <SelectItem value="NORMAL">Normal</SelectItem>
                <SelectItem value="HIGH">High</SelectItem>
                <SelectItem value="CRITICAL">Critical</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* Timing */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
          <span className="text-amber-500 font-mono text-xs">FPS</span>
          Timing
        </div>
        <Separator />

        <div className="grid grid-cols-3 gap-4">
          <div className="space-y-1.5">
            <Label>FPS</Label>
            <Input type="number" step="any" {...register("fps")} />
            {errors.fps && <p className="text-xs text-destructive">{errors.fps.message}</p>}
          </div>
          <div className="space-y-1.5">
            <Label>Frame Start</Label>
            <Input type="number" {...register("frameStart")} placeholder="1001" />
          </div>
          <div className="space-y-1.5">
            <Label>Frame End</Label>
            <Input type="number" {...register("frameEnd")} placeholder="1100" />
          </div>
        </div>

        <div className="space-y-1.5 max-w-xs">
          <Label>Due Date</Label>
          <Input type="date" {...register("dueDate")} />
        </div>
      </div>

      {/* Assignment */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
          <span className="text-amber-500">👤</span>
          Assignment
        </div>
        <Separator />

        <div className="space-y-1.5 max-w-xs">
          <Label>Artist</Label>
          <Select
            defaultValue={shot.artistId ?? "__none__"}
            onValueChange={(v) => setValue("artistId", v)}
          >
            <SelectTrigger><SelectValue placeholder="Unassigned" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="__none__">Unassigned</SelectItem>
              {artists.map((a) => (
                <SelectItem key={a.id} value={a.id}>
                  {a.name ?? a.email}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Thumbnail */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
          <ImageIcon className="h-4 w-4 text-amber-500" />
          Thumbnail
        </div>
        <Separator />

        {thumbnailPreview && !clearThumbnail ? (
          <div className="relative w-72 aspect-[2.39] rounded-lg overflow-hidden border border-border group">
            <Image src={thumbnailPreview} alt={shot.shotCode} fill className="object-cover" />
            <button
              type="button"
              onClick={() => { setClearThumbnail(true); setThumbnailPreview(null); setThumbnailFile(null); }}
              className="absolute top-1.5 right-1.5 bg-black/70 hover:bg-black text-white rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          </div>
        ) : (
          <div
            onClick={() => fileInputRef.current?.click()}
            className="w-72 aspect-[2.39] rounded-lg border-2 border-dashed border-border hover:border-amber-500/50 flex items-center justify-center gap-2 text-sm text-muted-foreground cursor-pointer transition-colors"
          >
            <Upload className="h-4 w-4" />
            Upload thumbnail
          </div>
        )}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={handleThumbnailChange}
        />
      </div>

      {/* References */}
      <ShotReferencesSection shotId={shot.id} />

      <Button type="submit" disabled={isSaving}>
        {isSaving ? "Saving\u2026" : "Save Changes"}
      </Button>
    </form>

    {/* Danger Zone */}
    <div className="space-y-3 pt-2">
      <div className="flex items-center gap-2 text-sm font-semibold text-red-500">
        <Trash2 className="h-4 w-4" />
        Danger Zone
      </div>
      <Separator className="bg-red-900/30" />
      {confirmDelete ? (
        <div className="rounded-lg border border-red-900/50 bg-red-950/20 p-4 space-y-3">
          <p className="text-sm text-zinc-300">
            This will permanently delete <span className="font-mono font-semibold text-white">{shot.shotCode}</span> including all tasks, versions, footage, and annotations. This cannot be undone.
          </p>
          <div className="flex items-center gap-2">
            <Button
              variant="destructive"
              size="sm"
              disabled={isDeleting}
              onClick={handleDelete}
            >
              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
              {isDeleting ? "Deleting\u2026" : "Yes, delete shot"}
            </Button>
            <Button
              variant="ghost"
              size="sm"
              disabled={isDeleting}
              onClick={() => setConfirmDelete(false)}
            >
              Cancel
            </Button>
          </div>
        </div>
      ) : (
        <Button
          variant="outline"
          size="sm"
          className="border-red-900/50 text-red-400 hover:bg-red-950/30 hover:text-red-300 hover:border-red-800"
          onClick={() => setConfirmDelete(true)}
        >
          <Trash2 className="h-3.5 w-3.5 mr-1.5" />
          Delete Shot
        </Button>
      )}
    </div>    </div>
  );
}