"use client";

import { PageUpsertFormView } from "@/components/dashboard/pages/page-upsert-form-view";
import type {
  DashboardPageItem,
  DashboardPageLanguage,
} from "@/components/dashboard/pages/pages-types";
import {
  useDashboardPageMutations,
  usePageLocations,
} from "@/hooks/use-dashboard-pages-data";
import { useRouter } from "@/i18n/routing";
import { useState } from "react";
import { useForm } from "react-hook-form";

export interface PageUpsertFormValues {
  titleAr: string;
  titleEn: string;
  contentAr: string;
  contentEn: string;
  metaTitle: string;
  metaDescription: string;
  language: DashboardPageLanguage;
  location: string;
  slug: string;
  metaImage: File | string | null;
  isActive: boolean;
  displayInNavbar: boolean;
  displayTitle: boolean;
  displayNavigationLocation: boolean;
  displayToAuthenticated: boolean;
}

interface PageUpsertFormProps {
  mode: "create" | "edit";
  pageId?: string;
  initial?: DashboardPageItem | null;
}

const DEFAULT_VALUES: PageUpsertFormValues = {
  titleAr: "",
  titleEn: "",
  contentAr: "",
  contentEn: "",
  metaTitle: "",
  metaDescription: "",
  language: "ar",
  location: "",
  slug: "",
  metaImage: null,
  isActive: true,
  displayInNavbar: true,
  displayTitle: true,
  displayNavigationLocation: true,
  displayToAuthenticated: false,
};

function mapInitial(
  initial: DashboardPageItem | null | undefined
): PageUpsertFormValues | undefined {
  if (!initial) return undefined;
  return {
    titleAr: initial.titleAr ?? initial.title ?? "",
    titleEn: initial.titleEn ?? "",
    contentAr: initial.contentAr ?? initial.content ?? "",
    contentEn: initial.contentEn ?? "",
    metaTitle: initial.metaTitle ?? "",
    metaDescription: initial.metaDescription ?? "",
    language: initial.language,
    location: initial.locationKey,
    slug: initial.slug,
    metaImage: initial.metaImage ?? null,
    isActive: initial.isActive,
    displayInNavbar: initial.displayInNavbar,
    displayTitle: initial.displayTitle,
    displayNavigationLocation: initial.displayNavigationLocation,
    displayToAuthenticated: initial.displayToAuthenticated,
  };
}

export function PageUpsertForm({ mode, pageId, initial }: PageUpsertFormProps) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { data: locations } = usePageLocations();
  const mutations = useDashboardPageMutations();

  const form = useForm<PageUpsertFormValues>({
    defaultValues: { ...DEFAULT_VALUES, ...(mapInitial(initial) ?? {}) },
    mode: "onBlur",
  });

  const handleSubmit = async (values: PageUpsertFormValues) => {
    setIsSubmitting(true);
    try {
      if (mode === "edit" && pageId) {
        await mutations.update(pageId, values);
      } else {
        await mutations.create(values);
        router.push("/dashboard/pages");
      }
    } catch {

    } finally {
      setIsSubmitting(false);
    }
  };

  const handleCancel = () => {
    router.push("/dashboard/pages");
  };

  return (
    <PageUpsertFormView
      form={form}
      mode={mode}
      locations={locations}
      isSubmitting={isSubmitting}
      onSubmit={handleSubmit}
    />
  );
}