import { useEffect, useState } from 'react'
import { Users, Crown, Loader2 } from 'lucide-react'
import { FeatureHeader } from '@/components/feature-header'
import { FeatureTabs, FeatureTabsNavigation, FeatureTabsTrigger, FeatureTabsContent, FeatureSubTabsList, FeatureSubTabsTrigger, FEATURE_TABS_SURFACE_CLASSNAME } from '@/components/ui/feature-tabs'
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { ReportError } from '@/components/ui/reporting'
import { FeatureUpgradeTab } from '@/components/pro/feature-upgrade-tab'
import { usePro } from '@/contexts/pro-context'
import { useNavigation } from '@/contexts/navigation-context'
import { settingsSaved, toast } from '@/components/ui/toast'
import { EditorTab } from '@/features/customization/registration-form/components/tabs/editor-tab'
import { SettingsTab as FormSettings } from '@/features/customization/registration-form/components/tabs/settings-tab'
import { EmailsTab as WelcomeEmail } from '@/features/customization/registration-form/components/tabs/emails-tab'
import { SettingsTab as AccessSettings } from '@/features/spam/email-verification/components/tabs/settings-tab'
import { AdvancedTab } from '@/features/spam/email-verification/components/tabs/advanced-tab'
import { VerificationEmailTab } from '@/features/spam/email-verification/components/tabs/verification-email-tab'
import { CustomizationTab as ApprovalEmails } from '@/features/spam/email-verification/components/tabs/customization-tab'
import { RegistrationReview } from './registration-review'
import { useRegistrationAccess } from './use-registration-access'
import { DomainRestrictions } from './domain-restrictions'

