"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { Datepicker } from "@/components/datepicker/datepicker";
import { FileUploadDropzone } from "@/components/shared/file-upload-dropzone";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { formatDateToYMD, parseDateYMD } from "@/lib/date-utils";
import type { ActionSpec } from "@/lib/rbac/action-access";
import type { Article, CreateArticleRequest } from "@/types";
import { zodResolver } from "@hookform/resolvers/zod";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";

const articleSchema = z.object({
  title: z.string().min(1),
  // slug: z.string().optional(),
  content: z.string().min(1),
  author_name: z.string().optional(),
  category: z.string().optional(),
  tags: z.string().optional(),
  featured_image_url: z
    .string()
    .url()
    .optional()
    .or(z.literal("")),
  article_url: z
    .string()
    .url()
    .optional()
    .or(z.literal("")),
  views: z.union([z.number(), z.string()]).optional(),
  unique_views: z.union([z.number(), z.string()]).optional(),
  shares: z.union([z.number(), z.string()]).optional(),
  comments: z.union([z.number(), z.string()]).optional(),
  recorded_at: z.string().optional(),
  published_at: z.string().optional(),
  status: z.enum(["draft", "published", "archived"]),
  article_type: z.enum(["opinion", "analysis", "feature", "interview"]),
});

type ArticleFormValues = z.infer<typeof articleSchema>;

