'use client'

import { useState } from 'react'
import { AdminLayout } from '@/components/admin/layout'
import { Card } 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 { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Save, Lock, Bell, Shield } from 'lucide-react'

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    companyName: 'Admin Dashboard',
    email: 'admin@example.com',
    timezone: 'UTC',
    language: 'English',
    emailNotifications: true,
    pushNotifications: false,
    securityAlerts: true,
    twoFactorAuth: false,
  })

  const handleChange = (key: string, value: any) => {
    setSettings((prev) => ({
      ...prev,
      [key]: value,
    }))
  }

  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">Settings</h1>
        <p className="text-muted-foreground text-sm mt-2">
          Manage system preferences and configuration.
        </p>
      </div>

      {/* Settings Tabs */}
      <Tabs defaultValue="general" className="w-full">
        <TabsList className="bg-card border-b border-border rounded-none w-full justify-start">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
          <TabsTrigger value="advanced">Advanced</TabsTrigger>
        </TabsList>

        {/* General Settings */}
        <TabsContent value="general" className="space-y-8">
          <Card className="bg-card border-border p-8">
            <h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
              General Settings
            </h3>

            <div className="space-y-6">
              {/* Company Name */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label className="text-foreground text-sm font-medium">Company Name</Label>
                  <Input
                    value={settings.companyName}
                    onChange={(e) => handleChange('companyName', e.target.value)}
                    className="bg-input border-border text-foreground placeholder:text-muted-foreground"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-foreground text-sm font-medium">Email</Label>
                  <Input
                    type="email"
                    value={settings.email}
                    onChange={(e) => handleChange('email', e.target.value)}
                    className="bg-input border-border text-foreground placeholder:text-muted-foreground"
                  />
                </div>
              </div>

              {/* Timezone and Language */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label className="text-foreground text-sm font-medium">Timezone</Label>
                  <Input
                    value={settings.timezone}
                    onChange={(e) => handleChange('timezone', e.target.value)}
                    className="bg-input border-border text-foreground placeholder:text-muted-foreground"
                  />
                </div>
                <div className="space-y-2">
                  <Label className="text-foreground text-sm font-medium">Language</Label>
                  <Input
                    value={settings.language}
                    onChange={(e) => handleChange('language', e.target.value)}
                    className="bg-input border-border text-foreground placeholder:text-muted-foreground"
                  />
                </div>
              </div>

              <Separator className="bg-border" />

              <Button className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2">
                <Save className="w-4 h-4" />
                Save Changes
              </Button>
            </div>
          </Card>
        </TabsContent>

        {/* Notification Settings */}
        <TabsContent value="notifications" className="space-y-8">
          <Card className="bg-card border-border p-8">
            <h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
              <Bell className="w-5 h-5" />
              Notification Preferences
            </h3>

            <div className="space-y-6">
              {/* Email Notifications */}
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-foreground font-medium">Email Notifications</p>
                  <p className="text-sm text-muted-foreground">Receive notifications via email</p>
                </div>
                <Switch
                  checked={settings.emailNotifications}
                  onCheckedChange={(checked) =>
                    handleChange('emailNotifications', checked)
                  }
                />
              </div>

              <Separator className="bg-border" />

              {/* Push Notifications */}
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-foreground font-medium">Push Notifications</p>
                  <p className="text-sm text-muted-foreground">Receive push notifications in browser</p>
                </div>
                <Switch
                  checked={settings.pushNotifications}
                  onCheckedChange={(checked) =>
                    handleChange('pushNotifications', checked)
                  }
                />
              </div>

              <Separator className="bg-border" />

              {/* Security Alerts */}
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-foreground font-medium">Security Alerts</p>
                  <p className="text-sm text-muted-foreground">Get notified of security-related events</p>
                </div>
                <Switch
                  checked={settings.securityAlerts}
                  onCheckedChange={(checked) =>
                    handleChange('securityAlerts', checked)
                  }
                />
              </div>

              <Separator className="bg-border" />

              <Button className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2">
                <Save className="w-4 h-4" />
                Save Preferences
              </Button>
            </div>
          </Card>
        </TabsContent>

        {/* Security Settings */}
        <TabsContent value="security" className="space-y-8">
          <Card className="bg-card border-border p-8">
            <h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
              <Shield className="w-5 h-5" />
              Security Settings
            </h3>

            <div className="space-y-6">
              {/* Two Factor Auth */}
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-foreground font-medium">Two-Factor Authentication</p>
                  <p className="text-sm text-muted-foreground">Add an extra layer of security to your account</p>
                </div>
                <Switch
                  checked={settings.twoFactorAuth}
                  onCheckedChange={(checked) =>
                    handleChange('twoFactorAuth', checked)
                  }
                />
              </div>

              <Separator className="bg-border" />

              {/* Password Change */}
              <div className="space-y-4">
                <div>
                  <p className="text-foreground font-medium flex items-center gap-2">
                    <Lock className="w-4 h-4" />
                    Change Password
                  </p>
                  <p className="text-sm text-muted-foreground">Update your password regularly for security</p>
                </div>
                <Button variant="outline" className="border-border text-foreground hover:bg-input">
                  Change Password
                </Button>
              </div>

              <Separator className="bg-border" />

              <div className="space-y-4">
                <div>
                  <p className="text-foreground font-medium">Login History</p>
                  <p className="text-sm text-muted-foreground">View your recent login activity</p>
                </div>
                <Button variant="outline" className="border-border text-foreground hover:bg-input">
                  View Login History
                </Button>
              </div>
            </div>
          </Card>
        </TabsContent>

        {/* Advanced Settings */}
        <TabsContent value="advanced" className="space-y-8">
          <Card className="bg-card border-border p-8">
            <h3 className="text-lg font-semibold text-foreground mb-6">Advanced Settings</h3>

            <div className="space-y-6">
              <div className="space-y-4">
                <div>
                  <p className="text-foreground font-medium">API Keys</p>
                  <p className="text-sm text-muted-foreground">Manage your API access keys</p>
                </div>
                <Button variant="outline" className="border-border text-foreground hover:bg-input">
                  Manage API Keys
                </Button>
              </div>

              <Separator className="bg-border" />

              <div className="space-y-4">
                <div>
                  <p className="text-foreground font-medium">Data Export</p>
                  <p className="text-sm text-muted-foreground">Export your data in JSON format</p>
                </div>
                <Button variant="outline" className="border-border text-foreground hover:bg-input">
                  Export Data
                </Button>
              </div>

              <Separator className="bg-border" />

              <div className="space-y-4">
                <div>
                  <p className="text-foreground font-medium">Danger Zone</p>
                  <p className="text-sm text-muted-foreground">Irreversible and destructive actions</p>
                </div>
                <Button variant="outline" className="border-destructive/30 text-destructive hover:bg-destructive/10">
                  Delete Account
                </Button>
              </div>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </AdminLayout>
  )
}