import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { AdminLayout } from '@voilajsx/uikit/admin';
import { 
  BarChart3, 
  Users, 
  TrendingUp, 
  Activity, 
  DollarSign,
  ArrowUpRight,
  ArrowDownRight,
  Eye,
  Download,
  Filter,
  Home,
  Layout,
  Palette,
  BookOpen,
  Mail
} from 'lucide-react';
import type { NavigationItem } from '@voilajsx/uikit';

const DashboardPage: React.FC = () => {
  const navigate = useNavigate();

  // Navigation configuration matching Header structure
  const adminNavigation: NavigationItem[] = [
    { key: 'home', label: 'Home', href: '/', icon: Home },
    { key: 'components', label: 'Components', href: '/components', icon: Layout },
    { key: 'themes', label: 'Themes', href: '/themes', icon: Palette },
    { 
      key: 'pages', 
      label: 'Pages', 
      icon: BookOpen,
      items: [
        { key: 'login', label: 'Login', href: '/login' },
        { key: 'dashboard', label: 'Dashboard', href: '/dashboard' },
        { key: 'error', label: 'Error Page', href: '/error' },
      ]
    },
    { key: 'about', label: 'About', href: '/about', icon: BookOpen },
    { key: 'contact', label: 'Contact', href: '/contact', icon: Mail },
  ];

  const handleNavigation = (href: string) => {
    navigate(href);
  };

  const stats = [
    {
      title: 'Total Revenue',
      value: '$45,231.89',
      change: '+20.1%',
      trend: 'up',
      icon: DollarSign,
      description: 'from last month'
    },
    {
      title: 'Active Users',
      value: '2,350',
      change: '+180.1%',
      trend: 'up',
      icon: Users,
      description: 'from last month'
    },
    {
      title: 'Conversion Rate',
      value: '12.5%',
      change: '+19%',
      trend: 'up',
      icon: TrendingUp,
      description: 'from last month'
    },
    {
      title: 'Bounce Rate',
      value: '24.8%',
      change: '-4.3%',
      trend: 'down',
      icon: Activity,
      description: 'from last month'
    },
  ];

  const recentActivity = [
    { id: 1, user: 'Alice Johnson', action: 'Created new project', time: '2 minutes ago', status: 'success' },
    { id: 2, user: 'Bob Smith', action: 'Updated user profile', time: '5 minutes ago', status: 'info' },
    { id: 3, user: 'Carol Davis', action: 'Deleted 3 items', time: '10 minutes ago', status: 'warning' },
    { id: 4, user: 'David Wilson', action: 'Failed login attempt', time: '15 minutes ago', status: 'error' },
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'success': return 'text-green-600 bg-green-100';
      case 'info': return 'text-blue-600 bg-blue-100';
      case 'warning': return 'text-yellow-600 bg-yellow-100';
      case 'error': return 'text-red-600 bg-red-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  };

  return (
    <AdminLayout scheme="sidebar" tone="brand">
      <AdminLayout.Sidebar 
        navigation={adminNavigation}
        currentPath="/dashboard"
        onNavigate={handleNavigation}
        logo={<div className="font-bold">Admin Panel</div>}
      />
      <AdminLayout.Header 
        title="Dashboard"
        actions={
          <div className="flex items-center gap-3">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Export
            </Button>
            <Button variant="outline" size="sm">
              <Filter className="h-4 w-4 mr-2" />
              Filter
            </Button>
            <Button size="sm">
              <Eye className="h-4 w-4 mr-2" />
              View All
            </Button>
          </div>
        }
      />
      <AdminLayout.Content>
      <div className="space-y-8 p-6">
      {/* Content Header */}
      <div className="space-y-2">
        <p className="text-muted-foreground">
          Welcome back! Here's what's happening with your projects.
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <Card key={index} className="relative overflow-hidden">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                <Icon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <div className="flex items-center space-x-1 text-xs text-muted-foreground">
                  {stat.trend === 'up' ? (
                    <ArrowUpRight className="h-3 w-3 text-green-500" />
                  ) : (
                    <ArrowDownRight className="h-3 w-3 text-red-500" />
                  )}
                  <span className={stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}>
                    {stat.change}
                  </span>
                  <span>{stat.description}</span>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Charts Section */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Chart Placeholder */}
        <Card>
          <CardHeader>
            <CardTitle>Revenue Overview</CardTitle>
            <CardDescription>
              Monthly revenue for the last 6 months
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[200px] bg-muted/30 rounded-lg flex items-center justify-center">
              <div className="text-center space-y-2">
                <BarChart3 className="h-12 w-12 text-muted-foreground mx-auto" />
                <p className="text-sm text-muted-foreground">Chart Component Placeholder</p>
                <p className="text-xs text-muted-foreground">
                  Integrate with chart libraries like Chart.js or Recharts
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* User Growth */}
        <Card>
          <CardHeader>
            <CardTitle>User Growth</CardTitle>
            <CardDescription>
              New user registrations over time
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[200px] bg-muted/30 rounded-lg flex items-center justify-center">
              <div className="text-center space-y-2">
                <TrendingUp className="h-12 w-12 text-muted-foreground mx-auto" />
                <p className="text-sm text-muted-foreground">Growth Chart Placeholder</p>
                <p className="text-xs text-muted-foreground">
                  Shows user acquisition trends
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Recent Activity & Quick Actions */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent Activity */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
            <CardDescription>
              Latest user actions and system events
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivity.map((activity) => (
                <div key={activity.id} className="flex items-center justify-between p-3 rounded-lg bg-muted/20">
                  <div className="flex items-center space-x-3">
                    <div className={`w-2 h-2 rounded-full ${getStatusColor(activity.status)}`} />
                    <div>
                      <p className="text-sm font-medium">{activity.user}</p>
                      <p className="text-xs text-muted-foreground">{activity.action}</p>
                    </div>
                  </div>
                  <span className="text-xs text-muted-foreground">{activity.time}</span>
                </div>
              ))}
            </div>
            <div className="mt-4 text-center">
              <Button variant="outline" size="sm">
                View All Activity
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>
              Common dashboard tasks
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button className="w-full justify-start" variant="outline">
              <Users className="mr-2 h-4 w-4" />
              Manage Users
            </Button>
            <Button className="w-full justify-start" variant="outline" asChild>
              <Link to="/components">
                <BarChart3 className="mr-2 h-4 w-4" />
                View Reports
              </Link>
            </Button>
            <Button className="w-full justify-start" variant="outline" asChild>
              <Link to="/themes">
                <Activity className="mr-2 h-4 w-4" />
                System Status
              </Link>
            </Button>
            <Button className="w-full justify-start" variant="outline" asChild>
              <Link to="/contact">
                <DollarSign className="mr-2 h-4 w-4" />
                Billing & Plans
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* Demo Note */}
      <Card className="bg-muted/30">
        <CardContent className="pt-6">
          <div className="text-center space-y-2">
            <h3 className="font-semibold">Dashboard Demo</h3>
            <p className="text-sm text-muted-foreground">
              This dashboard showcases UIKit components in a real-world layout with statistics, charts, and activity feeds.
            </p>
            <div className="flex flex-wrap justify-center gap-4 text-xs text-muted-foreground">
              <span>• Responsive grid layout</span>
              <span>• Interactive statistics</span>
              <span>• Activity tracking</span>
              <span>• Chart placeholders</span>
            </div>
          </div>
        </CardContent>
      </Card>
      </div>
      </AdminLayout.Content>
    </AdminLayout>
  );
};

export default DashboardPage;