"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 { DashboardArticleTag, TagUpsertFormValues } from "@/components/dashboard/blogs/articles-types";
import { createArticleTag, updateArticleTag } from "@/lib/api/dashboard/article-tags-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 TagUpsertDialog({
  open,
  onOpenChange,
  tag,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  tag?: DashboardArticleTag | null;
}) {
  const t = useTranslations("dashboard.blogs.tags.form");
  const tc = useTranslations("dashboard.blogs.common");
  const {
    register,
    handleSubmit,
    control,
    formState: { isSubmitting },
  } = useForm<TagUpsertFormValues>({
    defaultValues: {
      name: tag?.name ?? "",
      description: tag?.description ?? "",
      language: tag?.language ?? "ar",
      is_popular: tag?.is_popular ?? false,
      is_active: tag?.is_active ?? true,
      order: tag?.order ?? 0,
    },
  });

  const submit = handleSubmit(async (values) => {
    try {
      if (tag) await updateArticleTag(tag.id, values);
      else await createArticleTag(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>{tag ? 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="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_popular")} />
            {t("isPopular")}
          </label>
          <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>
  );
}