export function RegistrationAccessSettings() {
  const state = useRegistrationAccess()
  const { isPro } = usePro()
  const { currentPage, currentTab, navigateTo } = useNavigation()
  const [formTab, setFormTab] = useState('fields')
  const reviewAvailable = isPro && state.providers.review === true
  const tabs = ['overview', 'forms', 'access', ...(reviewAvailable ? ['registrations'] : []), 'emails', ...(reviewAvailable ? ['activity'] : []), ...(!isPro ? ['upgrade'] : [])]
  // Old deep links remain usable; ordinary visits/tab changes still create history.
  const legacy = currentPage === 'customization/registration-form'
    ? ({ editor: 'forms', settings: 'forms', emails: 'emails', upgrade: 'upgrade' } as Record<string, string>)[currentTab || 'editor']
    : currentPage === 'spam/email-verification'
      ? ({ settings: 'access', advanced: 'access', customization: 'emails', 'pending-users': 'registrations', emails: 'emails', upgrade: 'upgrade' } as Record<string, string>)[currentTab || 'settings']
      : undefined
  const requested = currentTab?.startsWith('registrations/') ? 'registrations' : legacy || currentTab || ''
  const active = tabs.includes(requested) ? requested : 'overview'
  const go = (tab: string) => navigateTo('customers/registration-access', tab)
  useEffect(() => {
    document.title = 'Registration & Access · Swift Commerce'
    return () => { document.title = 'Swift Commerce Dashboard' }
  }, [])
  useEffect(() => {
    const warn = (event: BeforeUnloadEvent) => { if (state.hasChanges) { event.preventDefault(); event.returnValue = '' } }
    const leaving = (event: Event) => {
      const page = (event as CustomEvent<{ page: string }>).detail.page
      if (state.hasChanges && !['customers/registration-access', 'customization/registration-form', 'spam/email-verification'].includes(page) && !window.confirm('Leave Registration & Access and discard unsaved changes?')) event.preventDefault()
    }
    window.addEventListener('beforeunload', warn)
    window.addEventListener('swift-commerce:navigate', leaving)
    return () => { window.removeEventListener('beforeunload', warn); window.removeEventListener('swift-commerce:navigate', leaving) }
  }, [state.hasChanges])
  if (state.loading) return <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground" role="status"><Loader2 className="size-4 animate-spin" />Loading registration settings…</div>
  if (!state.canEdit && !state.hasChanges && state.error) return <section className="p-6"><ReportError message={state.error} onRetry={state.retry} /></section>
  const forms = state.forms.settings, access = state.access.settings
  const formProps = { settings: forms, fields: state.forms.fields, onUpdateSettings: state.updateForms, accessState: access }
  const accessProps = { settings: access, updateSettings: state.updateAccess, registrationFormState: forms }
  const save = async () => { if (await state.save()) settingsSaved(); else toast.error('Not all changes were saved. Review the message below.') }
  return <FeatureHeader icon={<Users className="size-6" />} title="Registration & Access" description="Customize registration forms, verify email addresses and review new accounts."
    documentationUrl="https://www.swiftcommerce.io/help/customization/registration-forms/" enabled hideEnabledSwitch hasProFeatures={false}
    onEnabledChange={() => {}} hasChanges={state.hasChanges && state.canEdit} isSaving={state.saving} onSave={save} onReset={state.discard}
    resetButtonText="Discard changes" resetConfirmMessage="Discard unsaved Forms and Access changes? Saved fields, account decisions, emails and shared branding will not be reset."
    hideSettingsActions={['registrations', 'activity', 'upgrade'].includes(active)} contentClassName={FEATURE_TABS_SURFACE_CLASSNAME} contentInnerClassName="p-0" headerClassName="border-b-0">
    {state.error && <div className="m-6 space-y-3" role="alert"><p className="text-sm text-destructive">{state.error}</p><div className="flex flex-wrap gap-2"><Button variant="outline" size="sm" onClick={state.clearSaveError}>Keep changes and retry</Button><Button variant="outline" size="sm" onClick={() => { if (window.confirm('Reload saved settings and discard unsaved changes?')) void state.retry() }}>Reload saved settings</Button></div></div>}
    <FeatureTabs value={active} onValueChange={go}>
      <FeatureTabsNavigation activeValue={active} aria-label="Registration & Access sections">
        {tabs.map(tab => <FeatureTabsTrigger key={tab} value={tab} className={tab === 'upgrade' ? 'text-white hover:text-white data-[state=active]:text-white' : undefined} style={tab === 'upgrade' ? { backgroundColor: '#002269' } : undefined}>
          {tab === 'upgrade' && <Crown className="size-4" />}{({ overview: 'Overview', forms: 'Forms', access: 'Access', registrations: 'Registrations', emails: 'Emails', activity: 'Activity', upgrade: 'Upgrade to Pro' } as Record<string, string>)[tab]}
          {((tab === 'forms' && state.dirtyForms) || (tab === 'access' && state.dirtyAccess)) && <span className="size-1.5 rounded-full bg-current" aria-label="Unsaved changes" />}
        </FeatureTabsTrigger>)}
      </FeatureTabsNavigation>
      <FeatureTabsContent value="overview"><Card className="max-w-4xl shadow-none"><CardHeader><CardTitle>Current setup</CardTitle><CardDescription>Custom fields and access checks can be used independently. Changes take effect after saving.</CardDescription></CardHeader><CardContent className="space-y-5">
        {isPro && !reviewAvailable && <p role="status" className="rounded-md border p-3 text-sm">The registration review provider is unavailable. Update both Free and Pro together before using the new review workspace. Existing account restrictions are retained.</p>}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b pb-4"><div><p className="font-medium">Registration fields</p><p className="text-sm text-muted-foreground">{forms.enabled ? 'Custom fields enabled' : 'Default registration fields'}</p></div><Button variant="outline" size="sm" onClick={() => go('forms')}>Configure forms</Button></div>
        <div className="flex flex-wrap items-center justify-between gap-3"><div><p className="font-medium">Account access</p><p className="text-sm text-muted-foreground">{!access.enabled ? 'No additional access check' : access.verificationMode === 'admin_approval' ? 'Administrator approval' : 'Email verification'}</p></div><Button variant="outline" size="sm" onClick={() => go('access')}>Configure access</Button></div>
        <p className="text-sm text-muted-foreground">{state.hasChanges ? 'This summary includes unsaved changes.' : 'Showing saved configuration.'} Disabling form customization does not disable account access checks.</p>
        {reviewAvailable && <Button variant="link" className="h-auto p-0" onClick={() => go('registrations')}>Review tracked registrations</Button>}
      </CardContent></Card></FeatureTabsContent>
      <FeatureTabsContent value="forms"><div className="max-w-4xl space-y-6">
        <Tabs value={formTab} onValueChange={setFormTab}><FeatureSubTabsList aria-label="Registration form settings"><FeatureSubTabsTrigger value="fields">Fields</FeatureSubTabsTrigger><FeatureSubTabsTrigger value="appearance">Appearance</FeatureSubTabsTrigger></FeatureSubTabsList>
          <TabsContent value="fields" className="space-y-6 p-0 pt-6 sm:p-0 sm:pt-6">
            <div className="flex items-center justify-between gap-4"><Label htmlFor="registration-access-forms-enabled">Customize registration fields</Label><Switch id="registration-access-forms-enabled" checked={forms.enabled} onCheckedChange={enabled => state.updateForms({ enabled })} /></div>
            <FormSettings {...formProps} section="locations" />
            <EditorTab fields={state.forms.fields} onAddField={state.addField} onUpdateField={state.updateField} onDeleteField={state.deleteField} onDuplicateField={state.duplicateField} onToggleFieldEnabled={id => { const field = state.forms.fields.find(item => item.id === id); if (field) state.updateField(id, { enabled: !field.enabled }) }} onReorderFields={state.reorderFields} />
          </TabsContent>
          <TabsContent value="appearance" className="p-0 pt-6 sm:p-0 sm:pt-6"><FormSettings {...formProps} section="appearance" /></TabsContent>
        </Tabs>
      </div></FeatureTabsContent>
      <FeatureTabsContent value="access"><div className="max-w-4xl space-y-6">
        {isPro && state.providers.domainRestrictions === true && <DomainRestrictions {...accessProps} />}
        <div className="flex items-center justify-between gap-4"><div><Label htmlFor="registration-access-check-enabled">Require an access check</Label><p className="text-sm text-muted-foreground">{access.enabled ? 'New registrations at selected locations must complete the check.' : 'Swift Commerce adds no access check for new registrations.'} Existing review decisions are retained.</p></div><Switch id="registration-access-check-enabled" checked={access.enabled} onCheckedChange={value => state.updateAccess('enabled', value)} /></div>
        {isPro && <AdvancedTab {...accessProps} />}
        <AccessSettings {...accessProps} toggleRole={role => state.updateAccess('skipRoles', access.skipRoles.includes(role) ? access.skipRoles.filter(item => item !== role) : [...access.skipRoles, role])} />
        {isPro && <FormSettings {...formProps} section="access" />}
      </div></FeatureTabsContent>
      <FeatureTabsContent value="emails"><div className="max-w-4xl space-y-6"><VerificationEmailTab {...accessProps} />{isPro && access.verificationMode === 'admin_approval' && <ApprovalEmails {...accessProps} />}{isPro && <WelcomeEmail settings={forms} onUpdateSettings={state.updateForms} />}</div></FeatureTabsContent>
      {reviewAvailable && <FeatureTabsContent value="registrations"><RegistrationReview blocked={state.hasChanges} /></FeatureTabsContent>}
      {reviewAvailable && <FeatureTabsContent value="activity"><RegistrationReview activity blocked={state.hasChanges} /></FeatureTabsContent>}
      {!isPro && <FeatureTabsContent value="upgrade"><FeatureUpgradeTab headline="Review registrations with more context" description="Add manual approval, premium registration controls and a review history in Swift Commerce Pro." features={[{ icon: Users, title: 'Review applications', description: 'Inspect submitted registration fields before making an account decision.' }]} checklist={['Manual approval', 'Registration notes and activity', 'Additional form contexts', 'Registration email customization']} /></FeatureTabsContent>}
    </FeatureTabs>
  </FeatureHeader>
}