import { useState, useEffect, useRef } from "react";

import {
Home,
BarChart2,
Settings,
Search,
Bell,
User,
Moon,
Sun,
Menu,
X,
ChevronRight,
Shield,
Lock,
Key,
Activity,
Zap,
Plus,
File,
Clock,
Eye,
Link,
FileCheck,
AlertTriangle,
Copy,
ExternalLink,
Trash2,
Edit
} from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter
} from "@/components/ui/dialog";
import {
Drawer,
DrawerTrigger,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerDescription,
DrawerFooter
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from
"@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";

// Sample data with more realistic values

const generateMessages = () => {
const types = ["Text", "File", "Image", "Video"];
const statuses = ["Active", "Viewed", "Expired"];
const creators = ["john@[Link]", "maria@[Link]", "david@[Link]",
"sarah@[Link]", "admin@[Link]"];

return [Link]({ length: 15 }, (_, i) => ({

id: `SEC-${[Link](1000 + [Link]() * 9000)}`,
type: types[[Link]([Link]() * [Link])],
status: statuses[[Link]([Link]() * [Link])],
expiresIn: [Link]() > 0.5 ?
`${[Link](1 + [Link]() * 24)} hours` :
"Expired",
creator: creators[[Link]([Link]() * [Link])],
content: [Link]() > 0.7 ?
"Confidential document regarding Q4 financials" :
"Secure message with self-destruct timer",
createdAt: new Date([Link]() - [Link]([Link]() * 7 * 24 * 60 * 60 *
1000)),
views: [Link]([Link]() * 5)
}));
};

const NAV_ITEMS = [
{ label: "Dashboard", icon: Home },
{ label: "Messages", icon: File },
{ label: "Analytics", icon: BarChart2 },
{ label: "Security", icon: Shield },
{ label: "Settings", icon: Settings },
];

const Index = () => {

const [activeTab, setActiveTab] = useState("Dashboard");
const [darkMode, setDarkMode] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [notificationsOpen, setNotificationsOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [isDesktop, setIsDesktop] = useState(false);
const [messages, setMessages] = useState(generateMessages());
const [filteredMessages, setFilteredMessages] = useState([]);
const [selectedMessage, setSelectedMessage] = useState(null);
const [newMessageDialogOpen, setNewMessageDialogOpen] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [messageToDelete, setMessageToDelete] = useState(null);
const [messageForm, setMessageForm] = useState({
type: "Text",
content: "",
expiration: "24h",
oneTimeView: true,
password: ""
});

const { toast } = useToast();

const notificationsRef = useRef(null);
const profileRef = useRef(null);

// Close dropdowns when clicking outside

useEffect(() => {
 const handleClickOutside = (event) => {
if ([Link] && !
[Link]([Link])) {
setNotificationsOpen(false);
}
if ([Link] && ) {
setShowProfileMenu(false);
}
};

[Link]("mousedown", handleClickOutside);
return () => {
[Link]("mousedown", handleClickOutside);
};
}, []);

// Responsive detection
useEffect(() => {
const handleResize = () => {
setIsDesktop([Link] >= 768);
};

handleResize();
[Link]('resize', handleResize);

return () => {
[Link]('resize', handleResize);
};
}, []);

// Dark mode toggle

useEffect(() => {
if (darkMode) {
[Link]('dark');
} else {
[Link]('dark');
}
}, [darkMode]);

// Filter messages based on search

useEffect(() => {
if ([Link]() === "") {
setFilteredMessages(messages);
} else {
const filtered = [Link](msg =>
[Link]().includes([Link]()) ||
[Link]().includes([Link]()) ||
[Link]().includes([Link]())
);
setFilteredMessages(filtered);
}
}, [searchQuery, messages]);

// Activity data based on actual messages

const activityData = [Link]({ length: 9 }, (_, i) => {
const date = new Date();
[Link]([Link]() - (8 - i));
return [Link](msg =>
new Date([Link]).toDateString() === [Link]()
 ).length * 10;
});

// Calculate stats from messages

const stats = {
total: [Link],
active: [Link](msg => [Link] === "Active").length,
viewed: [Link](msg => [Link] === "Viewed").length,
expired: [Link](msg => [Link] === "Expired").length,
};

// Security score calculation

const securityScore = [Link](
100,
80 + [Link]([Link]() * 20) // Simulate varying score
);

const handleCreateMessage = () => {

const newMessage = {
id: `SEC-${[Link](1000 + [Link]() * 9000)}`,
type: [Link],
status: "Active",
expiresIn: [Link] === "24h" ? "24 hours" :
[Link] === "1h" ? "1 hour" : "7 days",
creator: "admin@[Link]",
content: [Link],
createdAt: new Date(),
views: 0
};

setMessages([newMessage, ...messages]);
setMessageForm({
type: "Text",
content: "",
expiration: "24h",
oneTimeView: true,
password: ""
});
setNewMessageDialogOpen(false);

toast({
title: "Message Created",
description: `Your secret message (${[Link]}) has been created.`,
});
};

const handleDeleteMessage = (id) => {

setMessages([Link](msg => [Link] !== id));
setDeleteDialogOpen(false);

toast({
title: "Message Deleted",
description: "The message has been permanently removed.",
variant: "destructive"
});
};

const copyToClipboard = (text) => {

[Link](text);
 toast({
title: "Copied to Clipboard",
description: "The message link has been copied.",
});
};

const ActivityChart = ({ data }) => (

<div className="flex items-end h-40 gap-1 mt-2">
{[Link]((value, index) => (
<div
key={index}
className="bg-gradient-to-t from-blue-500 to-blue-400 dark:from-blue-600
dark:to-blue-400 rounded-t-sm w-full relative group"
style={{ height: `${value}%` }}
>
<div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-
zinc-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100
transition-opacity pointer-events-none">
{value / 10} messages
</div>
</div>
))}
</div>
);

const SecurityGauge = ({ score }) => (

<div className="relative flex items-center justify-center">
<svg className="w-32 h-32" viewBox="0 0 100 100">
<circle
cx="50" cy="50" r="45"
fill="none"
stroke="#e5e7eb"
strokeWidth="8"
className="dark:stroke-zinc-700"
/>
<circle
cx="50" cy="50" r="45"
fill="none"
stroke={score > 80 ? "#10b981" : score > 60 ? "#f59e0b" : "#ef4444"}
strokeWidth="8"
strokeDasharray={`${score * 2.83} 283`}
strokeLinecap="round"
transform="rotate(-90 50 50)"
/>
</svg>
<div className="absolute flex flex-col items-center">
<span className="text-3xl font-bold">{score}</span>
<span className="text-xs text-zinc-500 dark:text-zinc-400">Security
Score</span>
</div>
</div>
);

const NewMessageForm = () => (

<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Message Type</Label>
<Select
value={[Link]}
 onValueChange={(value) => setMessageForm({...messageForm, type: value})}
>
<SelectTrigger>
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Text">Text</SelectItem>
<SelectItem value="File">File</SelectItem>
<SelectItem value="Image">Image</SelectItem>
<SelectItem value="Video">Video</SelectItem>
</SelectContent>
</Select>
</div>

<div className="space-y-2">
<Label>Message Content</Label>
<Textarea
value={[Link]}
onChange={(e) => setMessageForm({...messageForm, content:
[Link]})}
placeholder="Enter your secure message here..."
className="min-h-[120px]"
/>
</div>

<div className="space-y-2">
<Label>Expiration</Label>
<Select
value={[Link]}
onValueChange={(value) => setMessageForm({...messageForm, expiration:
value})}
>
<SelectTrigger>
<SelectValue placeholder="Select expiration" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1h">1 Hour</SelectItem>
<SelectItem value="24h">24 Hours</SelectItem>
<SelectItem value="7d">7 Days</SelectItem>
</SelectContent>
</Select>
</div>

<div className="flex items-center justify-between space-x-2 pt-2">

<Label htmlFor="one-time">One-time view</Label>
<Switch
id="one-time"
checked={[Link]}
onCheckedChange={(checked) => setMessageForm({...messageForm,
oneTimeView: checked})}
/>
</div>

<div className="space-y-2">
<Label>Password Protection (optional)</Label>
<Input
type="password"
value={[Link]}
onChange={(e) => setMessageForm({...messageForm, password:
[Link]})}
placeholder="Set a password"
/>
</div>
</div>
);

const MessageViewDialog = () => (

<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>Message Details: {selectedMessage?.id}</DialogTitle>
<DialogDescription>
{selectedMessage?.type} message created on
{selectedMessage?.[Link]()}
</DialogDescription>
</DialogHeader>

<div className="space-y-4 py-4">

<div className="grid grid-cols-2 gap-4">
<div>
<Label>Status</Label>
<div className="mt-1">
<Badge
variant={
selectedMessage?.status === 'Active' ? 'success' :
selectedMessage?.status === 'Viewed' ? 'info' : 'secondary'
}
>
{selectedMessage?.status}
</Badge>
</div>
</div>
<div>
<Label>Expires In</Label>
<p className="mt-1 text-sm">{selectedMessage?.expiresIn}</p>
</div>
<div>
<Label>Creator</Label>
<p className="mt-1 text-sm">{selectedMessage?.creator}</p>
</div>
<div>
<Label>Views</Label>
<p className="mt-1 text-sm">{selectedMessage?.views}</p>
</div>
</div>

<div>
<Label>Content</Label>
<div className="mt-1 p-3 bg-zinc-100 dark:bg-zinc-800 rounded-md">
<p className="text-sm">{selectedMessage?.content}</p>
</div>
</div>
<DialogContent>
<div>
{/* Your content inside DialogContent */}
</div>
</DialogContent>

{/* Now open the DialogFooter outside the div */}

<DialogFooter className="gap-2 sm:gap-0">
<Button
variant="outline"
onClick={() => {
copyToClipboard(`[Link]
}}
>
<Copy className="mr-2 h-4 w-4" />
Copy Link
</Button>
<Button
variant="destructive"
onClick={() => {
setMessageToDelete(selectedMessage?.id);
setDeleteDialogOpen(true);
}}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</Button>
</DialogFooter>

);

return (
<div className="flex min-h-screen bg-gray-50 dark:bg-zinc-900 text-zinc-800
dark:text-white transition-colors duration-300">
{/* Mobile menu overlay */}
{mobileMenuOpen && (
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setMobileMenuOpen(false)}
></div>
)}

{/* Sidebar - Mobile */}

<aside
className={`fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-zinc-800
shadow-xl p-6 transform transition-transform duration-300 ease-in-out md:hidden ${
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex items-center justify-between mb-8">
<h1 className="text-2xl font-extrabold tracking-tight text-blue-600
dark:text-white flex items-center">
<Lock className="mr-2" size={24} />
Secreta
</h1>
<button
onClick={() => setMobileMenuOpen(false)}
className="p-1 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-700"
>
<X size={24} />
</button>
</div>

<div className="mb-8">
<div className="flex items-center gap-3 p-3 mb-6 bg-blue-50 dark:bg-zinc-
700/50 rounded-xl">
 <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-zinc-600
flex items-center justify-center text-blue-600 dark:text-blue-400">
<User size={20} />
</div>
<div>
<p className="font-medium">Abdul Kamil</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">Administrator</p>
</div>
</div>

<nav className="flex flex-col gap-2">

{NAV_ITEMS.map(({ label, icon: Icon }) => (
<button
key={label}
onClick={() => {
setActiveTab(label);
setMobileMenuOpen(false);
}}
className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm
font-medium transition-all
${
activeTab === label
? "bg-gradient-to-r from-blue-600 to-blue-500 text-white
shadow-md shadow-blue-500/20"
: "hover:bg-zinc-100 dark:hover:bg-zinc-700/70"
}`}
aria-current={activeTab === label ? "page" : undefined}
>
<Icon size={18} strokeWidth={2} />
<span>{label}</span>
{activeTab === label && <ChevronRight size={16} className="ml-auto"
/>}
</button>
))}
</nav>
</div>

<div className="mt-auto">
<button
onClick={() => setDarkMode(!darkMode)}
className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-sm
font-medium hover:bg-zinc-100 dark:hover:bg-zinc-700/70"
>
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
<span>{darkMode ? "Light Mode" : "Dark Mode"}</span>
</button>

<div className="text-xs text-zinc-500 dark:text-zinc-400 mt-8 text-

center">
&copy; {new Date().getFullYear()} Secreta Inc.
</div>
</div>
</aside>

{/* Sidebar - Desktop */}

<aside className="w-72 bg-white dark:bg-zinc-800 shadow-md px-6 py-8 hidden
md:flex flex-col justify-between sticky top-0 h-screen">
<div>
 <h1 className="text-2xl font-extrabold tracking-tight mb-10 text-blue-600
dark:text-white flex items-center">
<Lock className="mr-2" size={24} />
Secreta
</h1>

<div className="flex items-center gap-3 p-3 mb-6 bg-blue-50 dark:bg-zinc-

700/50 rounded-xl">
<div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-zinc-600
flex items-center justify-center text-blue-600 dark:text-blue-400">
<User size={20} />
</div>
<div>
<p className="font-medium">Abdul Kamil</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">Administrator</p>
</div>
</div>

<nav className="flex flex-col gap-2">

{NAV_ITEMS.map(({ label, icon: Icon }) => (
<button
key={label}
onClick={() => setActiveTab(label)}
className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm
font-medium transition-all
${
activeTab === label
? "bg-gradient-to-r from-blue-600 to-blue-500 text-white
shadow-md shadow-blue-500/20"
: "hover:bg-zinc-100 dark:hover:bg-zinc-700/70"
}`}
aria-current={activeTab === label ? "page" : undefined}
>
<Icon size={18} strokeWidth={2} />
<span>{label}</span>
{activeTab === label && <ChevronRight size={16} className="ml-auto"
/>}
</button>
))}
</nav>
</div>

<div>
<button
onClick={() => setDarkMode(!darkMode)}
className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-sm
font-medium hover:bg-zinc-100 dark:hover:bg-zinc-700/70"
>
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
<span>{darkMode ? "Light Mode" : "Dark Mode"}</span>
</button>

<div className="text-xs text-zinc-500 dark:text-zinc-400 mt-8 text-

center">
&copy; {new Date().getFullYear()} Secreta Inc.
</div>
</div>
</aside>
 {/* Main Content */}
<div className="flex-1 flex flex-col">
{/* Header */}
<header className="sticky top-0 z-30 bg-white/80 dark:bg-zinc-800/80
backdrop-blur-md border-b border-zinc-200 dark:border-zinc-700 px-4 py-4 md:px-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<button
className="p-2 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-
700 md:hidden"
onClick={() => setMobileMenuOpen(true)}
>
<Menu size={20} />
</button>

<div className="relative w-full sm:w-auto">

<div className="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<Search className="h-4 w-4 text-zinc-400" />
</div>
<Input
type="text"
placeholder="Search messages..."
value={searchQuery}
onChange={(e) => setSearchQuery([Link])}
className="pl-10 w-full sm:w-64"
/>
</div>
</div>

<div className="flex items-center gap-2">

<div className="relative" ref={notificationsRef}>
<button
className="p-2 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-
700 relative"
onClick={() => setNotificationsOpen(!notificationsOpen)}
>
<Bell size={20} />
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500
rounded-full"></span>
</button>

{/* Notifications dropdown */}

{notificationsOpen && (
<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-zinc-
800 rounded-xl shadow-lg border border-zinc-200 dark:border-zinc-700 py-2 z-50">
<div className="px-4 py-2 border-b border-zinc-200 dark:border-
zinc-700 flex justify-between items-center">
<h3 className="font-medium">Notifications</h3>
<button className="text-xs text-blue-500 hover:text-blue-600
dark:text-blue-400">Mark all as read</button>
</div>
<div className="max-h-80 overflow-y-auto">
{[
{ id: 1, title: "New message created", time: "10 minutes
ago", read: false },
{ id: 2, title: "Message viewed by recipient", time: "1
hour ago", read: false },
 { id: 3, title: "Security scan completed", time: "3 days
ago", read: true },
{ id: 4, title: "System update available", time: "1 week
ago", read: true },
].map(notification => (
<div
key={[Link]}
className={`px-4 py-3 hover:bg-zinc-50 dark:hover:bg-
zinc-700/50 cursor-pointer flex items-start gap-3 ${
![Link] ? 'bg-blue-50 dark:bg-blue-900/20' :
''
}`}
>
<div className={`w-2 h-2 rounded-full mt-2 ${!
[Link] ? 'bg-blue-500' : 'bg-transparent'}`}></div>
<div>
<p className="text-sm font-
medium">{[Link]}</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">{[Link]}</p>
</div>
</div>
))}
</div>
<div className="px-4 py-2 border-t border-zinc-200 dark:border-
zinc-700">
<button className="text-xs text-blue-500 hover:text-blue-600
dark:text-blue-400 w-full text-center">
View all notifications
</button>
</div>
</div>
)}
</div>

<div className="relative" ref={profileRef}>

<button
className="w-9 h-9 rounded-full bg-blue-100 dark:bg-zinc-700 flex
items-center justify-center text-blue-600 dark:text-blue-400 hover:ring-2
hover:ring-blue-500 dark:hover:ring-blue-400 transition-all"
onClick={() => setShowProfileMenu(!showProfileMenu)}
>
<User size={18} />
</button>

{/* Profile dropdown */}

{showProfileMenu && (
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-zinc-
800 rounded-xl shadow-lg border border-zinc-200 dark:border-zinc-700 py-2 z-50">
<button className="px-4 py-2 text-sm w-full text-left hover:bg-
zinc-50 dark:hover:bg-zinc-700/50 flex items-center gap-2">
<User size={16} />
Profile
</button>
<button className="px-4 py-2 text-sm w-full text-left hover:bg-
zinc-50 dark:hover:bg-zinc-700/50 flex items-center gap-2">
<Settings size={16} />
Settings
</button>
 <div className="border-t border-zinc-200 dark:border-zinc-700
my-1"></div>
<button className="px-4 py-2 text-sm w-full text-left hover:bg-
zinc-50 dark:hover:bg-zinc-700/50 text-red-500 flex items-center gap-2">
<Key size={16} />
Sign out
</button>
</div>
)}
</div>
</div>
</div>
</header>

<main className="flex-1 px-4 py-6 md:px-8 md:py-8 transition-all">

<div className="flex flex-col gap-6">
{/* Page header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-
between gap-4">
<div>
<h2 className="text-3xl font-bold">{activeTab}</h2>
<p className="text-zinc-500 dark:text-zinc-400">
{activeTab === "Dashboard" && "Welcome back, Abdul. Manage your
secure messages."}
{activeTab === "Messages" && "View and manage all your secret
messages."}
{activeTab === "Analytics" && "Track your message activity and
statistics."}
{activeTab === "Security" && "Monitor your account security
settings."}
{activeTab === "Settings" && "Configure your account
preferences."}
</p>
</div>

{activeTab === "Messages" && (

isDesktop ? (
<Dialog open={newMessageDialogOpen}
onOpenChange={setNewMessageDialogOpen}>
<DialogTrigger asChild>
<Button className="flex items-center gap-2">
<Plus size={18} />
<span>New Message</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create a New Secret Message</DialogTitle>
<DialogDescription>
Create a secure, self-destructing message or file share
</DialogDescription>
</DialogHeader>
<NewMessageForm />
<DialogFooter>
<Button variant="outline" onClick={() =>
setNewMessageDialogOpen(false)}>
Cancel
</Button>
<Button onClick={handleCreateMessage}>
 Create Message
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
) : (
<Drawer open={newMessageDialogOpen}
onOpenChange={setNewMessageDialogOpen}>
<DrawerTrigger asChild>
<Button className="flex items-center gap-2">
<Plus size={18} />
<span>New Message</span>
</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Create a New Secret Message</DrawerTitle>
<DrawerDescription>
Create a secure, self-destructing message or file share
</DrawerDescription>
</DrawerHeader>
<div className="px-4">
<NewMessageForm />
</div>
<DrawerFooter>
<Button variant="outline" onClick={() =>
setNewMessageDialogOpen(false)}>
Cancel
</Button>
<Button onClick={handleCreateMessage}>
Create Message
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
)}
</div>

{/* Stats overview */}

{activeTab === "Dashboard" && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-
6">
{[
{ label: "Total Messages", value: [Link](),
icon: File, change: "+5.2%", positive: true },
{ label: "Active Messages", value: [Link](),
icon: Clock, change: "+12.3%", positive: true },
{ label: "Viewed Messages", value: [Link](),
icon: Eye, change: "+8.7%", positive: true },
{ label: "Expired Messages", value:
[Link](), icon: AlertTriangle, change: "-2.4%", positive:
false },
].map((stat, i) => (
<div
key={i}
className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
hover:shadow-md transition-all border border-zinc-100 dark:border-zinc-700"
>
 <div className="flex justify-between items-start mb-4">
<div className="p-2 rounded-xl bg-blue-50 dark:bg-zinc-700">
<[Link] size={20} className="text-blue-600 dark:text-
blue-400" />
</div>
<span className={`text-xs font-medium ${[Link] ?
'text-green-500' : 'text-red-500'}`}>
{[Link]}
</span>
</div>
<h3 className="text-2xl font-bold mb-1">{[Link]}</h3>
<p className="text-sm text-zinc-500 dark:text-zinc-
400">{[Link]}</p>
</div>
))}
</div>
)}

{/* Main content area */}

{activeTab === "Dashboard" && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Activity chart */}
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
border border-zinc-100 dark:border-zinc-700 lg:col-span-2">
<div className="flex justify-between items-center mb-6">
<h3 className="font-semibold">Message Activity</h3>
<div className="flex gap-2">
<button className="px-3 py-1 text-xs rounded-lg bg-blue-100
text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">Daily</button>
<button className="px-3 py-1 text-xs rounded-lg hover:bg-
zinc-100 dark:hover:bg-zinc-700">Weekly</button>
<button className="px-3 py-1 text-xs rounded-lg hover:bg-
zinc-100 dark:hover:bg-zinc-700">Monthly</button>
</div>
</div>
<ActivityChart data={activityData} />
<div className="flex justify-between mt-4 text-xs text-zinc-500
dark:text-zinc-400">
{[Link]({ length: 9 }, (_, i) => {
const date = new Date();
[Link]([Link]() - (8 - i));
return [Link]('en-US', { weekday:
'short' });
}).map((day, i) => (
<span key={i}>{day}</span>
))}
</div>
</div>

{/* Security score */}

<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
border border-zinc-100 dark:border-zinc-700 flex flex-col items-center">
<h3 className="font-semibold self-start mb-4">Security Score</h3>
<SecurityGauge score={securityScore} />
<div className="mt-6 w-full">
<div className="flex justify-between items-center mb-2">
<span className="text-sm">Encryption</span>
<span className="text-sm font-medium">100%</span>
</div>
 <div className="w-full bg-zinc-200 dark:bg-zinc-700 h-2
rounded-full">
<div className="bg-green-500 h-2 rounded-full"
style={{ width: '100%' }}></div>
</div>
</div>
<div className="mt-3 w-full">
<div className="flex justify-between items-center mb-2">
<span className="text-sm">Authentication</span>
<span className="text-sm font-medium">92%</span>
</div>
<div className="w-full bg-zinc-200 dark:bg-zinc-700 h-2
rounded-full">
<div className="bg-green-500 h-2 rounded-full"
style={{ width: '92%' }}></div>
</div>
</div>
<div className="mt-3 w-full">
<div className="flex justify-between items-center mb-2">
<span className="text-sm">Vulnerabilities</span>
<span className="text-sm font-medium">68%</span>
</div>
<div className="w-full bg-zinc-200 dark:bg-zinc-700 h-2
rounded-full">
<div className="bg-yellow-500 h-2 rounded-full"
style={{ width: '68%' }}></div>
</div>
</div>
</div>
</div>
)}

{/* Messages table */}

{(activeTab === "Messages" || activeTab === "Dashboard") && (
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
border border-zinc-100 dark:border-zinc-700">
<div className="flex justify-between items-center mb-6">
<h3 className="font-semibold">Recent Messages</h3>
<button className="text-sm text-blue-600 dark:text-blue-400
hover:underline">View all</button>
</div>

<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-zinc-200
dark:divide-zinc-700">
<thead>
<tr>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">ID</th>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Type</th>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Status</th>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Expires In</th>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Creator</th>
<th className="py-3 px-4 text-left text-xs font-medium
text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Actions</th>
 </tr>
</thead>
<tbody className="divide-y divide-zinc-200 dark:divide-zinc-
700">
{(activeTab === "Dashboard" ? [Link](0, 5) :
filteredMessages).map((message) => (
<tr key={[Link]} className="hover:bg-zinc-50
dark:hover:bg-zinc-700/50 transition-colors">
<td className="py-4 px-4 text-sm font-
medium">{[Link]}</td>
<td className="py-4 px-4 text-sm">
<Badge variant="outline" className="font-normal">
{[Link]}
</Badge>
</td>
<td className="py-4 px-4 text-sm">
<Badge
variant={
[Link] === 'Active' ? 'success' :
[Link] === 'Viewed' ? 'info' : 'secondary'
}
>
{[Link]}
</Badge>
</td>
<td className="py-4 px-4 text-sm">
{[Link] === "Expired" ? (
<span className="text-zinc-500 dark:text-zinc-
400">Expired</span>
) : (
[Link]
)}
</td>
<td className="py-4 px-4 text-sm">{[Link]}</td>
<td className="py-4 px-4 text-sm">
<div className="flex items-center gap-2">
<button
onClick={() => {
setSelectedMessage(message);
if (isDesktop) {
setDeleteDialogOpen(true);
} else {
setMessageToDelete([Link]);
setDeleteDialogOpen(true);
}
}}
className="p-1.5 rounded-lg hover:bg-zinc-100
dark:hover:bg-zinc-700"
>
<Trash2 size={16} className="text-zinc-500
hover:text-red-500" />
</button>
<button
onClick={() => {
copyToClipboard(`[Link]
{[Link]}`);
}}
className="p-1.5 rounded-lg hover:bg-zinc-100
dark:hover:bg-zinc-700"
 >
<Copy size={16} className="text-zinc-500
hover:text-blue-500" />
</button>
<button
onClick={() => setSelectedMessage(message)}
className="p-1.5 rounded-lg hover:bg-zinc-100
dark:hover:bg-zinc-700"
>
<Eye size={16} className="text-zinc-500 hover:text-
blue-500" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>

{[Link] === 0 && (

<div className="text-center py-12">
<div className="flex justify-center">
<File className="w-12 h-12 text-zinc-400 dark:text-zinc-
500" />
</div>
<h3 className="mt-4 text-lg font-medium">No messages found</h3>
<p className="mt-2 text-zinc-500 dark:text-zinc-400 text-sm">
Create a new message or try adjusting your search.
</p>
</div>
)}
</div>
)}

{/* Security */}

{activeTab === "Security" && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
border border-zinc-100 dark:border-zinc-700">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 rounded-xl bg-blue-50 dark:bg-zinc-700">
<Shield size={20} className="text-blue-600 dark:text-blue-
400" />
</div>
<h3 className="font-semibold">Security Center</h3>
</div>

<div className="mt-6">
<SecurityGauge score={securityScore} />

<div className="mt-8 space-y-4">

<div className="flex justify-between items-center">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-green-100 dark:bg-
green-900/30">
<Activity size={16} className="text-green-600
dark:text-green-400" />
</div>
 <div>
<p className="text-sm font-medium">Two-factor
authentication</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">Enabled for all logins</p>
</div>
</div>
<Switch checked={true} />
</div>

<div className="flex justify-between items-center">

<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-
900/30">
<Lock size={16} className="text-blue-600 dark:text-
blue-400" />
</div>
<div>
<p className="text-sm font-medium">End-to-end
encryption</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">All messages encrypted</p>
</div>
</div>
<Switch checked={true} />
</div>

<div className="flex justify-between items-center">

<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-amber-100 dark:bg-
amber-900/30">
<AlertTriangle size={16} className="text-amber-600
dark:text-amber-400" />
</div>
<div>
<p className="text-sm font-medium">Login alerts</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">Get notified of new logins</p>
</div>
</div>
<Switch checked={true} />
</div>

<div className="flex justify-between items-center">

<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-
700">
<FileCheck size={16} className="text-zinc-600
dark:text-zinc-400" />
</div>
<div>
<p className="text-sm font-medium">Auto-delete expired
content</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">Automatically remove expired messages</p>
</div>
</div>
<Switch checked={false} />
</div>
 </div>
</div>
</div>

<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm

border border-zinc-100 dark:border-zinc-700 lg:col-span-2">
<div className="flex items-center gap-3 mb-6">
<div className="p-2 rounded-xl bg-blue-50 dark:bg-zinc-700">
<Key size={20} className="text-blue-600 dark:text-blue-
400" />
</div>
<h3 className="font-semibold">Access Log</h3>
</div>

<div className="space-y-4">
{[
{ event: "Login successful", location: "New York, USA", ip:
"[Link]", time: "Today, 14:32", status: "success" },
{ event: "Password changed", location: "New York, USA", ip:
"[Link]", time: "Today, 12:17", status: "success" },
{ event: "Failed login attempt", location: "Chicago, USA",
ip: "[Link]", time: "Yesterday, 22:43", status: "warning" },
{ event: "New device authorized", location: "New York, USA",
ip: "[Link]", time: "2 days ago", status: "success" },
{ event: "Security settings updated", location: "New York,
USA", ip: "[Link]", time: "1 week ago", status: "success" },
].map((log, i) => (
<div key={i} className="flex items-center justify-between py-
3 border-b border-zinc-100 dark:border-zinc-700 last:border-0">
<div className="flex items-center gap-3">
<div className={`w-2 h-2 rounded-full ${
[Link] === 'success' ? 'bg-green-500' :
[Link] === 'warning' ? 'bg-amber-500' : 'bg-red-
500'
}`}></div>
<div>
<p className="text-sm font-medium">{[Link]}</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">{[Link]}</p>
</div>
</div>
<div className="text-right">
<p className="text-sm">{[Link]}</p>
<p className="text-xs text-zinc-500 dark:text-zinc-
400">{[Link]}</p>
</div>
</div>
))}
</div>

<div className="mt-6">
<Button variant="outline" className="w-full">View Full Activity
Log</Button>
</div>
</div>
</div>
)}

{/* Settings */}

 {activeTab === "Settings" && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 bg-white dark:bg-zinc-800 p-6
rounded-2xl shadow-sm border border-zinc-100 dark:border-zinc-700">
<h3 className="font-semibold mb-6">General Settings</h3>

<div className="space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="full-name">Full Name</Label>
<Input id="full-name" value="Abdul Kamil" />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" value="admin@[Link]" />
</div>
</div>

<div className="space-y-2">
<Label htmlFor="timezone">Timezone</Label>
<Select defaultValue="america-new_york">
<SelectTrigger>
<SelectValue placeholder="Select timezone" />
</SelectTrigger>
<SelectContent>
<SelectItem value="america-new_york">America/New York
(UTC-05:00)</SelectItem>
<SelectItem value="america-los_angeles">America/Los
Angeles (UTC-08:00)</SelectItem>
<SelectItem value="europe-london">Europe/London
(UTC+00:00)</SelectItem>
<SelectItem value="asia-tokyo">Asia/Tokyo
(UTC+09:00)</SelectItem>
</SelectContent>
</Select>
</div>

<div className="flex items-center justify-between space-x-2">

<div>
<p className="font-medium">Dark Mode</p>
<p className="text-sm text-zinc-500 dark:text-zinc-400">Use
dark theme for the interface</p>
</div>
<Switch checked={darkMode} onCheckedChange={setDarkMode} />
</div>

<div className="flex items-center justify-between space-x-2">

<div>
<p className="font-medium">Email Notifications</p>
<p className="text-sm text-zinc-500 dark:text-zinc-
400">Receive email notifications</p>
</div>
<Switch defaultChecked />
</div>

<Button>Save Changes</Button>
</div>
</div>
 <div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm
border border-zinc-100 dark:border-zinc-700">
<h3 className="font-semibold mb-6">Account</h3>

<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-
zinc-700 flex items-center justify-center text-blue-600 dark:text-blue-400">
<User size={32} />
</div>
<div>
<p className="font-medium">Abdul Kamil</p>
<p className="text-sm text-zinc-500 dark:text-zinc-
400">Administrator</p>
</div>
</div>

<div className="flex items-center justify-between pt-4 border-t

border-zinc-200 dark:border-zinc-700">
<div>
<p className="font-medium">Security Level</p>
<p className="text-sm text-zinc-500 dark:text-zinc-
400">Enhanced Security</p>
</div>
<Button variant="outline" size="sm">Change</Button>
</div>

<div className="flex items-center justify-between pt-4 border-t

border-zinc-200 dark:border-zinc-700">
<div>
<p className="font-medium">Password</p>
<p className="text-sm text-zinc-500 dark:text-zinc-
400">Last changed 3 weeks ago</p>
</div>
<Button variant="outline" size="sm">Change</Button>
</div>

<div className="pt-4 border-t border-zinc-200 dark:border-zinc-

700">
<Button variant="destructive" className="w-full">
Delete Account
</Button>
</div>
</div>
</div>
</div>
)}

{/* Analytics */}

{activeTab === "Analytics" && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 bg-white dark:bg-zinc-800 p-6
rounded-2xl shadow-sm border border-zinc-100 dark:border-zinc-700">
<div className="flex items-center justify-between mb-6">
<h3 className="font-semibold">Message Statistics</h3>
<Select defaultValue="weekly">
<SelectTrigger className="w-32">
<SelectValue placeholder="Time period" />
</SelectTrigger>
 <SelectContent>
<SelectItem value="daily">Daily</SelectItem>
<SelectItem value="weekly">Weekly</SelectItem>
<SelectItem value="monthly">Monthly</SelectItem>
</SelectContent>
</Select>
</div>

<ActivityChart data={[30, 45, 60, 70, 55, 80, 65, 90, 75]} />

<div className="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-4">

{[
{ label: "Total Messages", value: [Link], change:
"+8%" },
{ label: "Average Views", value: "2.4", change: "+12%" },
{ label: "View Rate", value: "76%", change: "+5%" },
].map((stat, i) => (
<div key={i} className="bg-zinc-50 dark:bg-zinc-800 p-4
rounded-xl border border-zinc-100 dark:border-zinc-700">
<p className="text-sm text-zinc-500 dark:text-zinc-
400">{[Link]}</p>
<div className="flex items-baseline gap-2 mt-1">
<p className="text-2xl font-bold">{[Link]}</p>
<span className="text-xs font-medium text-green-
500">{[Link]}</span>
</div>
</div>
))}
</div>
</div>

<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl shadow-sm

border border-zinc-100 dark:border-zinc-700">
<h3 className="font-semibold mb-6">Message Type Distribution</h3>

<div className="space-y-4">
{[
{ type: "Text", percentage: 45, color: "bg-blue-500" },
{ type: "File", percentage: 25, color: "bg-green-500" },
{ type: "Image", percentage: 20, color: "bg-yellow-500" },
{ type: "Video", percentage: 10, color: "bg-purple-500" },
].map((item, i) => (
<div key={i} className="space-y-1">
<div className="flex justify-between items-center">
<p className="text-sm">{[Link]}</p>
<p className="text-sm font-medium">{[Link]}%</p>
</div>
<div className="w-full bg-zinc-200 dark:bg-zinc-700 h-2
rounded-full">
<div className={`${[Link]} h-2 rounded-full`}
style={{ width: `${[Link]}%` }}></div>
</div>
</div>
))}
</div>

<div className="mt-8">
<h4 className="text-sm font-medium mb-4">Top Creators</h4>
 <div className="space-y-3">
{[
{ user: "john@[Link]", count: 24 },
{ user: "admin@[Link]", count: 18 },
{ user: "maria@[Link]", count: 15 },
{ user: "david@[Link]", count: 10 },
].map((user, i) => (
<div key={i} className="flex items-center justify-between
py-2 border-b border-zinc-100 dark:border-zinc-700 last:border-0">
<p className="text-sm">{[Link]}</p>
<Badge variant="outline">{[Link]} messages</Badge>
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
</main>
</div>

{/* Message details dialog (desktop) */}

{isDesktop && selectedMessage && (
<Dialog open={!!selectedMessage} onOpenChange={() =>
setSelectedMessage(null)}>
<MessageViewDialog />
</Dialog>
)}

{/* Message details drawer (mobile) */}

{!isDesktop && selectedMessage && (
<Drawer open={!!selectedMessage} onOpenChange={() =>
setSelectedMessage(null)}>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Message Details: {selectedMessage?.id}</DrawerTitle>
<DrawerDescription>
{selectedMessage?.type} message created on
{selectedMessage?.[Link]()}
</DrawerDescription>
</DrawerHeader>

<div className="px-4 py-2 space-y-4">

<div className="grid grid-cols-2 gap-4">
<div>
<Label>Status</Label>
<div className="mt-1">
<Badge
variant={
selectedMessage?.status === 'Active' ? 'success' :
selectedMessage?.status === 'Viewed' ? 'info' : 'secondary'
}
>
{selectedMessage?.status}
</Badge>
</div>
</div>
<div>
 <Label>Expires In</Label>
<p className="mt-1 text-sm">{selectedMessage?.expiresIn}</p>
</div>
<div>
<Label>Creator</Label>
<p className="mt-1 text-sm">{selectedMessage?.creator}</p>
</div>
<div>
<Label>Views</Label>
<p className="mt-1 text-sm">{selectedMessage?.views}</p>
</div>
</div>

<div>
<Label>Content</Label>
<div className="mt-1 p-3 bg-zinc-100 dark:bg-zinc-800 rounded-md">
<p className="text-sm">{selectedMessage?.content}</p>
</div>
</div>
</div>

<DrawerFooter className="gap-2">
<Button
variant="outline"
onClick={() => {
copyToClipboard(`[Link]
}}
>
<Copy className="mr-2 h-4 w-4" />
Copy Link
</Button>
<Button
variant="destructive"
onClick={() => {
setMessageToDelete(selectedMessage?.id);
setDeleteDialogOpen(true);
}}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)}

<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>

<DialogContent>
<DialogHeader>
<DialogTitle>Delete Message</DialogTitle>
<DialogDescription>
Are you sure you want to delete this message? This action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
Cancel
</Button>
<Button
 variant="destructive"
onClick={() => handleDeleteMessage(messageToDelete)}
>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>

);
};
export default Index;