"use client"

import { AdminSidebarLayout } from '@/components/layout/admin-sidebar-layout'
import { AdminNotificationProvider } from '@/contexts/AdminNotificationContext'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Settings, Save, Database, Mail, Shield } from 'lucide-react'

export default function AdminSettingsPage() {
  return (
    <AdminNotificationProvider>
      <AdminSidebarLayout>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-white">System Settings</h1>
              <p className="text-white/70">Configure system preferences and security settings</p>
            </div>
            <Button className="bg-orange-500 text-black hover:bg-orange-600">
              <Save className="h-4 w-4 mr-2" />
              Save Changes
            </Button>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* General Settings */}
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <Settings className="h-5 w-5 mr-2" />
                  General Settings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="site-name" className="text-white">Site Name</Label>
                  <Input 
                    id="site-name" 
                    defaultValue="Codenuk" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="site-description" className="text-white">Site Description</Label>
                  <Input 
                    id="site-description" 
                    defaultValue="AI-powered code generation platform" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="maintenance-mode" className="text-white">Maintenance Mode</Label>
                  <Switch id="maintenance-mode" />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="user-registration" className="text-white">Allow User Registration</Label>
                  <Switch id="user-registration" defaultChecked />
                </div>
              </CardContent>
            </Card>

            {/* Security Settings */}
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <Shield className="h-5 w-5 mr-2" />
                  Security Settings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label htmlFor="two-factor" className="text-white">Require 2FA for Admins</Label>
                  <Switch id="two-factor" defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="session-timeout" className="text-white">Auto Session Timeout</Label>
                  <Switch id="session-timeout" defaultChecked />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="max-login-attempts" className="text-white">Max Login Attempts</Label>
                  <Input 
                    id="max-login-attempts" 
                    type="number" 
                    defaultValue="5" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="password-min-length" className="text-white">Min Password Length</Label>
                  <Input 
                    id="password-min-length" 
                    type="number" 
                    defaultValue="8" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
              </CardContent>
            </Card>

            {/* Email Settings */}
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <Mail className="h-5 w-5 mr-2" />
                  Email Settings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="smtp-host" className="text-white">SMTP Host</Label>
                  <Input 
                    id="smtp-host" 
                    placeholder="smtp.example.com" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="smtp-port" className="text-white">SMTP Port</Label>
                  <Input 
                    id="smtp-port" 
                    type="number" 
                    defaultValue="587" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="from-email" className="text-white">From Email</Label>
                  <Input 
                    id="from-email" 
                    placeholder="noreply@codenuk.com" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="email-notifications" className="text-white">Email Notifications</Label>
                  <Switch id="email-notifications" defaultChecked />
                </div>
              </CardContent>
            </Card>

            {/* Database Settings */}
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <Database className="h-5 w-5 mr-2" />
                  Database Settings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <Label htmlFor="auto-backup" className="text-white">Auto Backup</Label>
                  <Switch id="auto-backup" defaultChecked />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="backup-frequency" className="text-white">Backup Frequency (hours)</Label>
                  <Input 
                    id="backup-frequency" 
                    type="number" 
                    defaultValue="24" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="retention-days" className="text-white">Backup Retention (days)</Label>
                  <Input 
                    id="retention-days" 
                    type="number" 
                    defaultValue="30" 
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>
                <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10">
                  <Database className="h-4 w-4 mr-2" />
                  Run Manual Backup
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </AdminSidebarLayout>
    </AdminNotificationProvider>
  )
}
