/**
 * Quantity Limits Settings Page
 */

import { useState, useEffect, useCallback } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Hash, Settings, ShoppingCart, FolderTree, MessageSquare, Loader2, Crown } from "lucide-react"
import { toast } from "sonner"
import { useQuantityLimitsSettings, useCartRules, useCategoryRules } from "../hooks"
import { GeneralTab, CategoryRulesTab, CartRulesTab, MessagesTab, ProductsTab, QuantityLimitsUpgradeTab } from "./tabs"
import type { CategoryRulesMap } from "./tabs/category-rules-tab"
import { FeatureHeader } from "@/components/feature-header"
import { usePro } from "@/contexts/pro-context"
import { ProIndicator } from "@/components/pro/pro-indicator"
import type { QuantityLimitsSettings, CartRules } from "../types"

// Default settings for reset
const defaultQuantityLimitsSettings: QuantityLimitsSettings = {
  enabled: false,
  show_notices: true,
  notice_style: 'info',
  block_checkout: true,
  combine_variations: false,
  min_qty_message: 'Minimum quantity required is {min}',
  max_qty_message: 'Maximum quantity allowed is {max}',
  step_qty_message: 'Quantity must be in multiples of {step}',
  min_order_qty_message: 'Minimum order quantity is {min}',
  max_order_qty_message: 'Maximum order quantity is {max}',
  min_order_total_message: 'Minimum order total is {min}',
  max_order_total_message: 'Maximum order total is {max}',
  category_min_message: 'Minimum quantity for {category} is {min}',
  category_max_message: 'Maximum quantity for {category} is {max}',
}

const defaultCartRules: CartRules = {
  min_qty_restriction: 0,
  max_qty_restriction: 0,
  enable_spend: false,
  min_spend: 0,
  max_spend: 0,
  include_shipping: false,
  excluded_products: [],
}

