"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import type { CategoryUpsertFormValues, DashboardArticleCategory } from "@/components/dashboard/blogs/articles-types";
import {
  createArticleCategory,
  updateArticleCategory,
} from "@/lib/api/dashboard/article-categories-api";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslations } from "next-intl";
import { useForm, Controller } from "react-hook-form";
import { toast } from "react-toastify";

export function CategoryUpsertDialog({
  open,
  onOpenChange,
  category,
  parents,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  category?: DashboardArticleCategory | null;
  parents: DashboardArticleCategory[];
}) {
  const t = useTranslations("dashboard.blogs.categories.form");
  const tc = useTranslations("dashboard.blogs.common");
  const {
    register,
    handleSubmit,
    control,
    formState: { isSubmitting },
  } = useForm<CategoryUpsertFormValues>({
    defaultValues: {
      name: category?.name ?? "",
      description: category?.description ?? "",
      parent_id: category?.parent_id ?? null,
      language: category?.language ?? "ar",
      order: category?.order ?? 0,
      is_active: category?.is_active ?? true,
    },
  });

  const submit = handleSubmit(async (values) => {
    try {
      if (category) await updateArticleCategory(category.id, values);
      else await createArticleCategory(values);
      toast.success("Saved");
      onOpenChange(false);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Error");
    }
  });

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{category ? tc("save") : t("name")}</DialogTitle>
        </DialogHeader>
        <form onSubmit={submit} className="space-y-4">
          <Input placeholder={t("name")} {...register("name", { required: true })} />
          <Input placeholder={t("description")} {...register("description")} />

          <Controller
            control={control}
            name="parent_id"
            render={({ field }) => (
              <Select
                value={field.value != null ? String(field.value) : "none"}
                onValueChange={(v) => field.onChange(v === "none" ? null : Number(v))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t("parent")} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">{t("none")}</SelectItem>
                  {parents
                    .filter((p) => p.id !== category?.id)
                    .map((p) => (
                      <SelectItem key={p.id} value={String(p.id)}>
                        {p.name}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            )}
          />

          <Controller
            control={control}
            name="language"
            render={({ field }) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger>
                  <SelectValue placeholder={t("language")} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ar">عربي</SelectItem>
                  <SelectItem value="en">English</SelectItem>
                </SelectContent>
              </Select>
            )}
          />

          <Input
            type="number"
            placeholder={t("order")}
            {...register("order", { valueAsNumber: true })}
          />

          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" {...register("is_active")} />
            {t("isActive")}
          </label>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
              {tc("cancel")}
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {tc("save")}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}