"use client";

import React, { createContext, useContext, useEffect, useState } from "react";
import { useVendorDetails } from "@/hooks/useVendorDetails";
import { useEventDetails } from "@/hooks/useEventDetails";
import { EVENT_ID } from "@/config/constants";
import { useTranslations } from "next-intl";
import type { Vendor } from "@/types/event";

interface VendorContextType {
  vendor: Vendor | null;
  isLoading: boolean;
  error: Error | null;
}

const VendorContext = createContext<VendorContextType | undefined>(undefined);

export function VendorProvider({ children }: { children: React.ReactNode }) {
  const tCommon = useTranslations("Common");
  const {
    data: vendorData,
    isLoading: vendorLoading,
    error: vendorError,
  } = useVendorDetails(EVENT_ID);

  const { data: eventData } = useEventDetails();

  const [vendor, setVendor] = useState<Vendor | null>(null);

  useEffect(() => {
    const root = document.documentElement;
    let currentVendor: Vendor | null = null;

    if (vendorData?.data?.vendor) {
      currentVendor = vendorData.data.vendor;
      setVendor(currentVendor);
    } else if (eventData?.data?.event?.vendor) {
      currentVendor = eventData.data.event.vendor;
      setVendor(currentVendor);
    }

    if (currentVendor) {
      // Set primary color with fallback
      root.style.setProperty(
        "--color-vendor-primary",
        currentVendor.primary_color || "#00424b" // --color-primary-midnight_green-main
      );

      // Set secondary color with fallback
      root.style.setProperty(
        "--color-vendor-secondary",
        currentVendor.secondary_color || "#169696" // --color-primary-dark_cyan-main
      );

      // Set tertiary color with fallback
      root.style.setProperty(
        "--color-vendor-tertiary",
        currentVendor.tertiary_color || "#a9dacb" // --color-secondary-coral_blue-main
      );
    } else {
      // Set fallback colors even if no vendor is found
      root.style.setProperty(
        "--color-vendor-primary",
        "#00424b" // --color-primary-midnight_green-main
      );
      root.style.setProperty(
        "--color-vendor-secondary",
        "#169696" // --color-primary-dark_cyan-main
      );
      root.style.setProperty(
        "--color-vendor-tertiary",
        "#a9dacb" // --color-secondary-coral_blue-main
      );
    }
  }, [vendorData, eventData]);

  const isLoading = vendorLoading || (!vendor && !vendorError);
  const error = vendorError;

  if (isLoading) {
    return (
      <VendorContext.Provider
        value={{ vendor: null, isLoading: true, error: null }}
      >
        <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
          <div className="flex flex-col items-center gap-4">
            <div className="w-12 h-12 border-4 border-gray-300 border-t-gray-600 rounded-full animate-spin"></div>
          </div>
        </div>
      </VendorContext.Provider>
    );
  }

  if (error || !vendor) {
    return (
      <VendorContext.Provider
        value={{
          vendor: null,
          isLoading: false,
          error: error || new Error("Failed to load vendor"),
        }}
      >
        <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
          <div className="flex flex-col items-center gap-4 px-4 text-center">
            <p className="text-lg text-red-600 font-semibold">
              {tCommon("errorLoadingVendor")}
            </p>
            <p className="text-sm text-gray-600">
              {error?.message || tCommon("pleaseRefreshPage")}
            </p>
          </div>
        </div>
      </VendorContext.Provider>
    );
  }

  return (
    <VendorContext.Provider value={{ vendor, isLoading: false, error: null }}>
      {children}
    </VendorContext.Provider>
  );
}

export function useVendor() {
  const context = useContext(VendorContext);
  if (context === undefined) {
    throw new Error("useVendor must be used within a VendorProvider");
  }
  return context;
}