"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Bell, Shield, Eye, Database } from "lucide-react"

export function SettingsCard() {
  const [notifications, setNotifications] = useState(true)
  const [auditLogs, setAuditLogs] = useState(true)
  const [dataRetention, setDataRetention] = useState(false)

  return (
    <Card className="max-w-xl">
      <CardHeader>
        <CardTitle className="font-serif text-xl">System Configuration</CardTitle>
        <CardDescription className="font-sans">
          Configure your contained AI deployment. All settings remain within your environment.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Notifications */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
              <Bell className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <Label htmlFor="notifications" className="font-sans text-sm font-medium">
                System Notifications
              </Label>
              <p className="font-sans text-xs text-muted-foreground">
                Receive alerts for system events and anomalies
              </p>
            </div>
          </div>
          <Switch 
            id="notifications" 
            checked={notifications}
            onCheckedChange={setNotifications}
          />
        </div>

        <Separator />

        {/* Audit Logs */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
              <Eye className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <Label htmlFor="audit-logs" className="font-sans text-sm font-medium">
                Audit Logging
              </Label>
              <p className="font-sans text-xs text-muted-foreground">
                Record all system actions for compliance
              </p>
            </div>
          </div>
          <Switch 
            id="audit-logs" 
            checked={auditLogs}
            onCheckedChange={setAuditLogs}
          />
        </div>

        <Separator />

        {/* Data Retention */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
              <Database className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <Label htmlFor="data-retention" className="font-sans text-sm font-medium">
                Extended Retention
              </Label>
              <p className="font-sans text-xs text-muted-foreground">
                Keep processed data beyond 30 days
              </p>
            </div>
          </div>
          <Switch 
            id="data-retention" 
            checked={dataRetention}
            onCheckedChange={setDataRetention}
          />
        </div>

        <Separator />

        {/* Security Level */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
              <Shield className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <Label htmlFor="security-level" className="font-sans text-sm font-medium">
                Security Profile
              </Label>
              <p className="font-sans text-xs text-muted-foreground">
                Isolation and access control level
              </p>
            </div>
          </div>
          <Select defaultValue="strict">
            <SelectTrigger id="security-level" className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="standard">Standard</SelectItem>
              <SelectItem value="strict">Strict</SelectItem>
              <SelectItem value="airgapped">Air-gapped</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <Separator />

        {/* Actions */}
        <div className="flex gap-3 pt-2">
          <Button>Save Changes</Button>
          <Button variant="outline">Reset to Defaults</Button>
        </div>
      </CardContent>
    </Card>
  )
}