'use client';

import { useEffect, useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import {
  ShoppingCart,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Clock,
  IndianRupee,
  TrendingUp,
  Calendar,
  BarChart3,
} from 'lucide-react';
import Link from 'next/link';

interface DashboardStats {
  totalOrders: number;
  pendingOrders: number;
  successOrders: number;
  failedOrders: number;
  signFailedOrders: number;
  todayCollection: number;
  totalSuccessAmount: number;
  todaySuccessAmount: number;
}

interface RecentOrder {
  id: string;
  mOrderId: string;
  amount: number;
  paidAmount: number | null;
  status: string;
  currency: string;
  createdAt: string;
  callbackAt: string | null;
}

interface DailyStat {
  date: string;
  count: number;
  amount: number;
}

interface DashboardData {
  stats: DashboardStats;
  recentOrders: RecentOrder[];
  dailyStats: DailyStat[];
}

const currencyFormatter = new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

function formatCurrency(amount: number): string {
  return currencyFormatter.format(amount);
}

function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-IN', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function formatChartDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-IN', {
    day: '2-digit',
    month: 'short',
  });
}

const statusVariant: Record<string, { label: string; className: string }> = {
  PENDING: {
    label: 'Pending',
    className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
  },
  SUCCESS: {
    label: 'Success',
    className: 'bg-emerald-100 text-emerald-800 hover:bg-emerald-100',
  },
  FAILED: {
    label: 'Failed',
    className: 'bg-red-100 text-red-800 hover:bg-red-100',
  },
  SIGN_FAILED: {
    label: 'Sign Failed',
    className: 'bg-orange-100 text-orange-800 hover:bg-orange-100',
  },
};

interface StatCardConfig {
  label: string;
  icon: React.ElementType;
  value: number;
  iconBg: string;
  iconColor: string;
  formatValue?: boolean;
}

function getStatCards(stats: DashboardStats): StatCardConfig[] {
  return [
    {
      label: 'Total Orders',
      icon: ShoppingCart,
      value: stats.totalOrders,
      iconBg: 'bg-gray-100',
      iconColor: 'text-gray-600',
    },
    {
      label: 'Pending Orders',
      icon: Clock,
      value: stats.pendingOrders,
      iconBg: 'bg-yellow-100',
      iconColor: 'text-yellow-600',
    },
    {
      label: 'Success Orders',
      icon: CheckCircle,
      value: stats.successOrders,
      iconBg: 'bg-emerald-100',
      iconColor: 'text-emerald-600',
    },
    {
      label: 'Failed Orders',
      icon: XCircle,
      value: stats.failedOrders,
      iconBg: 'bg-red-100',
      iconColor: 'text-red-600',
    },
    {
      label: 'Sign Failed Orders',
      icon: AlertTriangle,
      value: stats.signFailedOrders,
      iconBg: 'bg-orange-100',
      iconColor: 'text-orange-600',
    },
    {
      label: 'Today Collection',
      icon: IndianRupee,
      value: stats.todayCollection,
      iconBg: 'bg-emerald-100',
      iconColor: 'text-emerald-600',
      formatValue: true,
    },
    {
      label: 'Total Success Amount',
      icon: TrendingUp,
      value: stats.totalSuccessAmount,
      iconBg: 'bg-emerald-100',
      iconColor: 'text-emerald-600',
      formatValue: true,
    },
    {
      label: 'Today Success Amount',
      icon: Calendar,
      value: stats.todaySuccessAmount,
      iconBg: 'bg-teal-100',
      iconColor: 'text-teal-600',
      formatValue: true,
    },
  ];
}

