"use client";

import { SiteSettingsView } from "@/components/dashboard/settings/site-settings-view";
import type { SiteSettingsTab } from "@/components/dashboard/settings/settings-types";
import { useSearchParams } from "next/navigation";
import { useState, useEffect, useRef } from "react";
import { 
  useSiteFontSettings, 
  useTrackingSettings, 
  updateSiteFontSettings, 
  updateTrackingSettings, 
  generateSitemap 
} from "@/lib/api/dashboard/settings-api";
import { useFonts } from "@/lib/api/dashboard/fonts-api";
import { updateFont, deleteFont, createFont } from "@/lib/api/dashboard/fonts-api";
import { useRouter } from "next/navigation";
import type { AdminFontItem, AdminTrackingSettings } from "@/components/dashboard/settings/settings-api-types";

function parseSiteTab(value: string | null): SiteSettingsTab {
  if (value === "seo") {
    return "seo";
  }

  return "fonts";
}

export function SiteSettingsContainer() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const activeTab = parseSiteTab(searchParams.get("tab"));
  const initializingRef = useRef(true);

  const { siteFontSettings, isLoading: isLoadingSiteFonts } = useSiteFontSettings();
  const { trackingSettings, isLoading: isLoadingTrackingSettings } = useTrackingSettings();
  const { fonts: availableFonts, isLoading: isLoadingFonts } = useFonts();

  const [selectedFontId, setSelectedFontId] = useState<string | null>(null);
  const [isEditFontOpen, setIsEditFontOpen] = useState(false);
  const [isDeleteFontOpen, setIsDeleteFontOpen] = useState(false);
  const [isAddFontOpen, setIsAddFontOpen] = useState(false);
  const [isSavingSettings, setIsSavingSettings] = useState(false);
  const [fontName, setFontName] = useState("");
  const [fontFamily, setFontFamily] = useState("");
  const [fontUrl, setFontUrl] = useState("");
  const [fontSource, setFontSource] = useState("google");
  const [fontWeights, setFontWeights] = useState("400,500,700");
  const [fontOrder, setFontOrder] = useState(1);

  // Form state for site font settings
  const [primaryFontId, setPrimaryFontId] = useState<string>("");
  const [secondaryFontId, setSecondaryFontId] = useState<string>("");
  const [tertiaryFontId, setTertiaryFontId] = useState<string>("");

  // Form state for SEO/tracking settings
  const [seoForm, setSeoForm] = useState<Partial<AdminTrackingSettings>>({});

  useEffect(() => {
    if (siteFontSettings && !initializingRef.current) {
      // Reset form when settings change
      setSelectedFontId(null);
      setFontName("");
      setFontFamily("");
      setFontUrl("");
    }
    
    // Initialize site font settings form
    if (siteFontSettings) {
      setPrimaryFontId(siteFontSettings.primary_font_id?.toString() ?? "");
      setSecondaryFontId(siteFontSettings.secondary_font_id?.toString() ?? "");
      setTertiaryFontId(siteFontSettings.tertiary_font_id?.toString() ?? "");
    }
    
    // Initialize SEO form
    if (trackingSettings) {
      setSeoForm(trackingSettings);
    }
    
    // After first render, mark as initialized
    initializingRef.current = false;
  }, [siteFontSettings, trackingSettings]);

  const handleOpenEditFont = (fontId: string) => {
    const font = availableFonts?.find(f => f.id.toString() === fontId);
    if (font) {
      setSelectedFontId(fontId);
      setFontName(font.name);
      setFontFamily(font.font_family);
      setFontUrl(font.url ?? "");
      setFontSource(font.source);
      setFontWeights(font.weights?.join(",") ?? "");
      setFontOrder(font.order);
      setIsDeleteFontOpen(false);
      setIsEditFontOpen(true);
    }
  };

  const handleOpenAddFont = () => {
    setSelectedFontId(null);
    setFontName("");
    setFontFamily("");
    setFontUrl("");
    setFontSource("google");
    setFontWeights("400,500,700");
    setFontOrder((availableFonts?.length ?? 0) + 1);
    setIsDeleteFontOpen(false);
    setIsAddFontOpen(true);
  };

  const handleOpenDeleteFont = (fontId: string) => {
    setSelectedFontId(fontId);
    setIsEditFontOpen(false);
    setIsAddFontOpen(false);
    setIsDeleteFontOpen(true);
  };

  const handleSaveFontEdit = async () => {
    if (!selectedFontId) return;
    
    try {
      await updateFont(Number(selectedFontId), {
        name: fontName,
        font_family: fontFamily,
        url: fontUrl,
        source: fontSource,
        weights: fontWeights.split(",").map(Number).filter(n => !isNaN(n)),
        order: fontOrder,
      });
      
      // Reset form and close dialog
      setSelectedFontId(null);
      setFontName("");
      setFontFamily("");
      setFontUrl("");
      setIsEditFontOpen(false);
    } catch (error) {
      // Error handling is done by the mutation hook
    }
  };

  const handleSaveNewFont = async () => {
    try {
      await createFont({
        name: fontName,
        font_family: fontFamily,
        url: fontUrl,
        source: fontSource,
        weights: fontWeights.split(",").map(Number).filter(n => !isNaN(n)),
        order: fontOrder,
        is_active: true,
        is_default: false,
      });
      
      // Reset form and close dialog
      setSelectedFontId(null);
      setFontName("");
      setFontFamily("");
      setFontUrl("");
      setIsAddFontOpen(false);
    } catch (error) {
      // Error handling is done by the mutation hook
    }
  };

  const handleConfirmDeleteFont = async () => {
    if (!selectedFontId) return;
    
    try {
      await deleteFont(Number(selectedFontId));
      
      // Reset form and close dialog
      setSelectedFontId(null);
      setFontName("");
      setFontFamily("");
      setFontUrl("");
      setIsDeleteFontOpen(false);
    } catch (error) {
      // Error handling is done by the mutation hook
    }
  };

  const handleSaveSiteFontSettings = async () => {
    setIsSavingSettings(true);
    try {
      await updateSiteFontSettings({
        primary_font_id: primaryFontId ? Number(primaryFontId) : null,
        secondary_font_id: secondaryFontId ? Number(secondaryFontId) : null,
        tertiary_font_id: tertiaryFontId ? Number(tertiaryFontId) : null,
      });
      router.refresh();
    } catch (error) {
      // Error handled by mutation
    } finally {
      setIsSavingSettings(false);
    }
  };

  const handleSaveSeoSettings = async () => {
    setIsSavingSettings(true);
    try {
      await updateTrackingSettings(seoForm);
      router.refresh();
    } catch (error) {
      // Error handled by mutation
    } finally {
      setIsSavingSettings(false);
    }
  };

  const handleGenerateSitemap = async () => {
    try {
      await generateSitemap();
    } catch (error) {
      // Error handled by mutation
    }
  };

  return (
    <SiteSettingsView
      activeTab={activeTab}
      fonts={availableFonts ?? []}
      siteFontSettings={siteFontSettings}
      trackingSettings={trackingSettings}
      isEditFontOpen={isEditFontOpen}
      isDeleteFontOpen={isDeleteFontOpen}
      isAddFontOpen={isAddFontOpen}
      fontName={fontName}
      fontFamily={fontFamily}
      fontUrl={fontUrl}
      fontSource={fontSource}
      fontWeights={fontWeights}
      fontOrder={fontOrder}
      selectedFontId={selectedFontId}
      primaryFontId={primaryFontId}
      secondaryFontId={secondaryFontId}
      tertiaryFontId={tertiaryFontId}
      seoForm={seoForm}
      onOpenEditFont={handleOpenEditFont}
      onOpenAddFont={handleOpenAddFont}
      onOpenDeleteFont={handleOpenDeleteFont}
      onEditFontOpenChange={setIsEditFontOpen}
      onAddFontOpenChange={setIsAddFontOpen}
      onDeleteFontOpenChange={setIsDeleteFontOpen}
      onChangeFontName={setFontName}
      onChangeFontFamily={setFontFamily}
      onChangeFontUrl={setFontUrl}
      onChangeFontSource={setFontSource}
      onChangeFontWeights={setFontWeights}
      onChangeFontOrder={setFontOrder}
      onChangePrimaryFontId={setPrimaryFontId}
      onChangeSecondaryFontId={setSecondaryFontId}
      onChangeTertiaryFontId={setTertiaryFontId}
      onChangeSeoForm={setSeoForm}
      onSaveFontEdit={handleSaveFontEdit}
      onSaveNewFont={handleSaveNewFont}
      onConfirmDeleteFont={handleConfirmDeleteFont}
      onSaveSiteFontSettings={handleSaveSiteFontSettings}
      onSaveSeoSettings={handleSaveSeoSettings}
      onGenerateSitemap={handleGenerateSitemap}
      isLoadingFonts={isLoadingFonts}
      isLoadingSiteFonts={isLoadingSiteFonts}
      isLoadingTrackingSettings={isLoadingTrackingSettings}
      isSavingSettings={isSavingSettings}
    />
  );
}