"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
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 {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { createAsset } from "@/actions/assets";
import { useToast } from "@/components/ui/use-toast";
import { ShotPriority } from "@prisma/client";

const assetSchema = z.object({
  assetCode: z
    .string()
    .min(1, "Asset code is required")
    .max(30)
    .regex(/^[A-Z0-9_\-]+$/i, "Alphanumeric, dash, underscore only"),
  name: z.string().min(1, "Name is required"),
  description: z.string().optional(),
  priority: z.nativeEnum(ShotPriority),
  dueDate: z.string().optional(),
});

type AssetFormValues = z.infer<typeof assetSchema>;

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

interface NewAssetDialogProps {
  projectId: string;
  open: boolean;
  onClose: () => void;
  onSuccess?: () => void;
}

export function NewAssetDialog({ projectId, open, onClose, onSuccess }: NewAssetDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();
  const router = useRouter();

  const {
    register,
    handleSubmit,
    setValue,
    reset,
    formState: { errors },
  } = useForm<AssetFormValues>({
    resolver: zodResolver(assetSchema),
    defaultValues: { priority: "NORMAL" },
  });

  const onSubmit = async (data: AssetFormValues) => {
    setIsSubmitting(true);
    try {
      await createAsset({ projectId, status: "WAITING", ...data });
      toast({ title: "Asset created" });
      reset();
      router.refresh();
      onSuccess?.();
      onClose();
    } catch (err) {
      toast({
        title: "Failed to create asset",
        description: (err as Error).message,
        variant: "destructive",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>New Asset</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1.5">
              <Label htmlFor="assetCode">Asset Code *</Label>
              <Input
                id="assetCode"
                placeholder="CAR_01"
                className="uppercase"
                {...register("assetCode")}
              />
              {errors.assetCode && (
                <p className="text-xs text-destructive">{errors.assetCode.message}</p>
              )}
            </div>

            <div className="space-y-1.5">
              <Label>Priority</Label>
              <Select
                defaultValue="NORMAL"
                onValueChange={(v) => setValue("priority", v as ShotPriority)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="LOW">Low</SelectItem>
                  <SelectItem value="NORMAL">Normal</SelectItem>
                  <SelectItem value="HIGH">High</SelectItem>
                  <SelectItem value="URGENT">Urgent</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="name">Asset Name *</Label>
            <Input id="name" placeholder="Hero Car" {...register("name")} />
            {errors.name && (
              <p className="text-xs text-destructive">{errors.name.message}</p>
            )}
          </div>

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

          <div className="space-y-1.5">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              placeholder="What is this asset?"
              rows={2}
              {...register("description")}
            />
          </div>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Creating…" : "Create Asset"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}