function StatCardSkeleton() {
  return (
    <Card className="shadow-sm">
      <CardContent className="p-4 md:p-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-12 w-12 rounded-xl" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-7 w-16" />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function ChartSkeleton() {
  return (
    <Card className="shadow-sm">
      <CardHeader className="pb-2">
        <Skeleton className="h-6 w-48" />
        <Skeleton className="h-4 w-64" />
      </CardHeader>
      <CardContent>
        <Skeleton className="h-[300px] w-full" />
      </CardContent>
    </Card>
  );
}

function TableSkeleton() {
  return (
    <Card className="shadow-sm">
      <CardHeader className="pb-2">
        <Skeleton className="h-6 w-40" />
        <Skeleton className="h-4 w-56" />
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="flex items-center gap-4">
              <Skeleton className="h-4 flex-1" />
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-6 w-20 rounded-full" />
              <Skeleton className="h-4 w-32" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

interface ChartTooltipProps {
  active?: boolean;
  payload?: Array<{ value: number; name: string }>;
  label?: string;
}

function CustomChartTooltip({ active, payload, label }: ChartTooltipProps) {
  if (!active || !payload || !payload.length) return null;
  return (
    <div className="bg-white border border-gray-200 rounded-lg shadow-lg px-4 py-3">
      <p className="text-sm font-medium text-gray-700 mb-1">{label}</p>
      <p className="text-sm font-semibold text-emerald-600">
        {formatCurrency(payload[0].value)}
      </p>
    </div>
  );
}

export default function AdminDashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        const res = await fetch('/api/admin/dashboard');
        if (!res.ok) {
          throw new Error('Failed to load dashboard data');
        }
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred');
      } finally {
        setLoading(false);
      }
    };
    fetchDashboardData();
  }, []);

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-500 mt-1">
          Overview of your payin gateway performance and recent activity.
        </p>
      </div>

      {/* Stats Cards Grid */}
      {loading ? (
        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <StatCardSkeleton key={i} />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
          {getStatCards(data?.stats ?? {
            totalOrders: 0,
            pendingOrders: 0,
            successOrders: 0,
            failedOrders: 0,
            signFailedOrders: 0,
            todayCollection: 0,
            totalSuccessAmount: 0,
            todaySuccessAmount: 0,
          }).map((stat) => (
            <Card key={stat.label} className="shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-3 sm:p-4 md:p-6">
                <div className="flex items-center gap-2 sm:gap-3 md:gap-4">
                  <div className={`flex-shrink-0 h-9 w-9 sm:h-10 sm:w-10 md:h-12 md:w-12 rounded-xl ${stat.iconBg} flex items-center justify-center`}>
                    <stat.icon className={`h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 ${stat.iconColor}`} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-[11px] sm:text-xs md:text-sm text-gray-500 truncate">{stat.label}</p>
                    <p className="text-base sm:text-lg md:text-2xl font-bold text-gray-900 truncate">
                      {stat.formatValue ? formatCurrency(stat.value) : stat.value.toLocaleString('en-IN')}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Chart Section */}
      {loading ? (
        <ChartSkeleton />
      ) : (
        <Card className="shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-base sm:text-lg md:text-xl font-semibold text-gray-900">
              Last 7 Days Success Amount
            </CardTitle>
            <CardDescription className="text-xs sm:text-sm">
              Daily successful transaction amounts over the past week
            </CardDescription>
          </CardHeader>
          <CardContent className="px-2 sm:px-6 pb-4 sm:pb-6">
            {data?.dailyStats && data.dailyStats.length > 0 ? (
              <div className="h-[220px] sm:h-[280px] md:h-[340px]" style={{ width: '100%', minWidth: 0 }}>
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart
                    data={data.dailyStats.map((d) => ({
                      ...d,
                      date: formatChartDate(d.date),
                    }))}
                    margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
                  >
                    <defs>
                      <linearGradient id="emeraldGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
                        <stop offset="95%" stopColor="#10b981" stopOpacity={0.02} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis
                      dataKey="date"
                      tick={{ fontSize: 12, fill: '#9ca3af' }}
                      axisLine={{ stroke: '#e5e7eb' }}
                      tickLine={false}
                    />
                    <YAxis
                      tick={{ fontSize: 12, fill: '#9ca3af' }}
                      axisLine={false}
                      tickLine={false}
                      tickFormatter={(value: number) =>
                        value >= 1000 ? `${(value / 1000).toFixed(1)}k` : String(value)
                      }
                    />
                    <Tooltip content={<CustomChartTooltip />} />
                    <Area
                      type="monotone"
                      dataKey="amount"
                      stroke="#10b981"
                      strokeWidth={2.5}
                      fill="url(#emeraldGradient)"
                      dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: '#ffffff' }}
                      activeDot={{ r: 6, fill: '#10b981', strokeWidth: 2, stroke: '#ffffff' }}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            ) : (
              <div className="h-[220px] sm:h-[280px] md:h-[340px] flex flex-col items-center justify-center gap-2">
                <BarChart3 className="h-10 w-10 text-gray-300" />
                <p className="text-gray-400 text-sm">No data available</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Recent Orders Table */}
      {loading ? (
        <TableSkeleton />
      ) : error ? (
        <Card className="shadow-sm">
          <CardContent className="p-6 text-center">
            <p className="text-red-500">{error}</p>
          </CardContent>
        </Card>
      ) : (
        <Card className="shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="text-base sm:text-lg md:text-xl font-semibold text-gray-900">
              Recent Orders
            </CardTitle>
            <CardDescription className="text-xs sm:text-sm">
              Latest 10 transactions across all statuses
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0 sm:p-6">
            {data?.recentOrders && data.recentOrders.length > 0 ? (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Order ID
                      </TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap text-right">
                        Amount
                      </TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Status
                      </TableHead>
                      <TableHead className="text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap hidden sm:table-cell">
                        Created At
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {data.recentOrders.map((order) => {
                      const variant = statusVariant[order.status] || statusVariant.PENDING;
                      return (
                        <TableRow key={order.id} className="hover:bg-gray-50 transition-colors">
                          <TableCell className="font-medium whitespace-nowrap">
                            <Link
                              href={`/admin/orders/${order.id}`}
                              className="text-emerald-600 hover:text-emerald-800 hover:underline transition-colors"
                            >
                              {order.mOrderId}
                            </Link>
                          </TableCell>
                          <TableCell className="font-medium text-gray-900 whitespace-nowrap text-right">
                            {formatCurrency(order.amount)}
                          </TableCell>
                          <TableCell>
                            <Badge
                              variant="secondary"
                              className={`text-xs font-medium ${variant.className}`}
                            >
                              {variant.label}
                            </Badge>
                          </TableCell>
                          <TableCell className="text-gray-500 text-sm hidden sm:table-cell">
                            {formatDate(order.createdAt)}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              </div>
            ) : (
              <div className="h-40 flex items-center justify-center">
                <p className="text-gray-400 text-sm">No orders yet</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  );
}