"use client";

import { useForm } from "react-hook-form";

import { zodResolver } from "@hookform/resolvers/zod";

import { z } from "zod";

import { Plus } from "lucide-react";

import { Button } from "@/components/ui/button";

import { Input, Label } from "@/components/ui/input";

import { Select } from "@/components/ui/select";

import { Card } from "@/components/ui/card";

import { useCreateWatch } from "@/hooks/useWatchlist";

import type { WatchlistKind, Priority } from "@/lib/types";

const KINDS: { value: WatchlistKind; label: string }[] = [

  { value: "artist", label: "Artist" },

  { value: "team", label: "Team" },

  { value: "venue", label: "Venue" },

  { value: "sport", label: "Sport" },

  { value: "category", label: "Category" },

  { value: "keyword", label: "Keyword" },

];

const PRIORITIES: Priority[] = ["low", "normal", "high", "critical"];

const schema = z.object({

  kind: z.enum(["artist", "team", "venue", "sport", "category", "keyword"]),

  label: z.string().trim().min(2, "Add at least 2 characters").max(120),

  priority: z.enum(["low", "normal", "high", "critical"]),

});

type FormValues = z.infer<typeof schema>;

function labelToPattern(label: string): string {

  const escaped = label.trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\s+/g, "\\s+");

  return `(?i)\\b${escaped}\\b`;

}

export function WatchlistForm() {

  const create = useCreateWatch();

  const {

    register,

    handleSubmit,

    reset,

    formState: { errors, isSubmitting },

  } = useForm<FormValues>({

    resolver: zodResolver(schema),

    defaultValues: { kind: "artist", priority: "normal", label: "" },

  });

  const onSubmit = async (values: FormValues) => {

    await create.mutateAsync({

      kind: values.kind,

      label: values.label.trim(),

      pattern: labelToPattern(values.label),

      priority: values.priority,

    });

    reset({ kind: values.kind, priority: values.priority, label: "" });

  };

  return (

    <Card className="p-4">

      <form

        onSubmit={handleSubmit(onSubmit)}

        className="grid grid-cols-1 gap-3 sm:grid-cols-[140px_1fr_140px_auto] sm:items-end"

      >

        <div className="space-y-1.5">

          <Label htmlFor="wl-kind">Type</Label>

          <Select id="wl-kind" {...register("kind")}>

            {KINDS.map((k) => (

              <option key={k.value} value={k.value}>

                {k.label}

              </option>

            ))}

          </Select>

        </div>

        <div className="space-y-1.5">

          <Label htmlFor="wl-label">Who or what to track</Label>

          <Input

            id="wl-label"

            placeholder="e.g. Taylor Swift, Lakers, Coachella…"

            aria-invalid={!!errors.label}

            {...register("label")}

          />

          {errors.label ? (

            <p role="alert" className="text-xs text-[var(--color-accent-red)]">

              {errors.label.message}

            </p>

          ) : null}

        </div>

        <div className="space-y-1.5">

          <Label htmlFor="wl-priority">Priority</Label>

          <Select id="wl-priority" {...register("priority")}>

            {PRIORITIES.map((p) => (

              <option key={p} value={p}>

                {p[0]!.toUpperCase() + p.slice(1)}

              </option>

            ))}

          </Select>

        </div>

        <Button type="submit" loading={isSubmitting} className="sm:w-auto">

          <Plus className="h-4 w-4" aria-hidden />

          Track

        </Button>

      </form>

    </Card>

  );

}