/**
 * Shipment Tracking Settings Component
 */

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Loader2, Truck, Settings, Mail, Paintbrush, BarChart3, Crown } from "lucide-react"
import { toast } from "sonner"
import { useTrackingSettings } from "../hooks/use-shipment-tracking"
import { GeneralTab } from "./tabs/general-tab"
import { EmailTab } from "./tabs/email-tab"
import { AppearanceTab } from "./tabs/appearance-tab"
import { AnalyticsTab } from "./tabs/analytics-tab"
import { ShipmentTrackingUpgradeTab } from "./tabs/upgrade-tab"
import { FeatureHeader } from "@/components/feature-header"
import { usePro } from "@/contexts/pro-context"
import { ProIndicator } from "@/components/pro/pro-indicator"

export function ShipmentTrackingSettings() {
  const { settings, carriers, isLoading, isSaving, error, hasChanges, saveSettings, updateSetting, resetToDefaults } = useTrackingSettings()
  const [activeTab, setActiveTab] = useState('general')
  const { isPro } = usePro()

  const handleSave = async () => {
    const success = await saveSettings(settings)
    if (success) {
      toast.success('Settings saved successfully')
    } else {
      toast.error('Failed to save settings')
    }
  }

  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 (error) {
    return (
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="text-center py-12 text-destructive">
          {error}
        </div>
      </div>
    )
  }

  return (
    <FeatureHeader
      icon={<Truck className="h-6 w-6" />}
      title="Shipment Tracking"
      description="Add tracking information to orders and let customers track their shipments."
      documentationUrl="https://www.swiftcommerce.io/help/shipping/shipment-tracking/"
      enabled={settings.enabled}
      onEnabledChange={(enabled) => updateSetting('enabled', enabled)}
      hasChanges={hasChanges}
      isSaving={isSaving}
      onSave={handleSave}
      onReset={resetToDefaults}
    >
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid w-full grid-cols-4 lg:w-auto lg:inline-grid">
          <TabsTrigger value="general" className="gap-2">
            <Settings className="h-4 w-4" />
            <span className="hidden sm:inline">General</span>
          </TabsTrigger>
          <TabsTrigger value="email" className="gap-2">
            <Mail className="h-4 w-4" />
            <span className="hidden sm:inline">Email</span>
          </TabsTrigger>
          <TabsTrigger value="form" className="gap-2">
            <Paintbrush className="h-4 w-4" />
            <span className="hidden sm:inline">Appearance</span>
          </TabsTrigger>
          {isPro && (
            <TabsTrigger value="analytics" className="gap-2">
              <BarChart3 className="h-4 w-4" />
              <span className="hidden sm:inline">Analytics</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: '#00226b' }}
            >
              <Crown className="h-4 w-4" />
              <span className="hidden sm:inline">Upgrade to Pro</span>
            </TabsTrigger>
          )}
        </TabsList>

        <TabsContent value="general" className="space-y-4">
          <GeneralTab 
            settings={settings}
            carriers={carriers}
            updateSetting={updateSetting}
          />
        </TabsContent>

        <TabsContent value="email" className="space-y-4">
          <EmailTab 
            settings={settings}
            updateSetting={updateSetting}
          />
        </TabsContent>

        <TabsContent value="form" className="space-y-4">
          <AppearanceTab 
            settings={settings}
            updateSetting={updateSetting}
          />
        </TabsContent>

        {isPro && (
          <TabsContent value="analytics" className="space-y-4">
            <AnalyticsTab />
          </TabsContent>
        )}

        {!isPro && (
          <TabsContent value="upgrade" className="space-y-4">
            <ShipmentTrackingUpgradeTab />
          </TabsContent>
        )}
      </Tabs>
    </FeatureHeader>
  )
}