import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  Cookie, 
  Crown,
  Palette, 
  Settings, 
  Link2, 
  Globe,
  Loader2,
  LayoutTemplate,
  ScrollText,
  ListChecks
} from "lucide-react"
import { toast } from "sonner"
import { usePro } from "@/contexts/pro-context"
import { useCookieConsent } from "../hooks/use-cookie-consent"
import { GeneralTab } from "./tabs/general-tab"
import { AppearanceTab } from "./tabs/appearance-tab"
import { BehaviorTab } from "./tabs/behavior-tab"
import { CategoriesTab } from "./tabs/categories-tab"
import { IntegrationsTab } from "./tabs/integrations-tab"
import { AdvancedTab } from "./tabs/advanced-tab"
import { ConsentLogsTab } from "./tabs/consent-logs-tab"
import { UpgradeTab } from "./tabs/upgrade-tab"
import { FeatureHeader } from "@/components/feature-header"
import { ProIndicator } from "@/components/pro/pro-indicator"

export function CookieConsentSettings() {
  const { isPro } = usePro()
  const { 
    settings, 
    loading,
    saving,
    hasChanges,
    updateSettings,
    updateContentSettings,
    updateAppearanceSettings,
    updateBehaviorSettings,
    updateIntegrationSettings,
    updateGeoSettings,
    updateLoggingSettings,
    addCategory,
    updateCategory,
    removeCategory,
    saveSettings,
    resetToDefaults,
  } = useCookieConsent()

  const [activeTab, setActiveTab] = useState("general")

  const handleSave = async () => {
    const result = await saveSettings()
    if (result.success) {
      toast.success("Settings saved", {
        description: "Your cookie consent settings have been saved successfully."
      })
    } else {
      toast.error("Failed to save settings", {
        description: "Please try again or check your connection."
      })
    }
  }

  if (loading) {
    return (
      <div className="flex flex-1 items-center justify-center p-6">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
          <p className="mt-4 text-sm text-muted-foreground">Loading settings...</p>
        </div>
      </div>
    )
  }

  return (
    <FeatureHeader
      icon={<Cookie className="h-6 w-6" />}
      title="Cookie Consent"
      description="Configurable cookie preferences, integration gating, and consent records"
      documentationUrl="https://www.swiftcommerce.io/help/compliance/cookie-consent/"
      enabled={settings.enabled}
      onEnabledChange={(checked) => updateSettings('enabled', checked)}
      hasChanges={hasChanges}
      isSaving={saving}
      onSave={handleSave}
      onReset={resetToDefaults}
    >
      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList>
          <TabsTrigger value="general" className="gap-2">
            <Settings className="h-4 w-4" />
            General
          </TabsTrigger>
          <TabsTrigger value="appearance" className="gap-2">
            <Palette className="h-4 w-4" />
            Appearance
          </TabsTrigger>
          <TabsTrigger value="categories" className="gap-2">
            <ListChecks className="h-4 w-4" />
            Categories
          </TabsTrigger>
          <TabsTrigger value="behavior" className="gap-2">
            <LayoutTemplate className="h-4 w-4" />
            Behavior
          </TabsTrigger>
          {isPro && (
            <TabsTrigger value="integrations" className="gap-2">
              <Link2 className="h-4 w-4" />
              Integrations
              <ProIndicator size="sm" />
            </TabsTrigger>
          )}
          {isPro && (
            <TabsTrigger value="consent-logs" className="gap-2">
              <ScrollText className="h-4 w-4" />
              Consent Logs
              <ProIndicator size="sm" />
            </TabsTrigger>
          )}
          {isPro && (
            <TabsTrigger value="advanced" className="gap-2">
              <Globe className="h-4 w-4" />
              Advanced
              <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: '#00226b' }}
            >
              <Crown className="h-4 w-4" />
              Upgrade to Pro
            </TabsTrigger>
          )}
        </TabsList>

        <TabsContent value="general" className="mt-6">
          <GeneralTab 
            contentSettings={settings.content}
            updateContentSettings={updateContentSettings}
          />
        </TabsContent>

        <TabsContent value="appearance" className="mt-6">
          <AppearanceTab 
            settings={settings.appearance}
            updateSettings={updateAppearanceSettings}
            behaviorSettings={settings.behavior}
            updateBehaviorSettings={updateBehaviorSettings}
            contentSettings={settings.content}
            categories={settings.categories}
          />
        </TabsContent>

        <TabsContent value="categories" className="mt-6">
          <CategoriesTab
            categories={settings.categories}
            addCategory={addCategory}
            updateCategory={updateCategory}
            removeCategory={removeCategory}
          />
        </TabsContent>

        <TabsContent value="behavior" className="mt-6">
          <BehaviorTab
            settings={settings.behavior}
            updateSettings={updateBehaviorSettings}
          />
        </TabsContent>

        {isPro && (
          <TabsContent value="integrations" className="mt-6">
            <IntegrationsTab 
              settings={settings.integrations}
              categories={settings.categories}
              updateSettings={updateIntegrationSettings}
            />
          </TabsContent>
        )}

        {isPro && (
          <TabsContent value="consent-logs" className="mt-6">
            <ConsentLogsTab 
              loggingSettings={settings.logging}
              updateLoggingSettings={updateLoggingSettings}
            />
          </TabsContent>
        )}

        {isPro && (
          <TabsContent value="advanced" className="mt-6">
            <AdvancedTab 
              geoSettings={settings.geo}
              updateGeoSettings={updateGeoSettings}
            />
          </TabsContent>
        )}

        {!isPro && (
          <TabsContent value="upgrade" className="mt-6">
            <UpgradeTab />
          </TabsContent>
        )}
      </Tabs>
    </FeatureHeader>
  )
}