export function QuantityLimitsSettings() {
  const { isPro } = usePro()
  const { settings, isLoading: settingsLoading, isSaving: settingsSaving, saveSettings } = useQuantityLimitsSettings()
  const { rules: cartRules, isLoading: cartRulesLoading, isSaving: cartRulesSaving, saveRules: saveCartRules } = useCartRules()
  const { saveBulkCategoryRules } = useCategoryRules()

  const [localSettings, setLocalSettings] = useState<QuantityLimitsSettings | null>(null)
  const [localCartRules, setLocalCartRules] = useState<CartRules>(defaultCartRules)
  const [localCategoryRules, setLocalCategoryRules] = useState<CategoryRulesMap>({})
  const [initialCategoryRules, setInitialCategoryRules] = useState<CategoryRulesMap>({})
  const [hasChanges, setHasChanges] = useState(false)

  // Initialize local state when data loads
  useEffect(() => {
    if (settings) {
      setLocalSettings(settings)
    }
  }, [settings])

  useEffect(() => {
    if (cartRules) {
      setLocalCartRules(cartRules)
    }
  }, [cartRules])

  // Handle categories loaded from CategoryRulesTab
  const handleCategoriesLoaded = useCallback((categories: Array<{ id: number; min_qty: string; max_qty: string; step_qty: string }>) => {
    const initial: CategoryRulesMap = {}
    categories.forEach((cat) => {
      initial[cat.id] = {
        min_qty: cat.min_qty || '',
        max_qty: cat.max_qty || '',
        step_qty: cat.step_qty || ''
      }
    })
    setLocalCategoryRules(initial)
    setInitialCategoryRules(initial)
  }, [])

  // Track changes
  useEffect(() => {
    if (localSettings && settings) {
      const settingsChanged = JSON.stringify(localSettings) !== JSON.stringify(settings)
      const cartRulesChanged = cartRules ? JSON.stringify(localCartRules) !== JSON.stringify(cartRules) : false
      const categoryRulesChanged = JSON.stringify(localCategoryRules) !== JSON.stringify(initialCategoryRules)
      setHasChanges(settingsChanged || cartRulesChanged || categoryRulesChanged)
    }
  }, [localSettings, localCartRules, localCategoryRules, settings, cartRules, initialCategoryRules])

  const handleSave = async () => {
    // Save general settings
    if (localSettings) {
      await saveSettings(localSettings)
    }
    // Save cart rules
    if (localCartRules) {
      await saveCartRules(localCartRules)
    }
    // Save category rules (bulk — single request for all changed categories)
    const changedCategoryRules = Object.entries(localCategoryRules)
      .filter(([categoryId, rule]) => {
        const initialRule = initialCategoryRules[parseInt(categoryId)]
        return JSON.stringify(rule) !== JSON.stringify(initialRule)
      })
      .map(([categoryId, rule]) => ({
        category_id: parseInt(categoryId),
        ...rule,
      }))

    if (changedCategoryRules.length > 0) {
      await saveBulkCategoryRules(changedCategoryRules)
    }
    // Update initial category rules to match current
    setInitialCategoryRules(localCategoryRules)
    
    toast.success("Settings saved", {
      description: "Your Quantity Limits settings have been saved successfully."
    })
    setHasChanges(false)
  }

  const resetToDefaults = useCallback(() => {
    setLocalSettings(defaultQuantityLimitsSettings)
  }, [])

  const isLoading = settingsLoading || cartRulesLoading
  const isSaving = settingsSaving || cartRulesSaving

  if (isLoading) {
    return (
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        </div>
      </div>
    )
  }

  if (!localSettings) {
    return (
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="text-center py-12 text-muted-foreground">
          Failed to load settings. Please refresh the page.
        </div>
      </div>
    )
  }

  return (
    <FeatureHeader
      icon={<Hash className="h-6 w-6" />}
      title="Quantity Limits"
      description="Set minimum and maximum quantity rules for products, categories, and cart."
      documentationUrl="https://www.swiftcommerce.io/help/products/quantity-limits/"
      enabled={localSettings.enabled}
      onEnabledChange={(checked) => setLocalSettings({ ...localSettings, enabled: checked })}
      hasChanges={hasChanges}
      isSaving={isSaving}
      onSave={handleSave}
      onReset={resetToDefaults}
    >
      {/* Tabs */}
      <Tabs defaultValue="general" className="space-y-4">
        <TabsList>
          <TabsTrigger value="general" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            <span className="hidden sm:inline">General</span>
          </TabsTrigger>
          <TabsTrigger value="products" className="flex items-center gap-2">
            <Hash className="h-4 w-4" />
            <span className="hidden sm:inline">Products</span>
          </TabsTrigger>
          {isPro && (
          <TabsTrigger value="categories" className="flex items-center gap-2">
            <FolderTree className="h-4 w-4" />
            <span className="hidden sm:inline">Categories</span>
            <ProIndicator size="sm" />
          </TabsTrigger>
          )}
          {isPro && (
          <TabsTrigger value="cart" className="flex items-center gap-2">
            <ShoppingCart className="h-4 w-4" />
            <span className="hidden sm:inline">Cart</span>
            <ProIndicator size="sm" />
          </TabsTrigger>
          )}
          {isPro && (
          <TabsTrigger value="messages" className="flex items-center gap-2">
            <MessageSquare className="h-4 w-4" />
            <span className="hidden sm:inline">Messages</span>
            <ProIndicator size="sm" />
          </TabsTrigger>
          )}
          {!isPro && (
          <TabsTrigger
            value="upgrade"
            className="gap-2 text-white hover:text-white data-[state=active]:text-white data-[state=active]:shadow-none"
            style={{ backgroundColor: '#002269' }}
          >
            <Crown className="h-4 w-4" />
            <span className="hidden sm:inline">Upgrade to Pro</span>
          </TabsTrigger>
          )}
        </TabsList>

        <TabsContent value="general">
          <GeneralTab 
            settings={localSettings} 
            onChange={setLocalSettings} 
          />
        </TabsContent>

        <TabsContent value="products">
          <ProductsTab />
        </TabsContent>

        <TabsContent value="categories">
          <CategoryRulesTab 
            rules={localCategoryRules}
            onChange={setLocalCategoryRules}
            onCategoriesLoaded={handleCategoriesLoaded}
          />
        </TabsContent>

        <TabsContent value="cart">
          <CartRulesTab 
            rules={localCartRules}
            onChange={setLocalCartRules}
          />
        </TabsContent>

        <TabsContent value="messages">
          <MessagesTab 
            settings={localSettings} 
            onChange={setLocalSettings} 
          />
        </TabsContent>

        {!isPro && (
        <TabsContent value="upgrade">
          <QuantityLimitsUpgradeTab />
        </TabsContent>
        )}
      </Tabs>
    </FeatureHeader>
  )
}