"use client";

import React, { createContext, useContext, useState, useEffect } from "react";

export interface Currency {
  code: string;
  symbol: string;
  rate: number;
}

interface CurrencyContextType {
  currencies: Currency[];
  selectedCurrency: Currency;
  setCurrency: (code: string) => void;
  formatPrice: (usdPrice: number) => string;
  convertPrice: (usdPrice: number) => number;
}

const defaultCurrency: Currency = { code: "USD", symbol: "$", rate: 1 };

const CurrencyContext = createContext<CurrencyContextType>({
  currencies: [defaultCurrency],
  selectedCurrency: defaultCurrency,
  setCurrency: () => {},
  formatPrice: (price: number) => `$${price.toFixed(2)}`,
  convertPrice: (price: number) => price,
});

export function CurrencyProvider({ children }: { children: React.ReactNode }) {
  const [currencies, setCurrencies] = useState<Currency[]>([defaultCurrency]);
  const [selectedCurrency, setSelectedCurrency] = useState<Currency>(defaultCurrency);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    async function fetchCurrencies() {
      try {
        const res = await fetch("/api/settings");
        if (res.ok) {
          const data = await res.json();
          if (data.supported_currencies) {
            const parsed = JSON.parse(data.supported_currencies);
            if (Array.isArray(parsed) && parsed.length > 0) {
              setCurrencies(parsed);
              
              // Load saved preference from localStorage
              const savedCode = localStorage.getItem("ag_currency");
              if (savedCode) {
                const saved = parsed.find(c => c.code === savedCode);
                if (saved) setSelectedCurrency(saved);
              } else {
                // Default to first currency (usually USD)
                setSelectedCurrency(parsed[0]);
              }
            }
          }
        }
      } catch (err) {
        console.error("Failed to load currencies", err);
      } finally {
        setMounted(true);
      }
    }
    fetchCurrencies();
  }, []);

  const setCurrency = (code: string) => {
    const curr = currencies.find(c => c.code === code);
    if (curr) {
      setSelectedCurrency(curr);
      localStorage.setItem("ag_currency", code);
    }
  };

  const convertPrice = (usdPrice: number) => {
    return usdPrice * selectedCurrency.rate;
  };

  const formatPrice = (usdPrice: number) => {
    const converted = convertPrice(usdPrice);
    
    // Formatting rules: 
    // If it's a zero decimal currency (like BDT or JPY), we might not want decimals.
    // But for simplicity, we'll keep 2 decimal places unless it's perfectly round
    const formatted = converted.toLocaleString("en-US", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
    
    return `${selectedCurrency.symbol}${formatted}`;
  };

  // Prevent hydration mismatch by not rendering until mounted
  if (!mounted) {
    return <>{children}</>;
  }

  return (
    <CurrencyContext.Provider value={{ currencies, selectedCurrency, setCurrency, formatPrice, convertPrice }}>
      {children}
    </CurrencyContext.Provider>
  );
}

export function useCurrency() {
  return useContext(CurrencyContext);
}