"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { SocialMediaMediaPreview } from "@/components/dashboard/social-media/social-media-media-preview";
import { useState, useEffect, useMemo } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { FileUploadDropzone } from "@/components/shared/file-upload-dropzone";
import { Datepicker } from "@/components/datepicker/datepicker";
import { useTranslations, useLocale } from "next-intl";
import {
  formatDateToYMD,
  formatYMDToUtcIsoStartOfDay,
  parseDateYMD,
} from "@/lib/date-utils";
import type { ManualPostInput, SocialPlatform } from "@/types";

const normalizeToYMD = (dateStr: string | undefined): string => {
  if (!dateStr) return "";
  const match = dateStr.match(/^(\d{4}-\d{2}-\d{2})/);
  return match ? match[1] : "";
};

const postSchema = z.object({
  title: z.string().min(1),
  publishDate: z.string().optional(),
  content: z.string().optional(),
  post_url: z.string().url().optional().or(z.literal("")),
  impressions: z.coerce.number().min(0).default(0),
  reach: z.coerce.number().min(0).default(0),
  likes: z.coerce.number().min(0).default(0),
  views: z.coerce.number().min(0).default(0),
  shares: z.coerce.number().min(0).default(0),
  comments: z.coerce.number().min(0).default(0),
  platformSpecific: z.record(z.coerce.number().min(0)).optional().default({}),
  media: z.any().optional(),
});

type PostFormValues = z.infer<typeof postSchema>;

const PLATFORM_SPECIFIC_FIELDS: Partial<Record<SocialPlatform, string[]>> = {
  twitter: ["quotes_count", "bookmarks"],
  instagram: ["saves", "profile_visits", "link_clicks"],
  linkedin: ["clicks", "ctr", "page_visits"],
  youtube: ["watch_time_minutes"],
  snapchat: ["screenshots", "story_completions"],
  tiktok: ["profile_visits", "follows_from_video"],
  facebook: [
    "clicks",
    "reactions_love",
    "reactions_haha",
    "reactions_wow",
    "reactions_sad",
    "reactions_angry",
  ],
};

function formatPlatformSpecificLabel(key: string, locale: "ar" | "en") {
  const labels: Record<string, { ar: string; en: string }> = {
    quotes_count: { ar: "عدد الاقتباسات", en: "Quotes Count" },
    bookmarks: { ar: "الحفظ", en: "Bookmarks" },
    saves: { ar: "الحفظ", en: "Saves" },
    profile_visits: { ar: "زيارات الملف", en: "Profile Visits" },
    link_clicks: { ar: "نقرات الرابط", en: "Link Clicks" },
    clicks: { ar: "النقرات", en: "Clicks" },
    ctr: { ar: "نسبة النقر", en: "CTR" },
    page_visits: { ar: "زيارات الصفحة", en: "Page Visits" },
    watch_time_minutes: { ar: "وقت المشاهدة بالدقائق", en: "Watch Time Minutes" },
    screenshots: { ar: "لقطات الشاشة", en: "Screenshots" },
    story_completions: { ar: "إكمال القصة", en: "Story Completions" },
    follows_from_video: { ar: "متابعات من الفيديو", en: "Follows From Video" },
    reactions_love: { ar: "تفاعلات الحب", en: "Love Reactions" },
    reactions_haha: { ar: "تفاعلات الضحك", en: "Haha Reactions" },
    reactions_wow: { ar: "تفاعلات الدهشة", en: "Wow Reactions" },
    reactions_sad: { ar: "تفاعلات الحزن", en: "Sad Reactions" },
    reactions_angry: { ar: "تفاعلات الغضب", en: "Angry Reactions" },
  };

  return labels[key]?.[locale] ?? key.replace(/_/g, " ");
}

interface AddPostDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (data: ManualPostInput) => Promise<void>;
  isLoading?: boolean;
  mode?: "add" | "edit";
  platform?: SocialPlatform | string | null;
  initialData?: {
    title?: string;
    publishDate?: string;
    content?: string;
    post_url?: string;
    media_url?: string | null;
    impressions?: number;
    reach?: number;
    likes?: number;
    views?: number;
    shares?: number;
    comments?: number;
    platformSpecific?: Record<string, number>;
  };
}

