import { useState } from 'react'
import { Card, Badge } from '@akitectio/aki-ui'
import {
    ChartBarIcon,
    UsersIcon,
    ShoppingCartIcon,
    CurrencyDollarIcon,
    HomeIcon,
    DocumentTextIcon,
    CogIcon,
    ArrowUpIcon,
    ArrowDownIcon,
} from '@heroicons/react/24/outline'

function Dashboard() {
    const [sidebarOpen, setSidebarOpen] = useState(false)

    const stats = [
        {
            name: 'Total Users',
            value: '12,345',
            change: '+12%',
            changeType: 'positive',
            icon: UsersIcon,
        },
        {
            name: 'Revenue',
            value: '$45,678',
            change: '+8%',
            changeType: 'positive',
            icon: CurrencyDollarIcon,
        },
        {
            name: 'Orders',
            value: '2,345',
            change: '-3%',
            changeType: 'negative',
            icon: ShoppingCartIcon,
        },
        {
            name: 'Conversion Rate',
            value: '3.24%',
            change: '+2%',
            changeType: 'positive',
            icon: ChartBarIcon,
        },
    ]

    const navigation = [
        { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
        { name: 'Team', href: '#', icon: UsersIcon, current: false },
        { name: 'Projects', href: '#', icon: DocumentTextIcon, current: false },
        { name: 'Calendar', href: '#', icon: DocumentTextIcon, current: false },
        { name: 'Settings', href: '#', icon: CogIcon, current: false },
    ]

    return (
        <div className="min-h-screen bg-gray-100 flex">
            {/* Sidebar */}
            <div className={`w-64 bg-white shadow-lg flex-shrink-0 ${sidebarOpen ? 'block' : 'hidden'} lg:block`}>
                <div className="flex items-center justify-center h-16 bg-blue-600">
                    <h1 className="text-xl font-bold text-white">Dashboard</h1>
                </div>
                <nav className="mt-8">
                    <div className="px-2 space-y-1">
                        {navigation.map((item) => (
                            <a
                                key={item.name}
                                href={item.href}
                                className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md ${item.current ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'}`}
                            >
                                <item.icon className={`mr-3 h-5 w-5 flex-shrink-0 ${item.current ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'}`} />
                                {item.name}
                            </a>
                        ))}
                    </div>
                </nav>
            </div>

            {/* Main Content */}
            <div className="flex-1 flex flex-col">
                {/* Top bar */}
                <div className="bg-white shadow-sm border-b border-gray-200">
                    <div className="px-4 sm:px-6 lg:px-8">
                        <div className="flex items-center justify-between h-16">
                            <button
                                onClick={() => setSidebarOpen(!sidebarOpen)}
                                className="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
                            >
                                <span className="sr-only">Open sidebar</span>
                                <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                                </svg>
                            </button>
                            <h1 className="text-xl font-semibold text-gray-900">Dashboard</h1>
                            <div className="flex items-center space-x-4">
                                <Badge variant="primary">Admin</Badge>
                                <div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center">
                                    <span className="text-sm font-medium text-white">JD</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Main content */}
                <div className="p-6">
                    {/* Stats */}
                    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
                        {stats.map((stat) => (
                            <Card key={stat.name} className="p-4">
                                <div className="flex items-center justify-between">
                                    <div className="flex-1 min-w-0">
                                        <dl>
                                            <dt className="text-xs font-medium text-gray-500 truncate mb-1">
                                                {stat.name}
                                            </dt>
                                            <dd className="flex items-baseline">
                                                <div className="text-xl font-semibold text-gray-900 truncate">
                                                    {stat.value}
                                                </div>
                                            </dd>
                                            <div className={`flex items-center text-xs font-semibold mt-1 ${stat.changeType === 'positive' ? 'text-green-600' : 'text-red-600'}`}>
                                                {stat.changeType === 'positive' ? (
                                                    <ArrowUpIcon className="h-3 w-3 flex-shrink-0 mr-1" />
                                                ) : (
                                                    <ArrowDownIcon className="h-3 w-3 flex-shrink-0 mr-1" />
                                                )}
                                                <span className="sr-only">
                                                    {stat.changeType === 'positive' ? 'Increased' : 'Decreased'} by
                                                </span>
                                                <span className="truncate">{stat.change}</span>
                                            </div>
                                        </dl>
                                    </div>
                                    <div className="flex-shrink-0 ml-3">
                                        <stat.icon className="h-6 w-6 text-blue-600" />
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </div>

                    {/* Recent Activity and Quick Actions */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <Card className="p-6">
                            <h3 className="text-lg font-medium text-gray-900 mb-4">Recent Activity</h3>
                            <div className="space-y-4">
                                {/* Activity items */}
                            </div>
                        </Card>

                        <Card className="p-6">
                            <h3 className="text-lg font-medium text-gray-900 mb-4">Quick Actions</h3>
                            <div className="space-y-3">
                                <button className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                                    <UsersIcon className="h-5 w-5 mr-2" />
                                    Add New User
                                </button>
                                <button className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                    <DocumentTextIcon className="h-5 w-5 mr-2" />
                                    Generate Report
                                </button>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    )
}