import { Shield, Loader2, Settings, Crown, BarChart3 } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "sonner"
import { FeatureHeader } from "@/components/feature-header"
import { usePro } from "@/contexts/pro-context"
import { ProIndicator } from "@/components/pro/pro-indicator"
import { useRecaptchaSettings } from "../hooks/use-recaptcha-settings"
import { GeneralTab } from "./tabs/general-tab"
import { SettingsTab } from "./tabs/settings-tab"
import { AnalyticsTab } from "./tabs/analytics-tab"
import { RecaptchaUpgradeTab } from "./tabs/upgrade-tab"

// Documentation URL for reCAPTCHA feature
const RECAPTCHA_DOCS_URL = "https://www.swiftcommerce.io/help/spam/recaptcha/"

export function RecaptchaSettings() {
  const { isPro } = usePro()
  const {
    settings,
    isSaving,
    isLoading,
    hasChanges,
    updateSettings,
    toggleLocation,
    toggleBypassRole,
    setProvider,
    setVersion,
    setV2Mode,
    setV3Display,
    saveSettings,
    resetToDefaults,
  } = useRecaptchaSettings()

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

  const handleReset = () => {
    resetToDefaults()
    toast.success("Settings reset", {
      description: "All settings have been reset to their defaults. Don't forget to save."
    })
  }

  if (isLoading) {
    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={<Shield className="h-6 w-6" />}
      title="reCAPTCHA Settings"
      description="Protect your site from bots and spam attacks with Google reCAPTCHA"
      documentationUrl={RECAPTCHA_DOCS_URL}
      enabled={settings.enabled}
      onEnabledChange={(checked) => updateSettings('enabled', checked)}
      hasChanges={hasChanges}
      isSaving={isSaving}
      onSave={handleSave}
      onReset={handleReset}
      resetConfirmMessage="This will reset all reCAPTCHA settings to their default values. Your API keys will be cleared and you'll need to re-enter them."
    >
      {/* Content Area */}
      <div className="flex flex-col gap-6">
        {/* Settings Tabs */}
        <Tabs defaultValue="general" className="w-full">
          <TabsList>
            <TabsTrigger value="general" className="gap-2">
              <Settings className="h-4 w-4" />
              General
            </TabsTrigger>
            <TabsTrigger value="settings" className="gap-2">
              <Settings className="h-4 w-4" />
              Settings
            </TabsTrigger>
            {isPro && (
              <TabsTrigger value="analytics" className="gap-2">
                <BarChart3 className="h-4 w-4" />
                Analytics
                <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" />
                Upgrade to Pro
              </TabsTrigger>
            )}
          </TabsList>

          <TabsContent value="general" className="mt-6">
            <GeneralTab 
              settings={settings}
              updateSettings={updateSettings}
              setProvider={setProvider}
              setVersion={setVersion}
              setV2Mode={setV2Mode}
              setV3Display={setV3Display}
              isPro={isPro}
            />
          </TabsContent>

          <TabsContent value="settings" className="mt-6">
            <SettingsTab
              settings={settings}
              toggleLocation={toggleLocation}
              toggleBypassRole={toggleBypassRole}
              updateSettings={updateSettings}
            />
          </TabsContent>

          {isPro && (
            <TabsContent value="analytics" className="mt-6">
              <AnalyticsTab />
            </TabsContent>
          )}

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

      </div>
    </FeatureHeader>
  )
}