const normalizeDateTimeForApi = (value: string | undefined) => {
  if (!value) {
    return undefined;
  }

  return /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value} 00:00:00` : value;
};

const extractDatePart = (value: string | null | undefined) => {
  return value?.split(/[ T]/)[0] || "";
};

const parseOptionalNumber = (value: string | number | undefined) => {
  if (value === undefined || value === "") {
    return undefined;
  }

  const parsedValue = typeof value === "number" ? value : Number(value);
  return Number.isFinite(parsedValue) ? parsedValue : undefined;
};

interface ArticleDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (data: CreateArticleRequest) => Promise<void>;
  isLoading?: boolean;
  mode?: "add" | "edit";
  initialData?: Article | null;
  submitAction?: ActionSpec;
}

export function ArticleDialog({
  open,
  onOpenChange,
  onSubmit,
  isLoading,
  mode = "add",
  initialData,
  submitAction,
}: ArticleDialogProps) {
  const t = useTranslations();
  const locale = useLocale() as "ar" | "en";
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const existingImagePreview =
    !selectedFile && (initialData?.featured_image_url || initialData?.featured_image)
      ? [
        {
          id: `article-image-${initialData?.id ?? "new"}`,
          name: initialData?.title || "article-image",
          previewUrl: initialData?.featured_image_url || initialData?.featured_image || null,
        },
      ]
      : [];

  const form = useForm<ArticleFormValues>({
    resolver: zodResolver(articleSchema),
    defaultValues: {
      title: "",
      // slug: "",
      content: "",
      author_name: "",
      category: "",
      tags: "",
      featured_image_url: "",
      article_url: "",
      views: "",
      unique_views: "",
      shares: "",
      comments: "",
      recorded_at: "",
      published_at: "",
      status: "draft",
      article_type: "opinion",
    },
  });

  // Update form when initialData changes (for edit mode)
  useEffect(() => {
    if (initialData && open) {
      const initialStatus: ArticleFormValues["status"] =
        initialData.status === "draft" ||
          initialData.status === "published" ||
          initialData.status === "archived"
          ? initialData.status
          : "draft";
      const initialArticleType: ArticleFormValues["article_type"] =
        initialData.article_type === "opinion" ||
          initialData.article_type === "analysis" ||
          initialData.article_type === "feature" ||
          initialData.article_type === "interview"
          ? initialData.article_type
          : "opinion";

      form.reset({
        title: initialData.title || "",
        // slug: initialData.slug || "",
        content: initialData.content || "",
        author_name: initialData.author_name || initialData.author || "",
        category: initialData.category || "",
        tags: initialData.tags?.join(", ") || "",
        featured_image_url:
          initialData.featured_image_url || initialData.featured_image || "",
        article_url: initialData.article_url || initialData.url || "",
        views: initialData.stats?.views !== undefined ? String(initialData.stats.views) : "",
        unique_views: initialData.stats?.unique_views !== undefined ? String(initialData.stats.unique_views) : "",
        shares: initialData.stats?.shares !== undefined ? String(initialData.stats.shares) : "",
        comments: initialData.stats?.comments !== undefined ? String(initialData.stats.comments) : "",
        recorded_at: extractDatePart(initialData.stats?.recorded_at),
        published_at: extractDatePart(initialData.published_at),
        status: initialStatus,
        article_type: initialArticleType,
      });
      queueMicrotask(() => setSelectedFile(null));
    } else if (!initialData && open) {
      form.reset({
        title: "",
        // slug: "",
        content: "",
        author_name: "",
        category: "",
        tags: "",
        featured_image_url: "",
        article_url: "",
        views: "",
        unique_views: "",
        shares: "",
        comments: "",
        recorded_at: "",
        published_at: "",
        status: "draft",
        article_type: "opinion",
      });
      queueMicrotask(() => setSelectedFile(null));
    }
  }, [initialData, open, form]);

  const handleFilesSelected = (files: File[]) => {
    setSelectedFile(files[0] || null);
  };

  const handleSubmit = async (values: ArticleFormValues) => {
    const views = parseOptionalNumber(values.views);
    const uniqueViews = parseOptionalNumber(values.unique_views);
    const shares = parseOptionalNumber(values.shares);
    const comments = parseOptionalNumber(values.comments);
    const stats =
      views !== undefined ||
      uniqueViews !== undefined ||
      shares !== undefined ||
      comments !== undefined ||
      values.recorded_at
        ? {
          views,
          unique_views: uniqueViews,
          shares,
          comments,
          recorded_at: normalizeDateTimeForApi(values.recorded_at),
        }
        : undefined;

    const requestData: CreateArticleRequest = {
      title: values.title,
      // slug: values.slug || undefined,
      content: values.content,
      author_name: values.author_name || undefined,
      category: values.category || undefined,
      tags: values.tags
        ? values.tags.split(",").map((tag) => tag.trim()).filter(Boolean)
        : undefined,
      ...(selectedFile instanceof File ? { featured_image: selectedFile } : {}),
      featured_image_url: values.featured_image_url || undefined,
      article_url: values.article_url || undefined,
      published_at: normalizeDateTimeForApi(values.published_at),
      status: values.status,
      article_type: values.article_type,
      ...(stats ? { stats } : {}),
    };

    await onSubmit(requestData);
    form.reset();
    setSelectedFile(null);
    onOpenChange(false);
  };

  const handleClose = () => {
    form.reset();
    setSelectedFile(null);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>
            {mode === "edit"
              ? t("articles.editArticle")
              : t("articles.addArticle")}
          </DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(handleSubmit)}
            className="flex min-h-0 flex-1 flex-col"
          >
            <DialogBody className="space-y-4">
              {/* Title */}
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      {t("articles.form.title")}
                      <span className="text-destructive ms-1">*</span>
                    </FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t("articles.form.titlePlaceholder")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Slug */}
              {/* <FormField
                control={form.control}
                name="slug"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("articles.form.slug")}</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t("articles.form.slugPlaceholder")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              /> */}

              {/* Content */}
              <FormField
                control={form.control}
                name="content"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      {t("articles.form.content")}
                      <span className="text-destructive ms-1">*</span>
                    </FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder={t("articles.form.contentPlaceholder")}
                        rows={4}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Author Name */}
              <FormField
                control={form.control}
                name="author_name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("articles.form.authorName")}</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={t("articles.form.authorNamePlaceholder")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Category and Tags Row */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="category"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.category")}</FormLabel>
                      <FormControl>
                        <Input
                          placeholder={t("articles.form.categoryPlaceholder")}
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="tags"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.tags")}</FormLabel>
                      <FormControl>
                        <Input
                          placeholder={t("articles.form.tagsPlaceholder")}
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              {/* Featured Image Upload */}
              <div className="space-y-2">
                <FormLabel>{t("articles.form.featuredImage")}</FormLabel>
                <FileUploadDropzone
                  onFilesSelected={handleFilesSelected}
                  acceptedTypes={[".jpg", ".jpeg", ".png", ".webp", ".gif"]}
                  maxSize={5}
                  useGlobalSettings={false}
                  value={selectedFile ? [selectedFile] : []}
                  externalPreviewItems={existingImagePreview}
                  multiple={false}
                  previewVariant="grid"
                  translations={{
                    dragText: t("common.dragDropImage"),
                    browseText: t("common.browseFiles"),
                    maxSizeText: t("common.maxFileSize", { size: "5MB" }),
                  }}
                />
              </div>

              <div className="flex items-center gap-4">
                <div className="h-px flex-1 bg-border" />
                <span className="text-xs text-muted-foreground uppercase">
                  {t("common.or") || "OR"}
                </span>
                <div className="h-px flex-1 bg-border" />
              </div>

              <FormField
                control={form.control}
                name="featured_image_url"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("articles.form.featuredImageUrl")}</FormLabel>
                    <FormControl>
                      <Input
                        type="url"
                        placeholder={t("articles.form.featuredImageUrlPlaceholder")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Article URL */}
              <FormField
                control={form.control}
                name="article_url"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("articles.form.articleUrl")}</FormLabel>
                    <FormControl>
                      <Input
                        type="url"
                        placeholder={t("articles.form.articleUrlPlaceholder")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <FormField
                  control={form.control}
                  name="published_at"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.publishedAt")}</FormLabel>
                      <FormControl>
                        <Datepicker
                          value={parseDateYMD(field.value)}
                          onChange={(date) =>
                            field.onChange(formatDateToYMD(date))
                          }
                          locale={locale}
                          mode="single"
                          showShortcuts={false}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="views"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.initialViews")}</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          placeholder="0"
                          {...field}
                          onChange={(e) =>
                            field.onChange(
                              e.target.value === "" ? "" : Number(e.target.value)
                            )
                          }
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="unique_views"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.initialUniqueViews") || "Initial Unique Views"}</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          placeholder="0"
                          {...field}
                          onChange={(e) =>
                            field.onChange(
                              e.target.value === "" ? "" : Number(e.target.value)
                            )
                          }
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <FormField
                  control={form.control}
                  name="shares"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.initialShares") || "Initial Shares"}</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          placeholder="0"
                          {...field}
                          onChange={(e) =>
                            field.onChange(
                              e.target.value === "" ? "" : Number(e.target.value)
                            )
                          }
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="comments"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.initialComments") || "Initial Comments"}</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          placeholder="0"
                          {...field}
                          onChange={(e) =>
                            field.onChange(
                              e.target.value === "" ? "" : Number(e.target.value)
                            )
                          }
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="recorded_at"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.recordedAt")}</FormLabel>
                      <FormControl>
                        <Datepicker
                          value={parseDateYMD(field.value)}
                          onChange={(date) =>
                            field.onChange(formatDateToYMD(date))
                          }
                          locale={locale}
                          mode="single"
                          showShortcuts={false}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              {/* Status and Article Type Row */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.status")}</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue
                              placeholder={t("articles.form.selectStatus")}
                            />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="draft">
                            {t("articles.form.statusDraft")}
                          </SelectItem>
                          <SelectItem value="published">
                            {t("articles.form.statusPublished")}
                          </SelectItem>
                          <SelectItem value="archived">
                            {t("articles.form.statusArchived")}
                          </SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="article_type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("articles.form.articleType")}</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue
                              placeholder={t("articles.form.selectArticleType")}
                            />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="opinion">
                            {t("articles.form.typeOpinion")}
                          </SelectItem>
                          <SelectItem value="analysis">
                            {t("articles.form.typeAnalysis")}
                          </SelectItem>
                          <SelectItem value="feature">
                            {t("articles.form.typeFeature")}
                          </SelectItem>
                          <SelectItem value="interview">
                            {t("articles.form.typeInterview") || "Interview"}
                          </SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </DialogBody>

            <DialogFooter className="gap-2">
              <AuthorizedAction
                action={
                  submitAction || {
                    actionKey: mode === "edit"
                      ? "articles.update"
                      : "articles.create",
                    mode: "disable",
                  }
                }
                surface="form"
              >
                <Button type="submit" disabled={isLoading}>
                  {isLoading
                    ? t("common.loading")
                    : mode === "edit"
                      ? t("common.save")
                      : t("articles.addArticle")}
                </Button>
              </AuthorizedAction>
              <Button
                type="button"
                variant="outline"
                onClick={handleClose}
                disabled={isLoading}
              >
                {t("common.cancel")}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}