'use client'

import {
  BarChart3,
  Users,
  TrendingUp,
  ShoppingCart,
  Activity,
  Clock,
} from 'lucide-react'
import { AdminLayout } from '@/components/admin/layout'
import { StatCard } from '@/components/admin/stat-card'
import { DataTable } from '@/components/admin/data-table'
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { useRouter } from 'next/navigation'
import { useAuth } from '@/context/AuthContext'
import { useEffect } from 'react'

const chartData = [
  { name: 'Jan', revenue: 4000, users: 2400, orders: 2210 },
  { name: 'Feb', revenue: 3000, users: 1398, orders: 2290 },
  { name: 'Mar', revenue: 2000, users: 9800, orders: 2000 },
  { name: 'Apr', revenue: 2780, users: 3908, orders: 2108 },
  { name: 'May', revenue: 1890, users: 4800, orders: 2105 },
  { name: 'Jun', revenue: 2390, users: 3800, orders: 2120 },
  { name: 'Jul', revenue: 3490, users: 4300, orders: 2100 },
]

const recentOrders = [
  {
    id: '#ORD001',
    customer: 'John Doe',
    amount: '$1,299.00',
    status: 'Completed',
    date: '2024-03-20',
  },
  {
    id: '#ORD002',
    customer: 'Jane Smith',
    amount: '$899.50',
    status: 'Pending',
    date: '2024-03-19',
  },
  {
    id: '#ORD003',
    customer: 'Bob Johnson',
    amount: '$2,499.00',
    status: 'Completed',
    date: '2024-03-18',
  },
  {
    id: '#ORD004',
    customer: 'Alice Williams',
    amount: '$599.99',
    status: 'Cancelled',
    date: '2024-03-17',
  },
  {
    id: '#ORD005',
    customer: 'Charlie Brown',
    amount: '$1,899.00',
    status: 'Completed',
    date: '2024-03-16',
  },
]

const statsData = [
  {
    title: 'Total Revenue',
    value: '$45,231.89',
    change: 20.1,
    icon: <TrendingUp className="w-6 h-6" />,
  },
  {
    title: 'Active Users',
    value: '2,543',
    change: 15.3,
    icon: <Users className="w-6 h-6" />,
  },
  {
    title: 'Total Orders',
    value: '1,234',
    change: 8.5,
    icon: <ShoppingCart className="w-6 h-6" />,
  },
  {
    title: 'Conversion Rate',
    value: '3.2%',
    change: -2.1,
    icon: <Activity className="w-6 h-6" />,
  },
]

export default function DashboardPage() {

  const { token, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !token) {
      router.push('/auth/login');
    }
  }, [token, isLoading, router]);

  if (isLoading || !token) return <p>Loading...</p>;

  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
        <p className="text-muted-foreground text-sm mt-2">
          Welcome back! Here&apos;s what&apos;s happening with your business today.
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        {statsData.map((stat, idx) => (
          <StatCard key={idx} {...stat} />
        ))}
      </div>

      {/* Charts Section */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        {/* Revenue Chart */}
        <Card className="lg:col-span-2 bg-card border-border p-6">
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-foreground">Revenue & Orders</h3>
            <p className="text-xs text-muted-foreground mt-1">Last 7 months</p>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#ffffff11" />
              <XAxis stroke="#9CA3AF" />
              <YAxis stroke="#9CA3AF" />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'rgba(20, 20, 30, 0.95)',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  borderRadius: '8px',
                }}
                labelStyle={{ color: '#E5E7EB' }}
              />
              <Legend />
              <Line
                type="monotone"
                dataKey="revenue"
                stroke="#A78BFA"
                strokeWidth={2}
                dot={false}
              />
              <Line
                type="monotone"
                dataKey="orders"
                stroke="#60A5FA"
                strokeWidth={2}
                dot={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>

        {/* Users Growth */}
        <Card className="bg-card border-border p-6">
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-foreground">User Growth</h3>
            <p className="text-xs text-muted-foreground mt-1">Last 7 months</p>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#ffffff11" />
              <XAxis stroke="#9CA3AF" />
              <YAxis stroke="#9CA3AF" />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'rgba(20, 20, 30, 0.95)',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  borderRadius: '8px',
                }}
                labelStyle={{ color: '#E5E7EB' }}
              />
              <Bar dataKey="users" fill="#A78BFA" radius={[8, 8, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </Card>
      </div>

      {/* Recent Orders Table */}
      <DataTable
        title="Recent Orders"
        searchPlaceholder="Search orders..."
        columns={[
          { key: 'id', label: 'Order ID' },
          { key: 'customer', label: 'Customer' },
          { key: 'date', label: 'Date' },
          { key: 'amount', label: 'Amount' },
          {
            key: 'status',
            label: 'Status',
          },
        ]}
        data={recentOrders.map((order) => ({
          ...order,
          status: (
            <Badge
              className={
                order.status === 'Completed'
                  ? 'bg-green-500/20 text-green-400'
                  : order.status === 'Pending'
                    ? 'bg-yellow-500/20 text-yellow-400'
                    : 'bg-red-500/20 text-red-400'
              }
            >
              {order.status}
            </Badge>
          ),
        }))}
        itemsPerPage={5}
      />
    </AdminLayout>
  )
}