"use client";

import { useState, useRef } from "react";
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 } from "@/actions/shots";
import { useToast } from "@/components/ui/use-toast";
import { Upload, X, Film, ImageIcon } from "lucide-react";

const settingsSchema = z.object({
  description: z.string().optional(),
  status: z.enum(["WAITING", "IN_PROGRESS", "IN_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;
  };
  artists: Artist[];
  onSaved?: () => void;
}

export function ShotSettingsTab({ shot, artists, onSaved }: ShotSettingsTabProps) {
  const { toast } = useToast();
  const [isSaving, setIsSaving] = 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: {
      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,
        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);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-8 max-w-2xl">
      {/* 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>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="IN_REVIEW">In 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>

      <Button type="submit" disabled={isSaving}>
        {isSaving ? "Saving…" : "Save Changes"}
      </Button>
    </form>
  );
}