import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Package, AlertTriangle, CheckCircle2, XCircle, DollarSign } from "lucide-react";
import { fetchServer } from "@/lib/api";
import OrdersTable from "@/components/admin/OrdersTable";
import { MotionWrapper } from "@/components/ui/motion-wrapper";

export const dynamic = 'force-dynamic';

interface Order {
  orderId: string | number;
  userId: string;
  total: number;
  createdAt: string;
  status: string;
  items: Array<{
    name: string;
    quantity: number;
  }>;
  vendorUsername?: string;
}

interface SystemStats {
  vendors: number;
  orders: number;
  products: number;
  chats: number;
}

export default async function AdminOrdersPage() {
  let orders: Order[] = [];
  let systemStats: SystemStats | null = null;
  let error: string | null = null;

  try {
    const [ordersData, statsData] = await Promise.all([
      fetchServer<Order[]>("/admin/recent-orders"),
      fetchServer<SystemStats>("/admin/stats")
    ]);
    orders = ordersData;
    systemStats = statsData;
  } catch (err) {
    console.error("Failed to fetch data:", err);
    error = "Failed to load data";
  }

  if (error) {
    return (
      <div className="space-y-6 p-1">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Recent Orders</h1>
          <p className="text-muted-foreground mt-2">Monitor and manage platform orders</p>
        </div>
        <Card className="border-destructive/50 bg-destructive/10">
          <CardContent className="pt-6">
            <div className="text-center text-destructive">
              <p>{error}</p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  const acknowledgedOrders = orders.filter(o => o.status === 'acknowledged');
  const paidOrders = orders.filter(o => o.status === 'paid');
  const completedOrders = orders.filter(o => o.status === 'completed');
  const cancelledOrders = orders.filter(o => o.status === 'cancelled');

  return (
    <div className="space-y-8 p-1">
      <div>
        <h1 className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
          Recent Orders
        </h1>
        <p className="text-muted-foreground mt-2 text-lg">
          Monitor and manage platform transaction activity
        </p>
      </div>

      <MotionWrapper>
        <div className="space-y-8">
          {/* Stats Cards */}
          <div className="grid gap-4 md:grid-cols-4">
            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Total Orders</CardTitle>
                <div className="p-2 rounded-lg bg-primary/10">
                  <Package className="h-4 w-4 text-primary" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{systemStats?.orders || 0}</div>
                <div className="flex items-center mt-1">
                  <div className="h-1.5 w-1.5 rounded-full bg-primary mr-2" />
                  <p className="text-xs text-muted-foreground">Lifetime volume</p>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Acknowledged</CardTitle>
                <div className="p-2 rounded-lg bg-purple-500/10">
                  <AlertTriangle className="h-4 w-4 text-purple-500" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{acknowledgedOrders.length}</div>
                <div className="flex items-center mt-1">
                  <div className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2" />
                  <p className="text-xs text-muted-foreground">Vendor pending</p>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Paid</CardTitle>
                <div className="p-2 rounded-lg bg-emerald-500/10">
                  <DollarSign className="h-4 w-4 text-emerald-500" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{paidOrders.length}</div>
                <div className="flex items-center mt-1">
                  <div className="h-1.5 w-1.5 rounded-full bg-emerald-500 mr-2" />
                  <p className="text-xs text-muted-foreground">Processing</p>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
                <div className="p-2 rounded-lg bg-blue-500/10">
                  <CheckCircle2 className="h-4 w-4 text-blue-500" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{completedOrders.length}</div>
                <div className="flex items-center mt-1">
                  <div className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2" />
                  <p className="text-xs text-muted-foreground">Delivered</p>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Orders Table with Pagination */}
          <div className="bg-background/50 backdrop-blur-sm rounded-xl border border-border/40 overflow-hidden shadow-sm">
            <OrdersTable orders={orders} />
          </div>

          {/* Order Analytics */}
          <div className="grid gap-6 md:grid-cols-2">
            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
              <CardHeader>
                <CardTitle>Status Distribution</CardTitle>
                <CardDescription>Breakdown of active orders</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-12 bg-purple-500 rounded-full"></div>
                      <div>
                        <p className="font-medium text-sm">Acknowledged</p>
                        <p className="text-xs text-muted-foreground">Waiting for shipment</p>
                      </div>
                    </div>
                    <span className="font-bold">
                      {orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}%
                    </span>
                  </div>
                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-12 bg-emerald-500 rounded-full"></div>
                      <div>
                        <p className="font-medium text-sm">Paid</p>
                        <p className="text-xs text-muted-foreground">Payment confirmed</p>
                      </div>
                    </div>
                    <span className="font-bold">
                      {orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}%
                    </span>
                  </div>
                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-12 bg-blue-500 rounded-full"></div>
                      <div>
                        <p className="font-medium text-sm">Completed</p>
                        <p className="text-xs text-muted-foreground">Successfully concluded</p>
                      </div>
                    </div>
                    <span className="font-bold">
                      {orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}%
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
              <CardHeader>
                <CardTitle>Activity Summary</CardTitle>
                <CardDescription>Recent volume breakdown</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  <div className="flex items-center justify-between pb-4 border-b border-border/40">
                    <span className="text-sm text-muted-foreground">Total Displayed Orders</span>
                    <span className="text-xl font-bold">{orders.length}</span>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Active</span>
                      <p className="text-lg font-semibold">{acknowledgedOrders.length + paidOrders.length}</p>
                    </div>
                    <div className="space-y-1">
                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Finished</span>
                      <p className="text-lg font-semibold">{completedOrders.length}</p>
                    </div>
                    <div className="space-y-1">
                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Voided</span>
                      <p className="text-lg font-semibold text-destructive">{cancelledOrders.length}</p>
                    </div>
                    <div className="space-y-1">
                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Success Rate</span>
                      <p className="text-lg font-semibold text-green-500">
                        {orders.length > 0 ? Math.round((completedOrders.length / (orders.length - (acknowledgedOrders.length + paidOrders.length))) * 100) || 100 : 0}%
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </MotionWrapper>
    </div>
  );
}