import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { useAdminSettings } from '@/hooks/useAdminSettings';
import { NovuMigrationUtility } from '@/components/admin/NovuMigrationUtility';
import { TestDataGenerator } from '@/components/admin/TestDataGenerator';
import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plug, AlertTriangle, Lock } from 'lucide-react';

export default function AdminSettings() {
  const { user } = useAuth();
  const { isSuperuser, loading: roleLoading } = useUserRole();
  const { 
    settings, 
    isLoading, 
    error, 
    updateSetting, 
    isUpdating,
    getSettingsByCategory,
    getCaptchaBypassEnabled
  } = useAdminSettings();

  if (roleLoading || isLoading) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center min-h-[400px]">
          <Loader2 className="w-8 h-8 animate-spin" />
        </div>
      </AdminLayout>
    );
  }

  if (!user || !isSuperuser()) {
    return (
      <AdminLayout>
        <div className="text-center space-y-4">
          <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
          <p className="text-muted-foreground">You don't have permission to access admin settings.</p>
          {error && (
            <div className="text-sm text-red-500 p-4 bg-red-50 rounded-md">
              Error details: {error.message}
            </div>
          )}
        </div>
      </AdminLayout>
    );
  }

  if (!settings || settings.length === 0) {
    return (
      <AdminLayout>
        <div className="text-center space-y-4">
          <h1 className="text-2xl font-bold mb-4">No Settings Found</h1>
          <p className="text-muted-foreground">
            No admin settings have been configured yet. Please contact your system administrator.
          </p>
          {error && (
            <div className="text-sm text-red-500 p-4 bg-red-50 rounded-md">
              Error details: {error.message}
            </div>
          )}
        </div>
      </AdminLayout>
    );
  }

  const SettingInput = ({ setting }: { setting: any }) => {
    const [localValue, setLocalValue] = useState(setting.setting_value);

    const handleSubmit = async () => {
      await updateSetting(setting.setting_key, localValue);
    };

    // Auto-flagging threshold settings
    if (setting.setting_key === 'moderation.auto_flag_threshold') {
      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Shield className="w-4 h-4 text-orange-500" />
              <Label className="text-base font-medium">Auto-Flag Content Threshold</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              Content will be automatically flagged for review after receiving this many reports
            </p>
            <div className="flex items-center gap-4">
              <Select value={localValue?.toString()} onValueChange={(value) => {
                const numValue = parseInt(value);
                setLocalValue(numValue);
                updateSetting(setting.setting_key, numValue);
              }}>
                <SelectTrigger className="w-32">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 report</SelectItem>
                  <SelectItem value="2">2 reports</SelectItem>
                  <SelectItem value="3">3 reports</SelectItem>
                  <SelectItem value="5">5 reports</SelectItem>
                  <SelectItem value="10">10 reports</SelectItem>
                </SelectContent>
              </Select>
              <Badge variant="outline">Current: {localValue} reports</Badge>
            </div>
          </div>
        </Card>
      );
    }

    // Review retention settings
    if (setting.setting_key === 'moderation.review_retention_days') {
      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-blue-500" />
              <Label className="text-base font-medium">Review Data Retention</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              How long to keep moderated content data before automatic cleanup
            </p>
            <div className="flex items-center gap-4">
              <Select value={localValue?.toString()} onValueChange={(value) => {
                const numValue = parseInt(value);
                setLocalValue(numValue);
                updateSetting(setting.setting_key, numValue);
              }}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="30">30 days</SelectItem>
                  <SelectItem value="60">60 days</SelectItem>
                  <SelectItem value="90">90 days</SelectItem>
                  <SelectItem value="180">6 months</SelectItem>
                  <SelectItem value="365">1 year</SelectItem>
                  <SelectItem value="730">2 years</SelectItem>
                </SelectContent>
              </Select>
              <Badge variant="outline">Current: {localValue} days</Badge>
            </div>
          </div>
        </Card>
      );
    }

    // Ban duration settings
    if (setting.setting_key === 'moderation.ban_durations') {
      const [banDurations, setBanDurations] = useState<{[key: string]: number}>(
        typeof localValue === 'object' ? localValue : { temporary: 7, extended: 30, permanent: 0 }
      );

      const updateBanDuration = (type: string, days: number) => {
        const updated = { ...banDurations, [type]: days };
        setBanDurations(updated);
        setLocalValue(updated);
      };

      const saveBanDurations = () => {
        updateSetting(setting.setting_key, banDurations);
      };

      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Users className="w-4 h-4 text-red-500" />
              <Label className="text-base font-medium">User Ban Duration Options</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              Configure the available ban duration options for moderators
            </p>
            
            <div className="grid gap-4">
              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <Label className="font-medium">Temporary Ban</Label>
                  <p className="text-sm text-muted-foreground">Short-term restriction for minor violations</p>
                </div>
                <div className="flex items-center gap-2">
                  <Select 
                    value={banDurations.temporary?.toString()} 
                    onValueChange={(value) => updateBanDuration('temporary', parseInt(value))}
                  >
                    <SelectTrigger className="w-32">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1">1 day</SelectItem>
                      <SelectItem value="3">3 days</SelectItem>
                      <SelectItem value="7">7 days</SelectItem>
                      <SelectItem value="14">14 days</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <Label className="font-medium">Extended Ban</Label>
                  <p className="text-sm text-muted-foreground">Longer restriction for serious violations</p>
                </div>
                <div className="flex items-center gap-2">
                  <Select 
                    value={banDurations.extended?.toString()} 
                    onValueChange={(value) => updateBanDuration('extended', parseInt(value))}
                  >
                    <SelectTrigger className="w-32">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="30">30 days</SelectItem>
                      <SelectItem value="60">60 days</SelectItem>
                      <SelectItem value="90">90 days</SelectItem>
                      <SelectItem value="180">6 months</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <Label className="font-medium">Permanent Ban</Label>
                  <p className="text-sm text-muted-foreground">Indefinite restriction for severe violations</p>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant="destructive">Permanent</Badge>
                </div>
              </div>
            </div>

            <Button onClick={saveBanDurations} disabled={isUpdating} className="w-full">
              <Save className="w-4 h-4 mr-2" />
              Save Ban Duration Settings
            </Button>
          </div>
        </Card>
      );
    }

    // Admin panel refresh mode setting
    if (setting.setting_key === 'system.admin_panel_refresh_mode') {
      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Settings className="w-4 h-4 text-blue-500" />
              <Label className="text-base font-medium">Admin Panel Refresh Mode</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              Choose how the admin panel statistics refresh
            </p>
            <div className="flex items-center gap-4">
              <Select 
                value={typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue} 
                onValueChange={(value) => {
                  setLocalValue(value);
                  updateSetting(setting.setting_key, JSON.stringify(value));
                }}
              >
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="manual">Manual Only</SelectItem>
                  <SelectItem value="auto">Auto-refresh</SelectItem>
                </SelectContent>
              </Select>
              <Badge variant="outline">
                Current: {(typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue) === 'auto' ? 'Auto-refresh' : 'Manual'}
              </Badge>
            </div>
          </div>
        </Card>
      );
    }

    // Admin panel poll interval setting
    if (setting.setting_key === 'system.admin_panel_poll_interval') {
      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-green-500" />
              <Label className="text-base font-medium">Auto-refresh Interval</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              How often to automatically refresh admin panel statistics (when auto-refresh is enabled)
            </p>
            <div className="flex items-center gap-4">
              <Select value={localValue?.toString()} onValueChange={(value) => {
                const numValue = parseInt(value);
                setLocalValue(numValue);
                updateSetting(setting.setting_key, numValue);
              }}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10 seconds</SelectItem>
                  <SelectItem value="30">30 seconds</SelectItem>
                  <SelectItem value="60">1 minute</SelectItem>
                  <SelectItem value="120">2 minutes</SelectItem>
                  <SelectItem value="300">5 minutes</SelectItem>
                </SelectContent>
              </Select>
              <Badge variant="outline">Current: {localValue}s</Badge>
            </div>
          </div>
        </Card>
      );
    }

    // Boolean/switch settings
    if (setting.setting_key.includes('email_alerts') || 
        setting.setting_key.includes('require_approval') || 
        setting.setting_key.includes('auto_cleanup') ||
        setting.setting_key.includes('enable_') ||
        setting.setting_key.includes('allow_')) {
      
      const getSettingIcon = () => {
        if (setting.setting_key.includes('email_alerts')) return <Bell className="w-4 h-4 text-blue-500" />;
        if (setting.setting_key.includes('require_approval')) return <Shield className="w-4 h-4 text-orange-500" />;
        if (setting.setting_key.includes('auto_cleanup')) return <Trash2 className="w-4 h-4 text-green-500" />;
        return <Settings className="w-4 h-4 text-gray-500" />;
      };

      return (
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                {getSettingIcon()}
                <Label className="text-base font-medium">{setting.description}</Label>
              </div>
              <p className="text-sm text-muted-foreground">
                {setting.setting_key.includes('email_alerts') && "Receive email notifications for this event"}
                {setting.setting_key.includes('require_approval') && "Items must be manually approved before being published"}
                {setting.setting_key.includes('auto_cleanup') && "Automatically remove old or rejected content"}
                {(!setting.setting_key.includes('email_alerts') && !setting.setting_key.includes('require_approval') && !setting.setting_key.includes('auto_cleanup')) && "Toggle this feature on or off"}
              </p>
            </div>
            <div className="flex items-center gap-3">
              <Badge variant={localValue ? "default" : "secondary"}>
                {localValue ? "Enabled" : "Disabled"}
              </Badge>
              <Switch
                checked={localValue === true || localValue === 'true'}
                onCheckedChange={(checked) => {
                  setLocalValue(checked);
                  updateSetting(setting.setting_key, checked);
                }}
              />
            </div>
          </div>
        </Card>
      );
    }

    // Numeric threshold settings
    if (setting.setting_key.includes('threshold') || setting.setting_key.includes('limit') || setting.setting_key.includes('max_')) {
      return (
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Settings className="w-4 h-4 text-purple-500" />
              <Label className="text-base font-medium">{setting.description}</Label>
            </div>
            <p className="text-sm text-muted-foreground">
              Set the numeric limit for this system parameter
            </p>
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <Input
                  type="number"
                  value={localValue}
                  onChange={(e) => {
                    const value = parseInt(e.target.value) || 0;
                    setLocalValue(value);
                  }}
                  className="w-24"
                  min="0"
                />
                <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
                  <Save className="w-4 h-4" />
                </Button>
              </div>
              <Badge variant="outline">Current: {localValue}</Badge>
            </div>
          </div>
        </Card>
      );
    }

    // Default string input
    return (
      <Card className="p-4">
        <div className="space-y-4">
          <div className="flex items-center gap-2">
            <Settings className="w-4 h-4 text-gray-500" />
            <Label className="text-base font-medium">{setting.description}</Label>
          </div>
          <div className="flex items-center gap-2">
            <Input
              value={localValue}
              onChange={(e) => {
                setLocalValue(e.target.value);
              }}
              className="flex-1"
            />
            <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
              <Save className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </Card>
    );
  };

  return (
    <AdminLayout>
      <div className="space-y-6 max-w-4xl">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Admin Settings</h1>
          <p className="text-muted-foreground mt-1">
            Configure system-wide settings and preferences
          </p>
        </div>

        <Tabs defaultValue="moderation" className="space-y-6">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="moderation" className="flex items-center gap-2">
              <Shield className="w-4 h-4" />
              <span className="hidden sm:inline">Moderation</span>
            </TabsTrigger>
            <TabsTrigger value="auth" className="flex items-center gap-2">
              <Lock className="w-4 h-4" />
              <span className="hidden sm:inline">Auth</span>
            </TabsTrigger>
            <TabsTrigger value="user_management" className="flex items-center gap-2">
              <Users className="w-4 h-4" />
              <span className="hidden sm:inline">Users</span>
            </TabsTrigger>
            <TabsTrigger value="notifications" className="flex items-center gap-2">
              <Bell className="w-4 h-4" />
              <span className="hidden sm:inline">Notifications</span>
            </TabsTrigger>
            <TabsTrigger value="system" className="flex items-center gap-2">
              <Settings className="w-4 h-4" />
              <span className="hidden sm:inline">System</span>
            </TabsTrigger>
            <TabsTrigger value="integrations" className="flex items-center gap-2">
              <Plug className="w-4 h-4" />
              <span className="hidden sm:inline">Integrations</span>
            </TabsTrigger>
            <TabsTrigger value="testing" className="flex items-center gap-2">
              <Loader2 className="w-4 h-4" />
              <span className="hidden sm:inline">Testing</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="moderation">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="w-5 h-5" />
                  Moderation Settings
                </CardTitle>
                <CardDescription>
                  Configure content moderation rules, thresholds, and automated actions
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getSettingsByCategory('moderation').length > 0 ? (
                  getSettingsByCategory('moderation').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Shield className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No moderation settings configured yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="auth">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Lock className="w-5 h-5" />
                  Authentication Settings
                </CardTitle>
                <CardDescription>
                  Configure authentication security, CAPTCHA, and login settings
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getCaptchaBypassEnabled() && (
                  <Card className="bg-yellow-50 dark:bg-yellow-900/20 border-yellow-300">
                    <CardContent className="pt-6">
                      <div className="flex items-start gap-3">
                        <AlertTriangle className="w-5 h-5 text-yellow-600 dark:text-yellow-400 mt-0.5" />
                        <div className="space-y-1">
                          <p className="font-medium text-yellow-800 dark:text-yellow-200">
                            CAPTCHA Bypass is Currently Enabled
                          </p>
                          <p className="text-sm text-yellow-700 dark:text-yellow-300">
                            Authentication requests will not require CAPTCHA verification. 
                            This should ONLY be enabled in development environments.
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )}
                {getSettingsByCategory('auth').length > 0 ? (
                  getSettingsByCategory('auth').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Lock className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No authentication settings configured yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="user_management">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Users className="w-5 h-5" />
                  User Management
                </CardTitle>
                <CardDescription>
                  Configure user registration, profile settings, and account policies
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getSettingsByCategory('user_management').length > 0 ? (
                  getSettingsByCategory('user_management').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Users className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No user management settings configured yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="notifications">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Bell className="w-5 h-5" />
                  Notification Settings
                </CardTitle>
                <CardDescription>
                  Configure email alerts, push notifications, and communication preferences
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getSettingsByCategory('notifications').length > 0 ? (
                  getSettingsByCategory('notifications').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Bell className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No notification settings configured yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="system">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Settings className="w-5 h-5" />
                  System Configuration
                </CardTitle>
                <CardDescription>
                  Configure system-wide settings, maintenance options, and technical parameters
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getSettingsByCategory('system').length > 0 ? (
                  getSettingsByCategory('system').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Settings className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No system settings configured yet.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="integrations">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Plug className="w-5 h-5" />
                  Integration Settings
                </CardTitle>
                <CardDescription>
                  Configure third-party integrations and external services
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {getSettingsByCategory('integrations').length > 0 ? (
                  getSettingsByCategory('integrations').map((setting) => (
                    <SettingInput key={setting.id} setting={setting} />
                  ))
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Plug className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No integration settings configured yet.</p>
                  </div>
                )}
                
                <NovuMigrationUtility />
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="testing">
            <TestDataGenerator />
          </TabsContent>
        </Tabs>
      </div>
    </AdminLayout>
  );
}