/**
 * Registration Form Editor Main Settings Page
 */

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  UserPlus, 
  Settings, 
  Loader2,
  AlertCircle,
  FormInput,
  Mail,
} from "lucide-react"
import { toast } from "sonner"
import { useRegistrationForm } from "../hooks/use-registration-form"
import { EditorTab } from "./tabs/editor-tab"
import { SettingsTab } from "./tabs/settings-tab"
import { EmailsTab } from "./tabs/emails-tab"
import { RegistrationFormUpgradeTab } from "./tabs/upgrade-tab"
import { FeatureHeader } from "@/components/feature-header"
import { Crown } from "lucide-react"
import { usePro } from "@/contexts/pro-context"

export function RegistrationFormSettings() {
  const { isPro } = usePro()
  const {
    settings,
    fields,
    isLoading,
    isSaving,
    error,
    hasChanges,
    updateSettings,
    addField,
    updateField,
    deleteField,
    duplicateField,
    toggleFieldEnabled,
    reorderFields,
    saveSettings,
    resetToDefaults,
  } = useRegistrationForm()

  if (isLoading) {
    return (
      <div className="flex flex-1 items-center justify-center p-8">
        <div className="flex items-center gap-2 text-muted-foreground">
          <Loader2 className="h-5 w-5 animate-spin" />
          <span>Loading registration form editor...</span>
        </div>
      </div>
    )
  }

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

  const handleReset = async () => {
    const success = await resetToDefaults()
    if (success) {
      toast.success("Settings reset", {
        description: "Registration form settings have been reset to defaults."
      })
    } else {
      toast.error("Failed to reset settings", {
        description: "Please try again or check your connection."
      })
    }
  }

  return (
    <FeatureHeader
      icon={<UserPlus className="h-6 w-6" />}
      title="Registration Form"
      description="Customize WordPress and WooCommerce registration forms with custom fields."
      documentationUrl="https://www.swiftcommerce.io/help/customization/registration-forms/"
      enabled={settings.enabled}
      onEnabledChange={(enabled) => updateSettings({ enabled })}
      hasChanges={hasChanges}
      isSaving={isSaving}
      onSave={handleSave}
      onReset={handleReset}
    >
      {/* Error Alert */}
      {error && (
        <div className="flex items-center gap-2 p-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg">
          <AlertCircle className="h-4 w-4" />
          {error}
        </div>
      )}

      {/* Tabs */}
      <Tabs defaultValue="editor" className="flex-1">
        <TabsList>
          <TabsTrigger value="editor" className="flex items-center gap-2">
            <FormInput className="h-4 w-4" />
            Field Editor
          </TabsTrigger>
          <TabsTrigger value="settings" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            Settings
          </TabsTrigger>
          <TabsTrigger value="emails" className="flex items-center gap-2">
            <Mail className="h-4 w-4" />
            Emails
          </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="editor" className="mt-4">
          <EditorTab
            fields={fields}
            onAddField={addField}
            onUpdateField={updateField}
            onDeleteField={deleteField}
            onDuplicateField={duplicateField}
            onToggleFieldEnabled={toggleFieldEnabled}
            onReorderFields={reorderFields}
          />
        </TabsContent>

        <TabsContent value="settings" className="mt-4">
          <SettingsTab
            settings={settings}
            onUpdateSettings={updateSettings}
            fields={fields}
          />
        </TabsContent>

        <TabsContent value="emails" className="mt-4">
          <EmailsTab
            settings={settings}
            onUpdateSettings={updateSettings}
          />
        </TabsContent>

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