export function AddPostDialog({
  open,
  onOpenChange,
  onSubmit,
  isLoading,
  mode = "add",
  platform,
  initialData,
}: AddPostDialogProps) {
  const t = useTranslations();
  const locale = useLocale() as "ar" | "en";
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const platformSpecificFields = useMemo(() => {
    if (!platform) {
      return [];
    }

    return PLATFORM_SPECIFIC_FIELDS[platform as SocialPlatform] ?? [];
  }, [platform]);

  const form = useForm<PostFormValues>({
    resolver: zodResolver(postSchema),
    defaultValues: {
      title: initialData?.title || "",
      publishDate: normalizeToYMD(initialData?.publishDate),
      content: initialData?.content || "",
      post_url: initialData?.post_url || "",
      impressions: initialData?.impressions || 0,
      reach: initialData?.reach || 0,
      likes: initialData?.likes || 0,
      views: initialData?.views || 0,
      shares: initialData?.shares || 0,
      comments: initialData?.comments || 0,
      platformSpecific: initialData?.platformSpecific || {},
    },
  });

  // Helper to parse date string (YYYY-MM-DD) to local Date
  const parseDate = (dateStr: string | undefined): Date | null => {
    return parseDateYMD(dateStr);
  };

  // Helper to format Date to YYYY-MM-DD using local date parts
  const formatDateToString = (date: Date | null): string => {
    return formatDateToYMD(date);
  };

  // Update form when initialData changes (for edit mode)
  useEffect(() => {
    if (initialData && open) {
      form.reset({
        title: initialData.title || "",
        publishDate: normalizeToYMD(initialData.publishDate),
        content: initialData.content || "",
        post_url: initialData.post_url || "",
        impressions: initialData.impressions || 0,
        reach: initialData.reach || 0,
        likes: initialData.likes || 0,
        views: initialData.views || 0,
        shares: initialData.shares || 0,
        comments: initialData.comments || 0,
        platformSpecific: initialData.platformSpecific || {},
      });
    }
  }, [initialData, open, form]);

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

  const handleSubmit = async (values: PostFormValues) => {
    const allowedPlatformSpecific = new Set(platformSpecificFields);
    const platformSpecific = Object.fromEntries(
      Object.entries(values.platformSpecific || {}).filter(
        ([key, value]) =>
          allowedPlatformSpecific.has(key) &&
          value !== undefined &&
          value !== null,
      ),
    );

    const requestData: ManualPostInput = {
      title: values.title,
      published_at: formatYMDToUtcIsoStartOfDay(values.publishDate),
      content: values.content || undefined,
      post_url: values.post_url || undefined,
      impressions: values.impressions,
      reach: values.reach,
      likes: values.likes,
      views: values.views,
      shares: values.shares,
      comments: values.comments,
      media: selectedFile || undefined,
      platform_specific:
        Object.keys(platformSpecific).length > 0
          ? platformSpecific
          : undefined,
    };

    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("socialMedia.editPost") : t("socialMedia.addPost")}
          </DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(handleSubmit)}
            className="flex min-h-0 flex-1 flex-col"
          >
            <DialogBody className="space-y-4">
            {/* Post Title */}
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    {t("socialMedia.postTitle")}
                    <span className="text-destructive ms-1">*</span>
                  </FormLabel>
                  <FormControl>
                    <Input
                      placeholder={t("socialMedia.postTitlePlaceholder")}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Publish Date */}
            <FormField
              control={form.control}
              name="publishDate"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t("socialMedia.publishDate")}</FormLabel>
                  <FormControl>
                    <Datepicker
                      value={parseDate(field.value)}
                      onChange={(date) => field.onChange(formatDateToString(date))}
                      locale={locale}
                      mode="single"
                      showShortcuts={false}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Post Content */}
            <FormField
              control={form.control}
              name="content"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t("socialMedia.postContent")}</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder={t("socialMedia.postContentPlaceholder")}
                      rows={3}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Post URL */}
            <FormField
              control={form.control}
              name="post_url"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t("socialMedia.postUrl")}</FormLabel>
                  <FormControl>
                    <Input
                      type="url"
                      placeholder={t("socialMedia.enterPostUrl")}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {mode === "add" ? (
              <>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <FormField
                control={form.control}
                name="likes"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.likesCount")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="views"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.viewsField")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="shares"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.shares")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="comments"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.commentsCount")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="grid grid-cols-2 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="impressions"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.impressionsField")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="reach"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("socialMedia.reach")}</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder={t("socialMedia.enterNumber")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

            </div>

            {platformSpecificFields.length > 0 ? (
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {platformSpecificFields.map((fieldKey) => (
                  <FormField
                    key={fieldKey}
                    control={form.control}
                    name={`platformSpecific.${fieldKey}` as const}
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{formatPlatformSpecificLabel(fieldKey, locale)}</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            placeholder={t("socialMedia.enterNumber")}
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                ))}
              </div>
            ) : null}

            <div className="space-y-2">
              <FormLabel>{t("socialMedia.postMedia")}</FormLabel>
              <FileUploadDropzone
                onFilesSelected={handleFilesSelected}
                value={selectedFile ? [selectedFile] : []}
                acceptedTypes={[".jpg", ".jpeg", ".png", ".mp4", ".mov"]}
                maxSize={10}
                useGlobalSettings={false}
                multiple={false}
                previewVariant="grid"
                translations={{
                  dragText: t("socialMedia.dragDropImages"),
                  browseText: t("socialMedia.browseFiles"),
                  maxSizeText: t("socialMedia.maxSizeText"),
                }}
              />
            </div>
              </>
            ) : initialData?.media_url ? (
              <SocialMediaMediaPreview
                src={initialData.media_url}
                alt={initialData.title || initialData.content || t("socialMedia.postMedia")}
                containerClassName="overflow-hidden rounded-xl border bg-muted/20 p-2"
                className="max-h-64 w-full rounded-lg object-contain"
              />
            ) : null}

            </DialogBody>

            <DialogFooter className="gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={handleClose}
                disabled={isLoading}
              >
                {t("common.cancel")}
              </Button>
              <AuthorizedAction
                action={{
                  actionKey:
                    mode === "edit"
                      ? "social_media.update_post"
                      : "social_media.add_manual_post",
                }}
                surface="form"
              >
                <Button type="submit" disabled={isLoading}>
                  {isLoading
                    ? t("common.loading")
                    : mode === "edit"
                      ? t("common.save")
                      : t("socialMedia.addPost")
                  }
                </Button>
              </AuthorizedAction>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}