"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Check, Layers, Loader2, Palette, X } from "lucide-react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Category, CreateCategoryDTO } from "@/types/category";
import { categorySchema, CategoryFormValues } from "@/validators/category";

const COLOR_PRESETS = [
  { name: "Azul Elétrico", hex: "#2563eb" },
  { name: "Verde Esmeralda", hex: "#16a34a" },
  { name: "Âmbar / Laranja", hex: "#f59e0b" },
  { name: "Roxo / Púrpura", hex: "#8b5cf6" },
  { name: "Rosa / Magenta", hex: "#ec4899" },
  { name: "Vermelho Rubi", hex: "#dc2626" },
  { name: "Ciano / Celeste", hex: "#0284c7" },
  { name: "Cinza Grafite", hex: "#475569" },
];

interface CategoryFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateCategoryDTO) => Promise<void>;
  categoryToEdit?: Category | null;
  isSaving?: boolean;
}

export function CategoryFormModal({
  isOpen,
  onClose,
  onSubmit,
  categoryToEdit,
  isSaving = false,
}: CategoryFormModalProps) {
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = useForm<CategoryFormValues>({
    resolver: zodResolver(categorySchema),
    defaultValues: {
      name: "",
      description: "",
      color: "#2563eb",
    },
  });

  const selectedColor = watch("color");

  useEffect(() => {
    if (categoryToEdit) {
      reset({
        name: categoryToEdit.name,
        description: categoryToEdit.description || "",
        color: categoryToEdit.color || "#2563eb",
      });
    } else {
      reset({
        name: "",
        description: "",
        color: "#2563eb",
      });
    }
  }, [categoryToEdit, reset, isOpen]);

  const onFormSubmit = async (values: CategoryFormValues) => {
    await onSubmit(values as CreateCategoryDTO);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-all">
      <Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 shadow-2xl">
        <div className="flex items-center justify-between border-b pb-4">
          <div>
            <h2 className="text-xl font-bold flex items-center gap-2">
              <Layers className="h-5 w-5 text-primary" />
              {categoryToEdit ? "Editar Categoria" : "Nova Categoria"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {categoryToEdit
                ? "Altere o nome, cor e descrição da categoria de equipamentos."
                : "Cadastre um novo grupo para organizar sua frota de ativos."}
            </p>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        <form onSubmit={handleSubmit(onFormSubmit)} className="mt-5 space-y-5">
          {/* Nome */}
          <div>
            <label className="mb-1 block text-sm font-medium">Nome da Categoria *</label>
            <Input
              {...register("name")}
              placeholder="Ex: Escavadeiras, Geradores de Energia..."
            />
            {errors.name && (
              <p className="mt-1 text-xs text-rose-500">{errors.name.message}</p>
            )}
          </div>

          {/* Seleção de Cores */}
          <div>
            <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
              <Palette className="h-4 w-4" /> Cor de Identificação
            </label>
            <div className="grid grid-cols-4 gap-2">
              {COLOR_PRESETS.map((preset) => (
                <button
                  key={preset.hex}
                  type="button"
                  onClick={() => setValue("color", preset.hex, { shouldValidate: true })}
                  className="flex flex-col items-center gap-1 rounded-lg border p-2 text-xs transition hover:bg-muted"
                  style={{
                    borderColor: selectedColor === preset.hex ? preset.hex : undefined,
                    backgroundColor: selectedColor === preset.hex ? `${preset.hex}15` : undefined,
                  }}
                >
                  <span
                    className="flex h-6 w-6 items-center justify-center rounded-full text-white shadow-xs"
                    style={{ backgroundColor: preset.hex }}
                  >
                    {selectedColor === preset.hex && <Check className="h-3.5 w-3.5" />}
                  </span>
                  <span className="truncate max-w-[80px] font-medium text-[11px]">
                    {preset.name}
                  </span>
                </button>
              ))}
            </div>

            <div className="mt-3 flex items-center gap-3">
              <span className="text-xs text-muted-foreground">Código HEX:</span>
              <div className="flex items-center gap-2 flex-1 max-w-[160px]">
                <Input
                  {...register("color")}
                  placeholder="#2563eb"
                  className="font-mono text-xs"
                />
                <span
                  className="h-6 w-6 rounded-full border shadow-xs shrink-0"
                  style={{ backgroundColor: selectedColor || "#2563eb" }}
                />
              </div>
            </div>
            {errors.color && (
              <p className="mt-1 text-xs text-rose-500">{errors.color.message}</p>
            )}
          </div>

          {/* Descrição */}
          <div>
            <label className="mb-1 block text-sm font-medium">Descrição detalhada</label>
            <textarea
              {...register("description")}
              rows={3}
              className="w-full rounded-md border border-input bg-background p-3 text-sm shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
              placeholder="Descreva os tipos de máquinas, finalidade de uso e especificações deste grupo..."
            />
          </div>

          {/* Rodapé e Botões */}
          <div className="flex items-center justify-end gap-3 border-t pt-4">
            <Button type="button" variant="secondary" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSaving}>
              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {categoryToEdit ? "Salvar Alterações" : "Cadastrar Categoria"}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}