import {useEffect, useState} from 'react';
import {useForm} from 'react-hook-form';
import {zodResolver} from '@hookform/resolvers/zod';
import {ProjectSchemas, SUPPORTED_LANGUAGES} from '@plunk/shared';
import {TrackingMode} from '@plunk/db';
import {
  Alert,
  AlertDescription,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectItemWithDescription,
  SelectTrigger,
  SelectValue,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@plunk/ui';
import {AnimatePresence, motion} from 'framer-motion';
import {NextSeo} from 'next-seo';
import {AlertTriangle, CreditCard, Database, Globe, Mail, Settings as SettingsIcon, Shield, Users} from 'lucide-react';
import type {z} from 'zod';
import {useRouter} from 'next/router';
import {DashboardLayout} from '../../components/DashboardLayout';
import {DomainsSettings} from '../../components/DomainsSettings';
import {BillingLimits} from '../../components/BillingLimits';
import {BillingConsumption} from '../../components/BillingConsumption';
import {BillingInvoices} from '../../components/BillingInvoices';
import {UnpaidInvoiceBanner} from '../../components/UnpaidInvoiceBanner';
import {ApiKeyDisplay} from '../../components/ApiKeyDisplay';
import {SmtpSettings} from '../../components/SmtpSettings';
import {DataManagementSettings} from '../../components/DataManagementSettings';
import {TeamSettings} from '../../components/TeamSettings';
import {SecuritySettings} from '../../components/SecuritySettings';
import {useActiveProject} from '../../lib/contexts/ActiveProjectProvider';
import {network} from '../../lib/network';
import {useProjects} from '../../lib/hooks/useProject';
import {useConfig} from '../../lib/hooks/useConfig';
import {useUser} from '../../lib/hooks/useUser';
import {useProjectSecurity} from '../../lib/hooks/useProjectSecurity';
import useSWR from 'swr';

type TabId = 'general' | 'billing' | 'domains' | 'smtp' | 'data' | 'team' | 'security';

interface Tab {
  id: TabId;
  label: string;
  icon: typeof SettingsIcon;
  condition?: boolean;
}

const buildTabs = (options: {billingEnabled: boolean; smtpEnabled: boolean}): Tab[] => {
  const {billingEnabled, smtpEnabled} = options;
  const allTabs: Tab[] = [
    {id: 'general', label: 'General', icon: SettingsIcon},
    {id: 'team', label: 'Team', icon: Users},
    {id: 'security', label: 'Security', icon: Shield},
    {id: 'billing', label: 'Billing', icon: CreditCard, condition: billingEnabled},
    {id: 'domains', label: 'Domains', icon: Globe},
    {id: 'smtp', label: 'SMTP', icon: Mail, condition: smtpEnabled},
    {id: 'data', label: 'Data', icon: Database},
  ];
  return allTabs.filter(tab => tab.condition !== false);
};

export default function Settings() {
  const router = useRouter();
  const {activeProject, setActiveProject, updateActiveProject} = useActiveProject();
  const {mutate: projectsMutate} = useProjects();
  const {data: config} = useConfig();
  const {data: user} = useUser();
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [showResetDialog, setShowResetDialog] = useState(false);
  const [deleteConfirmText, setDeleteConfirmText] = useState('');
  const [resetConfirmText, setResetConfirmText] = useState('');
  const [isLoadingBilling, setIsLoadingBilling] = useState(false);
  const [selectedCurrency, setSelectedCurrency] = useState<string>('auto');
  const [showCurrencySelector, setShowCurrencySelector] = useState(false);

  // Fetch current user's membership for the active project
  const {data: membershipData} = useSWR<{
    success: boolean;
    data: Array<{userId: string; email: string; role: 'OWNER' | 'ADMIN' | 'MEMBER'}>;
  }>(activeProject?.id ? `/projects/${activeProject.id}/members` : null, {revalidateOnFocus: false});

  const currentUserMembership = membershipData?.data.find(m => m.userId === user?.id);
  const currentUserRole = currentUserMembership?.role || 'MEMBER';

  const {securityMetrics, isLoading: isLoadingSecurityMetrics} = useProjectSecurity(activeProject?.id);

  const billingEnabled = config?.features.billing.enabled ?? false;
  const smtpEnabled = config?.features.smtp.enabled ?? false;
  const trackingToggleEnabled = config?.features.email.trackingToggleEnabled ?? false;
  const smtpConfig = smtpEnabled
    ? {
        enabled: true as const,
        domain: config?.features.smtp.domain ?? undefined,
        portSecure: config?.features.smtp.ports?.secure,
        portSubmission: config?.features.smtp.ports?.submission,
      }
    : {enabled: false as const};

  // Get current tab from URL or default to 'general'
  const currentTab = (router.query.tab as TabId) || 'general';

  // Set default tab in URL if none is present
  useEffect(() => {
    if (!router.query.tab && router.isReady) {
      router.replace('/settings?tab=general', undefined, {shallow: true});
    }
  }, [router]);

  // Handler to change tabs and update URL
  const handleTabChange = (newTab: string) => {
    router.push(`/settings?tab=${newTab}`, undefined, {shallow: true});
  };

  // Handle Stripe redirect success/cancel messages
  useEffect(() => {
    if (!router.isReady) return;

    if (router.query.success === 'true') {
      // Use setTimeout to defer state update, avoiding synchronous setState in effect
      const timer = setTimeout(() => {
        setSuccessMessage('Subscription activated successfully! It may take a moment to update.');
        // Clear message and URL after 5 seconds
        setTimeout(() => {
          setSuccessMessage(null);
          router.replace('/settings?tab=billing', undefined, {shallow: true});
        }, 5000);
      }, 0);
      return () => clearTimeout(timer);
    } else if (router.query.canceled === 'true') {
      // Use setTimeout to defer state update, avoiding synchronous setState in effect
      const timer = setTimeout(() => {
        setErrorMessage('Checkout was canceled. You can try again anytime.');
        // Clear message and URL after 5 seconds
        setTimeout(() => {
          setErrorMessage(null);
          router.replace('/settings?tab=billing', undefined, {shallow: true});
        }, 5000);
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [router]);

  const form = useForm<z.infer<typeof ProjectSchemas.update>>({
    resolver: zodResolver(ProjectSchemas.update),
    defaultValues: {
      name: activeProject?.name || '',
      tracking: activeProject?.tracking ?? TrackingMode.ENABLED,
      language: activeProject?.language || 'en',
    },
  });

  // Update form when active project changes
  useEffect(() => {
    if (activeProject) {
      form.reset({
        name: activeProject.name,
        tracking: activeProject.tracking ?? TrackingMode.ENABLED,
        language: activeProject.language || 'en',
      });
    }
  }, [activeProject, form]);

  const onSubmit = async (values: z.infer<typeof ProjectSchemas.update>) => {
    if (!activeProject) return;

    try {
      setErrorMessage(null);
      setSuccessMessage(null);

      const updatedProject = await network.fetch<typeof activeProject, typeof ProjectSchemas.update>(
        'PATCH',
        `/users/@me/projects/${activeProject.id}`,
        values,
      );

      // Update the active project in context without invalidating the full SWR cache
      updateActiveProject(updatedProject);

      // Refresh projects list
      await projectsMutate();

      setSuccessMessage('Project settings updated successfully');

      // Clear success message after 3 seconds
      setTimeout(() => setSuccessMessage(null), 3000);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to update project settings');
    }
  };

  const handleRegenerateKeys = async () => {
    if (!activeProject) return;

    try {
      setErrorMessage(null);
      setSuccessMessage(null);

      const updatedProject = await network.fetch<typeof activeProject>(
        'POST',
        `/users/@me/projects/${activeProject.id}/regenerate-keys`,
      );

      // Update the active project in context
      setActiveProject(updatedProject);

      // Refresh projects list
      await projectsMutate();

      setSuccessMessage('API keys regenerated successfully');
      setShowRegenerateDialog(false);

      // Clear success message after 3 seconds
      setTimeout(() => setSuccessMessage(null), 3000);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to regenerate API keys');
      setShowRegenerateDialog(false);
    }
  };

  const promptRegenerateKeys = () => {
    setShowRegenerateDialog(true);
  };

  const handleStartSubscription = async (currency: string = 'auto') => {
    if (!activeProject) return;
    if (!billingEnabled) {
      setErrorMessage('Billing is disabled on this instance.');
      return;
    }

    try {
      setIsLoadingBilling(true);
      setErrorMessage(null);

      // Build URL with optional currency parameter
      const url =
        currency === 'auto'
          ? `/users/@me/projects/${activeProject.id}/checkout`
          : `/users/@me/projects/${activeProject.id}/checkout?currency=${currency}`;

      const response = await network.fetch<{url: string}>('POST', url);

      // Redirect to Stripe checkout
      if (response.url) {
        window.location.href = response.url;
      }
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to start checkout');
      setIsLoadingBilling(false);
    }
  };

  const handleManageBilling = async () => {
    if (!activeProject) return;
    if (!billingEnabled) {
      setErrorMessage('Billing is disabled on this instance.');
      return;
    }

    try {
      setIsLoadingBilling(true);
      setErrorMessage(null);

      const response = await network.fetch<{url: string}>(
        'POST',
        `/users/@me/projects/${activeProject.id}/billing-portal`,
      );

      // Redirect to Stripe billing portal
      if (response.url) {
        window.location.href = response.url;
      }
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to open billing portal');
      setIsLoadingBilling(false);
    }
  };

  const handleResetProject = async () => {
    if (!activeProject || resetConfirmText !== 'RESET') return;

    try {
      setErrorMessage(null);
      setSuccessMessage(null);

      await network.fetch('POST', `/users/@me/projects/${activeProject.id}/reset`);

      setSuccessMessage('Project reset successfully. All data has been cleared.');
      setShowResetDialog(false);
      setResetConfirmText('');

      // Refresh the page to reload data
      setTimeout(() => {
        window.location.reload();
      }, 1500);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to reset project');
      setShowResetDialog(false);
      setResetConfirmText('');
    }
  };

  const handleDeleteProject = async () => {
    if (!activeProject || deleteConfirmText !== 'DELETE') return;

    try {
      setErrorMessage(null);
      setSuccessMessage(null);

      await network.fetch('DELETE', `/users/@me/projects/${activeProject.id}`);

      setSuccessMessage('Project deleted successfully. Redirecting...');
      setShowDeleteDialog(false);
      setDeleteConfirmText('');

      // Refresh projects list and redirect to dashboard
      await projectsMutate();

      // Redirect to dashboard after a short delay
      setTimeout(() => {
        window.location.href = '/';
      }, 1500);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Failed to delete project');
      setShowDeleteDialog(false);
      setDeleteConfirmText('');
    }
  };

  if (!activeProject) {
    return (
      <>
        <NextSeo title="Settings" />
        <DashboardLayout>
          <div className="flex items-center justify-center h-96">
            <p className="text-neutral-500">No project selected</p>
          </div>
        </DashboardLayout>
      </>
    );
  }

  return (
    <>
      <NextSeo title="Settings" />
      <DashboardLayout>
        <div className="space-y-8">
          {/* Header */}
          <div>
            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Settings</h1>
            <p className="text-neutral-500 mt-2">Manage your project settings and preferences</p>
          </div>

          {/* Tabs */}
          <Tabs value={currentTab} onValueChange={handleTabChange} className="max-w-4xl">
            <TabsList>
              {buildTabs({billingEnabled, smtpEnabled}).map(tab => {
                const Icon = tab.icon;
                return (
                  <TabsTrigger key={tab.id} value={tab.id} className="flex items-center gap-2" title={tab.label}>
                    <Icon className="h-4 w-4" />
                    <span className="hidden md:inline">{tab.label}</span>
                  </TabsTrigger>
                );
              })}
            </TabsList>

            {/* General Tab */}
            <TabsContent value="general">
              <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Project Settings</CardTitle>
                  <CardDescription>Update your project name and basic information</CardDescription>
                </CardHeader>
                <CardContent>
                  <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                      <FormField
                        control={form.control}
                        name="name"
                        render={({field}) => (
                          <FormItem>
                            <FormLabel>Project Name</FormLabel>
                            <FormControl>
                              <Input placeholder="My Awesome Project" {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      {/* Email Tracking Mode - only show if feature is available */}
                      {trackingToggleEnabled && (
                        <FormField
                          control={form.control}
                          name="tracking"
                          render={({field}) => (
                            <FormItem>
                              <FormLabel>Email Tracking</FormLabel>
                              <Select onValueChange={field.onChange} defaultValue={field.value}>
                                <FormControl>
                                  <SelectTrigger>
                                    <SelectValue placeholder="Select tracking mode" />
                                  </SelectTrigger>
                                </FormControl>
                                <SelectContent>
                                  <SelectItemWithDescription
                                    value={TrackingMode.ENABLED}
                                    title="Enabled"
                                    description="Track opens and clicks for all emails"
                                  />
                                  <SelectItemWithDescription
                                    value={TrackingMode.DISABLED}
                                    title="Disabled"
                                    description="No tracking for any emails"
                                  />
                                  <SelectItemWithDescription
                                    value={TrackingMode.MARKETING_ONLY}
                                    title="Marketing Only"
                                    description="Track only campaigns and workflow emails, not transactional"
                                  />
                                </SelectContent>
                              </Select>
                              <FormDescription>
                                Control how email opens and clicks are tracked for this project.
                              </FormDescription>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      )}

                      {/* Language Selection */}
                      <FormField
                        control={form.control}
                        name="language"
                        render={({field}) => (
                          <FormItem>
                            <FormLabel>Customer Language</FormLabel>
                            <Select onValueChange={field.onChange} defaultValue={field.value || 'en'}>
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue placeholder="Select language" />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                {SUPPORTED_LANGUAGES.map(lang => (
                                  <SelectItem key={lang.code} value={lang.code}>
                                    <div className="flex items-center gap-2">
                                      <span>{lang.flag}</span>
                                      <span>{lang.nativeName}</span>
                                      <span className="text-neutral-500 text-xs">({lang.name})</span>
                                    </div>
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            <FormDescription>
                              Language for customer-facing pages (unsubscribe, preferences) and email footers.
                            </FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      {/* Success/Error Messages */}
                      <AnimatePresence mode="wait">
                        {successMessage && (
                          <motion.div
                            initial={{opacity: 0, y: -10}}
                            animate={{opacity: 1, y: 0}}
                            exit={{opacity: 0}}
                            className="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-800"
                          >
                            {successMessage}
                          </motion.div>
                        )}
                        {errorMessage && (
                          <motion.div
                            initial={{opacity: 0, y: -10}}
                            animate={{opacity: 1, y: 0}}
                            exit={{opacity: 0}}
                            className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800"
                          >
                            {errorMessage}
                          </motion.div>
                        )}
                      </AnimatePresence>

                      <div className="flex justify-end">
                        <Button type="submit" disabled={form.formState.isSubmitting}>
                          {form.formState.isSubmitting ? 'Saving...' : 'Save Changes'}
                        </Button>
                      </div>
                    </form>
                  </Form>
                </CardContent>
              </Card>

              {/* API Keys - Separate Card */}
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>API Credentials</CardTitle>
                      <CardDescription>Use these keys to integrate with the Plunk API</CardDescription>
                    </div>
                    <Button type="button" variant="outline" size="sm" onClick={promptRegenerateKeys}>
                      Regenerate Keys
                    </Button>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <ApiKeyDisplay
                    label="Public API Key"
                    value={activeProject.public}
                    description="Use this key for client-side integrations"
                  />
                  <ApiKeyDisplay
                    label="Secret API Key"
                    value={activeProject.secret}
                    description="Keep this key secure and never expose it publicly"
                    isSecret
                  />
                </CardContent>
              </Card>

              {/* Danger Zone - Separate Card */}
              <Card className="border-red-200">
                <CardHeader className="border-b border-red-100 bg-red-50">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-white rounded-lg shadow-sm border border-red-200">
                      <AlertTriangle className="h-5 w-5 text-red-600" />
                    </div>
                    <div>
                      <CardTitle className="text-lg text-red-900">Danger Zone</CardTitle>
                      <CardDescription className="text-red-700">
                        Irreversible actions that affect your project data
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="p-0">
                  <div className="divide-y divide-neutral-100">
                    {/* Reset Project */}
                    <div className="flex items-start justify-between gap-4 px-6 py-5">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1.5">
                          <Database className="h-4 w-4 text-amber-700" />
                          <h4 className="font-semibold text-neutral-900">Reset Project Data</h4>
                        </div>
                        <p className="text-sm text-neutral-600 mb-3">
                          Clear all campaigns, contacts, workflows, templates, and events. This gives you a blank
                          project to start fresh.
                        </p>
                        <div className="flex items-start gap-2 text-xs text-neutral-500">
                          <span className="font-medium">Preserved:</span>
                          <span>API keys, domains, billing information</span>
                        </div>
                      </div>
                      <Button type="button" variant="outline" onClick={() => setShowResetDialog(true)} className="shrink-0">
                        Reset Data
                      </Button>
                    </div>

                    {/* Delete Project */}
                    <div className="flex items-start justify-between gap-4 px-6 py-5 bg-red-50/40">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1.5">
                          <AlertTriangle className="h-4 w-4 text-red-600" />
                          <h4 className="font-semibold text-red-900">Delete Project Permanently</h4>
                        </div>
                        <p className="text-sm text-red-800 mb-3">
                          Permanently delete this project and all associated data. This action{' '}
                          <strong>cannot be undone</strong>.
                          {activeProject?.subscription && ' Your subscription will be canceled.'}
                        </p>
                        <div className="flex items-center gap-2 text-xs">
                          <span className="px-2 py-1 bg-red-100 text-red-700 rounded font-medium">
                            Permanent Deletion
                          </span>
                          <span className="text-red-600">All data will be lost</span>
                        </div>
                      </div>
                      <Button
                        type="button"
                        variant="destructive"
                        onClick={() => setShowDeleteDialog(true)}
                        className="shrink-0"
                      >
                        Delete Project
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
              </div>
            </TabsContent>

            {/* Billing Tab */}
            <TabsContent value="billing">
              <div className="space-y-6">
                {/* Unpaid Invoice Banner */}
                <UnpaidInvoiceBanner projectId={activeProject.id} hasSubscription={!!activeProject.subscription} />

                <Card>
                  <CardHeader>
                    <CardTitle>Billing & Subscription</CardTitle>
                    <CardDescription>Manage your subscription and billing information</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-6">
                      {/* Success/Error Messages */}
                      <AnimatePresence mode="wait">
                        {successMessage && (
                          <motion.div
                            initial={{opacity: 0, y: -10}}
                            animate={{opacity: 1, y: 0}}
                            exit={{opacity: 0}}
                            className="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-800"
                          >
                            {successMessage}
                          </motion.div>
                        )}
                        {errorMessage && (
                          <motion.div
                            initial={{opacity: 0, y: -10}}
                            animate={{opacity: 1, y: 0}}
                            exit={{opacity: 0}}
                            className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800"
                          >
                            {errorMessage}
                          </motion.div>
                        )}
                      </AnimatePresence>

                      {activeProject.subscription ? (
                        // Has subscription - show billing portal button
                        <div className="space-y-4">
                          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                            <div className="flex items-center gap-2 text-green-800 mb-2">
                              <CreditCard className="h-5 w-5" />
                              <span className="font-medium">Active Subscription</span>
                            </div>
                            <p className="text-sm text-green-700">
                              Your subscription is active. Manage your billing details, update payment methods, or
                              cancel your subscription through the billing portal.
                            </p>
                          </div>

                          <div className="flex justify-start">
                            <Button onClick={handleManageBilling} disabled={isLoadingBilling}>
                              {isLoadingBilling ? 'Loading...' : 'Manage Billing'}
                            </Button>
                          </div>
                        </div>
                      ) : (
                        // No subscription - show start subscription button
                        <div className="space-y-4">
                          <div className="p-4 bg-neutral-50 border border-neutral-200 rounded-lg">
                            <div className="flex items-center gap-2 text-neutral-800 mb-2">
                              <CreditCard className="h-5 w-5" />
                              <span className="font-medium">No Active Subscription</span>
                            </div>
                            <p className="text-sm text-neutral-600">
                              Start a subscription and support the development of Plunk. You will be charged a one-time
                              onboarding fee which will be credited to your first invoice.
                            </p>
                          </div>

                          <div className="flex flex-col gap-2">
                            <div className="flex justify-start">
                              <Button
                                onClick={() => handleStartSubscription(selectedCurrency)}
                                disabled={isLoadingBilling}
                              >
                                {isLoadingBilling ? 'Loading...' : 'Start Subscription'}
                              </Button>
                            </div>

                            <div className="flex flex-col gap-2">
                              <button
                                type="button"
                                onClick={() => setShowCurrencySelector(!showCurrencySelector)}
                                className="text-xs text-neutral-500 hover:text-neutral-700 transition-colors w-fit"
                              >
                                {showCurrencySelector ? 'Hide currency options' : 'Select a different currency'}
                              </button>

                              <AnimatePresence>
                                {showCurrencySelector && (
                                  <motion.div
                                    initial={{opacity: 0, height: 0}}
                                    animate={{opacity: 1, height: 'auto'}}
                                    exit={{opacity: 0, height: 0}}
                                    transition={{duration: 0.2}}
                                    className="overflow-hidden"
                                  >
                                    <div className="flex items-center gap-3 pt-1">
                                      <label className="text-sm font-medium text-neutral-600">Currency:</label>
                                      <Select value={selectedCurrency} onValueChange={setSelectedCurrency}>
                                        <SelectTrigger className="w-[200px]">
                                          <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                          <SelectItem value="auto">Auto-detect</SelectItem>
                                          <SelectItem value="usd">USD ($) - US Dollar</SelectItem>
                                          <SelectItem value="eur">EUR (€) - Euro</SelectItem>
                                          <SelectItem value="gbp">GBP (£) - British Pound</SelectItem>
                                        </SelectContent>
                                      </Select>
                                    </div>
                                  </motion.div>
                                )}
                              </AnimatePresence>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>

                {/* Billing Limits */}
                <BillingLimits
                  projectId={activeProject.id}
                  hasSubscription={!!activeProject.subscription}
                  billingEnabled={billingEnabled}
                />

                {/* Current Month Consumption */}
                <BillingConsumption projectId={activeProject.id} hasSubscription={!!activeProject.subscription} />

                {/* Past Invoices */}
                <BillingInvoices
                  projectId={activeProject.id}
                  hasSubscription={!!activeProject.subscription}
                  onManageBilling={handleManageBilling}
                />
              </div>
            </TabsContent>

            {/* Team Tab */}
            <TabsContent value="team">
              <TeamSettings
                projectId={activeProject.id}
                currentUserRole={currentUserRole}
                currentUserId={user?.id || ''}
              />
            </TabsContent>

            {/* Security Tab */}
            <TabsContent value="security">
              {securityMetrics ? (
                <SecuritySettings metrics={securityMetrics} isLoading={isLoadingSecurityMetrics} />
              ) : (
                <Card>
                  <CardHeader>
                    <CardTitle>Security Overview</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-neutral-500">
                      {isLoadingSecurityMetrics ? 'Loading...' : 'Unable to load security metrics'}
                    </p>
                  </CardContent>
                </Card>
              )}
            </TabsContent>

            {/* Domains Tab */}
            <TabsContent value="domains">
              <DomainsSettings projectId={activeProject.id} />
            </TabsContent>

            {/* SMTP Tab */}
            <TabsContent value="smtp">
              <SmtpSettings smtpConfig={smtpConfig} />
            </TabsContent>

            {/* Data Management Tab */}
            <TabsContent value="data">
              <DataManagementSettings />
            </TabsContent>
          </Tabs>
        </div>

        {/* Regenerate Keys Confirmation Dialog */}
        <Dialog open={showRegenerateDialog} onOpenChange={setShowRegenerateDialog}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-amber-600" />
                Regenerate API Keys
              </DialogTitle>
              <DialogDescription className="space-y-3">
                <p>Are you sure you want to regenerate your API keys?</p>
                <Alert variant="warning">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertDescription>
                    Current keys will be <strong>immediately invalidated</strong>. Any integrations using the old keys
                    will stop working until updated.
                  </AlertDescription>
                </Alert>
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowRegenerateDialog(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={handleRegenerateKeys}>
                Regenerate Keys
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Reset Project Confirmation Dialog */}
        <Dialog open={showResetDialog} onOpenChange={setShowResetDialog}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader className="space-y-3">
              <div className="mx-auto w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
                <Database className="h-6 w-6 text-amber-700" />
              </div>
              <DialogTitle className="text-center text-xl">Reset Project Data?</DialogTitle>
              <DialogDescription className="text-center text-base">
                All your campaigns, contacts, workflows, and templates will be permanently deleted. Your API keys and
                settings will remain intact.
              </DialogDescription>
            </DialogHeader>

            <div className="py-4">
              <label className="text-sm font-medium text-neutral-700 block mb-2 text-center">
                Type{' '}
                <span className="font-mono font-semibold text-amber-700 bg-amber-50 px-2 py-0.5 rounded">RESET</span>{' '}
                to confirm
              </label>
              <Input
                value={resetConfirmText}
                onChange={e => setResetConfirmText(e.target.value)}
                placeholder="Type RESET here"
                className="text-center"
                autoFocus
              />
            </div>

            <DialogFooter className="flex-col-reverse gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setShowResetDialog(false);
                  setResetConfirmText('');
                }}
                className="w-full"
              >
                Cancel
              </Button>
              <Button
                variant="destructive"
                onClick={handleResetProject}
                disabled={resetConfirmText !== 'RESET'}
                className="w-full"
              >
                Reset Data
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Delete Project Confirmation Dialog */}
        <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader className="space-y-3">
              <div className="mx-auto w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                <AlertTriangle className="h-6 w-6 text-red-600" />
              </div>
              <DialogTitle className="text-center text-xl">Delete Project Permanently?</DialogTitle>
              <DialogDescription className="text-center text-base space-y-2">
                <p>
                  This will <strong className="text-red-600">permanently delete</strong> your entire project and all
                  data. This action cannot be undone.
                </p>
                {activeProject?.subscription && (
                  <p className="text-sm text-red-700 bg-red-50 rounded p-2 border border-red-200">
                    Your active subscription will be canceled
                  </p>
                )}
              </DialogDescription>
            </DialogHeader>

            <div className="py-4">
              <label className="text-sm font-medium text-neutral-700 block mb-2 text-center">
                Type <span className="font-mono font-semibold text-red-600 bg-red-50 px-2 py-0.5 rounded">DELETE</span>{' '}
                to confirm
              </label>
              <Input
                value={deleteConfirmText}
                onChange={e => setDeleteConfirmText(e.target.value)}
                placeholder="Type DELETE here"
                className="text-center"
                autoFocus
              />
            </div>

            <DialogFooter className="flex-col-reverse gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setShowDeleteDialog(false);
                  setDeleteConfirmText('');
                }}
                className="w-full"
              >
                Cancel
              </Button>
              <Button
                variant="destructive"
                onClick={handleDeleteProject}
                disabled={deleteConfirmText !== 'DELETE'}
                className="w-full"
              >
                Delete Forever
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </DashboardLayout>
    </>
  );
}