"use client";

import { DollarSign, ShoppingCart, Users, TrendingUp } from "lucide-react";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree"; // Re-using existing component

export default function AdminOverviewPage() {
  const revenueMetrics = [
    {
      id: "total_revenue",      icon: DollarSign,
      title: "Total Revenue",      value: "$1,234,567"},
    {
      id: "monthly_revenue",      icon: TrendingUp,
      title: "Monthly Revenue",      value: "$89,123"},
    {
      id: "total_orders",      icon: ShoppingCart,
      title: "Total Orders",      value: "15,678"},
    {
      id: "new_users",      icon: Users,
      title: "New Users (Last 30 Days)",      value: "450"},
  ];

  const recentOrders = [
    {
      id: "ORD001",      customer: "John Doe",      service: "Instagram Likes",      amount: "$15.00",      status: "Completed",      date: "2023-10-26"},
    {
      id: "ORD002",      customer: "Jane Smith",      service: "YouTube Subscribers",      amount: "$50.00",      status: "Pending",      date: "2023-10-25"},
    {
      id: "ORD003",      customer: "Alice Johnson",      service: "TikTok Views",      amount: "$10.50",      status: "Completed",      date: "2023-10-25"},
    {
      id: "ORD004",      customer: "Bob Brown",      service: "Twitter Retweets",      amount: "$5.00",      status: "Processing",      date: "2023-10-24"},
    {
      id: "ORD005",      customer: "Charlie Green",      service: "Facebook Page Likes",      amount: "$20.00",      status: "Completed",      date: "2023-10-24"},
  ];

  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Dashboard Overview</h1>

      <div className="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">Revenue Statistics</h2>
        <MetricCardThree
          animationType="none" // No animation needed for a static admin view
          textboxLayout="default"
          useInvertedBackground={false} // Adjust as needed for admin theme
          metrics={revenueMetrics}
          className="!p-0" // Override padding from default section styling
          containerClassName="!p-0" // Override padding from default section styling
          gridClassName="grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" // Ensure grid layout
          cardClassName="p-4 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-700"
          valueClassName="text-3xl font-bold text-indigo-600 dark:text-indigo-400"
          metricTitleClassName="text-lg text-gray-600 dark:text-gray-400"
          iconContainerClassName="text-indigo-500 dark:text-indigo-300"
        />
      </div>

      <div className="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">Recent Orders</h2>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Order ID
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Customer
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Service
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Amount
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Status
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
                >
                  Date
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
              {recentOrders.map((order) => (
                <tr key={order.id}>
                  <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
                    {order.id}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {order.customer}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {order.service}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {order.amount}
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    <span
                      className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
                        order.status === "Completed"
                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                          : order.status === "Pending"
                          ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
                          : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
                      }`}
                    >
                      {order.status}
                    </span>
                  </td>
                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
                    {order.date}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}