"use client";

import { BarChart, CreditCard, DollarSign, Package } from 'lucide-react';
import Link from 'next/link';

const revenueData = [
  { date: 'Jan 1', revenue: 1000 }, { date: 'Jan 5', revenue: 1200 }, { date: 'Jan 10', revenue: 1500 },
  { date: 'Jan 15', revenue: 1300 }, { date: 'Jan 20', revenue: 1700 }, { date: 'Jan 25', revenue: 1600 },
  { date: 'Jan 30', revenue: 2000 },
];

const recentOrders = [
  { id: '1001', customer: 'John Doe', amount: '$150.00', status: 'Completed', date: '2024-03-01' },
  { id: '1002', customer: 'Jane Smith', amount: '$230.50', status: 'Pending', date: '2024-03-01' },
  { id: '1003', customer: 'Alice Brown', amount: '$75.25', status: 'Completed', date: '2024-02-29' },
  { id: '1004', customer: 'Bob White', amount: '$400.00', status: 'Processing', date: '2024-02-28' },
  { id: '1005', customer: 'Charlie Green', amount: '$110.00', status: 'Completed', date: '2024-02-28' },
];

export default function AdminOverviewPage() {
  return (
    <div className="space-y-8">
      <h2 className="text-4xl font-bold text-white mb-8">Overview</h2>

      {/* Revenue Stats Display */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <p className="text-neutral-400 text-sm">Total Revenue</p>
            <p className="text-3xl font-semibold text-white">$12,450</p>
          </div>
          <DollarSign className="h-8 w-8 text-primary-cta" />
        </div>
        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <p className="text-neutral-400 text-sm">Total Orders</p>
            <p className="text-3xl font-semibold text-white">850</p>
          </div>
          <Package className="h-8 w-8 text-primary-cta" />
        </div>
        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <p className="text-neutral-400 text-sm">Pending Orders</p>
            <p className="text-3xl font-semibold text-white">32</p>
          </div>
          <CreditCard className="h-8 w-8 text-primary-cta" />
        </div>
        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <p className="text-neutral-400 text-sm">New Users</p>
            <p className="text-3xl font-semibold text-white">120</p>
          </div>
          <BarChart className="h-8 w-8 text-primary-cta" />
        </div>
      </div>

      {/* Orders Chart (Last 30 Days) */}
      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
        <h3 className="text-2xl font-semibold text-white mb-4">Orders Chart (Last 30 Days)</h3>
        <div className="h-64 flex items-center justify-center bg-neutral-800 rounded-md text-neutral-500">
          <p>Placeholder for a chart library (e.g., Recharts, Chart.js)</p>
        </div>
      </div>

      {/* Recent Orders Table */}
      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
        <h3 className="text-2xl font-semibold text-white mb-4">Recent Orders</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-neutral-800">
            <thead>
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Order ID</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Customer</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Amount</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Date</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-neutral-800">
              {recentOrders.map((order) => (
                <tr key={order.id}>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{order.id}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.customer}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.amount}</td>
                  <td className={`px-6 py-4 whitespace-nowrap text-sm ${order.status === 'Completed' ? 'text-green-500' : order.status === 'Pending' ? 'text-yellow-500' : 'text-blue-500'}`}>{order.status}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.date}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mt-4 text-right">
          <Link href="/admin/orders" className="text-primary-cta hover:underline">
            View All Orders
          </Link>
        </div>
      </div>
    </div>
  );
}
