"use client";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import {
Settings2,
Users,
Shield,
Bell,
Monitor,
Database,
Cloud,
Mail,
Key,
Trash2,
AlertCircle,
CheckCircle2,
ArrowUpRight,
Globe,
Palette,
Eye,
Clock,
RefreshCw
} from "lucide-react";
interface SystemStatus {
service: string;
status: 'operational' | 'degraded' | 'down';
lastChecked: string;
uptime: string;
}
export default function SettingsPage() {
const [emailNotifications, setEmailNotifications] = useState(true);
const [autoBackup, setAutoBackup] = useState(true);
const [maintenanceMode, setMaintenanceMode] = useState(false);
const [debugMode, setDebugMode] = useState(false);
const systemStatuses: SystemStatus[] = [
{
service: "Display Service",
status: "operational",
lastChecked: "2024-03-21 14:30:00",
uptime: "99.9%"
},
{
service: "Database",
status: "operational",
lastChecked: "2024-03-21 14:30:00",
uptime: "99.8%"
},
{
service: "API Service",
status: "degraded",
lastChecked: "2024-03-21 14:25:00",
uptime: "98.5%"
},
{
service: "Authentication",
status: "operational",
lastChecked: "2024-03-21 14:30:00",
uptime: "99.9%"
}
];
const getStatusColor = (status: string) => {
switch (status) {
case 'operational':
return 'bg-green-500/10 text-green-600';
case 'degraded':
return 'bg-yellow-500/10 text-yellow-600';
case 'down':
return 'bg-red-500/10 text-red-600';
default:
return '';
}
};
return (
<div className="min-h-screen bg-gradient-to-b from-violet-50 via-white to-sky-50">
<div className="max-w-[1400px] mx-auto space-y-8 p-8">
<div>
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
System Settings
</h1>
<p className="mt-2 text-gray-600">
Configure and manage your system preferences
</p>
</div>
<Tabs defaultValue="general" className="space-y-6">
<TabsList className="bg-gray-100/50 p-1 rounded-xl">
<TabsTrigger
value="general"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
>
<Settings2 className="h-4 w-4 mr-2" />
General
</TabsTrigger>
<TabsTrigger
value="security"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
>
<Shield className="h-4 w-4 mr-2" />
Security
</TabsTrigger>
<TabsTrigger
value="notifications"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
>
<Bell className="h-4 w-4 mr-2" />
Notifications
</TabsTrigger>
<TabsTrigger
value="displays"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
>
<Monitor className="h-4 w-4 mr-2" />
Displays
</TabsTrigger>
<TabsTrigger
value="system"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
>
<Database className="h-4 w-4 mr-2" />
System
</TabsTrigger>
</TabsList>
<div className="grid grid-cols-12 gap-6">
{/* Main Content */}
<div className="col-span-12 lg:col-span-8 space-y-6">
<TabsContent value="general" className="space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Globe className="h-5 w-5 text-purple-500" />
General Settings
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label>Venue Name</Label>
<Input
placeholder="Enter venue name"
defaultValue="Gaming Center Oslo"
className="rounded-xl"
/>
</div>
<div className="space-y-2">
<Label>Time Zone</Label>
<Input
placeholder="Select time zone"
defaultValue="Europe/Oslo"
className="rounded-xl"
/>
</div>
<div className="space-y-2">
<Label>Default Language</Label>
<Input
placeholder="Select language"
defaultValue="Norwegian"
className="rounded-xl"
/>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Palette className="h-5 w-5 text-purple-500" />
Appearance
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label>Theme Color</Label>
<Input
type="color"
defaultValue="#9333EA"
className="h-12 rounded-xl"
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Dark Mode</Label>
<p className="text-sm text-gray-500">Enable dark mode for the admin interface</p>
</div>
<Switch checked={false} />
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="security" className="space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Key className="h-5 w-5 text-purple-500" />
Security Settings
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label>Admin Password</Label>
<Input
type="password"
placeholder="Enter new password"
className="rounded-xl"
/>
</div>
<div className="space-y-2">
<Label>Two-Factor Authentication</Label>
<div className="flex items-center justify-between">
<p className="text-sm text-gray-500">Enable 2FA for additional security</p>
<Switch checked={true} />
</div>
</div>
<div className="space-y-2">
<Label>Session Timeout</Label>
<Input
type="number"
placeholder="Minutes"
defaultValue="30"
className="rounded-xl"
/>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="notifications" className="space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Bell className="h-5 w-5 text-purple-500" />
Notification Preferences
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Email Notifications</Label>
<p className="text-sm text-gray-500">Receive system alerts via email</p>
</div>
<Switch
checked={emailNotifications}
onCheckedChange={setEmailNotifications}
/>
</div>
<div className="space-y-2">
<Label>Alert Email</Label>
<Input
type="email"
placeholder="Enter email address"
defaultValue="admin@example.com"
className="rounded-xl"
/>
</div>
<div className="space-y-2">
<Label>Notification Types</Label>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm">System Alerts</span>
<Switch defaultChecked />
</div>
<div className="flex items-center justify-between">
<span className="text-sm">Display Status Changes</span>
<Switch defaultChecked />
</div>
<div className="flex items-center justify-between">
<span className="text-sm">Maintenance Updates</span>
<Switch defaultChecked />
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="displays" className="space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Monitor className="h-5 w-5 text-purple-500" />
Display Settings
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label>Default Content Type</Label>
<Input
placeholder="Select content type"
defaultValue="Playlist"
className="rounded-xl"
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Auto-Refresh</Label>
<p className="text-sm text-gray-500">Automatically refresh displays</p>
</div>
<Switch defaultChecked />
</div>
<div className="space-y-2">
<Label>Refresh Interval (minutes)</Label>
<Input
type="number"
defaultValue="30"
className="rounded-xl"
/>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="system" className="space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Database className="h-5 w-5 text-purple-500" />
System Settings
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Maintenance Mode</Label>
<p className="text-sm text-gray-500">Enable maintenance mode</p>
</div>
<Switch
checked={maintenanceMode}
onCheckedChange={setMaintenanceMode}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Debug Mode</Label>
<p className="text-sm text-gray-500">Enable debug logging</p>
</div>
<Switch
checked={debugMode}
onCheckedChange={setDebugMode}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>Auto Backup</Label>
<p className="text-sm text-gray-500">Enable automatic backups</p>
</div>
<Switch
checked={autoBackup}
onCheckedChange={setAutoBackup}
/>
</div>
<div className="pt-4">
<Button
variant="destructive"
className="w-full rounded-xl"
>
<Trash2 className="h-4 w-4 mr-2" />
Clear System Cache
</Button>
</div>
</CardContent>
</Card>
</TabsContent>
</div>
{/* Sidebar */}
<div className="col-span-12 lg:col-span-4 space-y-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Eye className="h-5 w-5 text-purple-500" />
System Status
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{systemStatuses.map((status, index) => (
<div
key={index}
className="flex items-center justify-between p-3 rounded-xl bg-gray-50 border border-gray-100"
>
<div className="space-y-1">
<p className="font-medium">{status.service}</p>
<div className="flex items-center gap-2 text-sm text-gray-500">
<Clock className="h-4 w-4" />
<span>Last checked: {status.lastChecked}</span>
</div>
</div>
<div className="text-right">
<Badge className={getStatusColor(status.status)}>
{status.status}
</Badge>
<p className="text-sm text-gray-500 mt-1">{status.uptime} uptime</p>
</div>
</div>
))}
<Button
variant="outline"
className="w-full rounded-xl border-purple-200 hover:bg-purple-50 hover:text-purple-600"
>
<RefreshCw className="h-4 w-4 mr-2" />
Refresh Status
</Button>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Cloud className="h-5 w-5 text-purple-500" />
Backup & Restore
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<p className="text-sm text-gray-500">Last backup: 2024-03-21 12:00:00</p>
<div className="flex gap-2">
<Button
variant="outline"
className="flex-1 rounded-xl border-purple-200 hover:bg-purple-50 hover:text-purple-600"
>
Create Backup
</Button>
<Button
variant="outline"
className="rounded-xl border-purple-200 hover:bg-purple-50 hover:text-purple-600"
>
<ArrowUpRight className="h-4 w-4" />
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</Tabs>
</div>
</div>
);
}