"use client";
import ApplicationDashboardTabs from "@/src/components/admin/ecommerce/EcommerceMetrics";
import { Card, CardContent, CardHeader, CardTitle } from "@/shadcn/ui/card";
import {
  BarChart3,
  DollarSign,
  LineChartIcon,
} from "lucide-react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import ApplicationFunnel from "./ApplicationFunnel";
import { useEffect, useState } from "react";
import { getDashboardStats } from "@/src/services/admin/services";

const COLORS = [
  "#0088FE",
  "#00C49F",
  "#FFBB28",
  "#FF8042",
  "#8884d8",
  "#82ca9d",
];

const funnelColors = ["#2563eb", "#7c3aed", "#06b6d4", "#f97316", "#22c55e"];

export default function Ecommerce() {
  const [dashboardData, setDashboardData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      setLoading(true);
      const response = await getDashboardStats();
      if (response.data.success) {
        setDashboardData(response.data.data);
      }
    } catch (error) {
      console.error("Error fetching dashboard data:", error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
            Dashboard Overview
          </h1>
          <p className="text-gray-500 dark:text-gray-400 mt-1">
            Welcome back!
          </p>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-4 md:gap-6">
        <div className="col-span-12 space-y-6 xl:col-span-12">
          <ApplicationDashboardTabs data={dashboardData} />
        </div>
        <div className="col-span-12 xl:col-span-7 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <BarChart3 className="mr-2" /> Program-wise Application Counts
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="mb-4">Program-wise Application Counts</p>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={dashboardData?.programMonthlyTrends || []}>
                  <defs>
                    <linearGradient id="hiGradient" x1="0" y1="0" x2="1" y2="1">
                      <stop offset="0%" stopColor="#2563eb" />
                      <stop offset="100%" stopColor="#06b6d4" />
                    </linearGradient>
                    <linearGradient
                      id="fthbGradient"
                      x1="0"
                      y1="0"
                      x2="1"
                      y2="1"
                    >
                      <stop offset="0%" stopColor="#7c3aed" />
                      <stop offset="100%" stopColor="#ec4899" />
                    </linearGradient>
                    <linearGradient
                      id="tmrGradient"
                      x1="0"
                      y1="0"
                      x2="1"
                      y2="1"
                    >
                      <stop offset="0%" stopColor="#f97316" />
                      <stop offset="100%" stopColor="#facc15" />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="hi" name="HI" fill="url(#hiGradient)" />
                  <Bar dataKey="fthb" name="FTHB" fill="url(#fthbGradient)" />
                  <Bar dataKey="tmr" name="TMR" fill="url(#tmrGradient)" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          <ApplicationFunnel data={dashboardData?.statusCounts} />
        </div>

        <div className="col-span-12 xl:col-span-5 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <LineChartIcon className="mr-2" />
                Application Submitted Over Time
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="mb-4">Application Submitted per Month</p>
              <ResponsiveContainer width="100%" height={300}>
                <LineChart data={dashboardData?.monthlyTrends || []}>
                  <CartesianGrid strokeDasharray="4 4" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line
                    type="monotone"
                    stroke="#0d9488"
                    dataKey="Application_Submitted"
                    strokeWidth={3}
                  />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <DollarSign className="mr-2" /> Total Fund Raise in Market
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="mb-4">Total fund raised month-wise</p>
              <ResponsiveContainer width="100%" height={400}>
                <PieChart>
                  <Pie
                    data={dashboardData?.monthlyFundRaise || []}
                    dataKey="amount"
                    nameKey="month"
                    cx="50%"
                    cy="50%"
                    outerRadius={160}
                    label={({ name, percent }) =>
                      `${name} ${((percent ?? 0) * 100).toFixed(0)}%`
                    }
                  >
                    {(dashboardData?.monthlyFundRaise || []).map((entry: any, index: number) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={COLORS[index % COLORS.length]}
                      />
                    ))}
                  </Pie>
                  <Tooltip
                    formatter={(value) => `₹ ${typeof value === 'number' ? value.toLocaleString() : value}`}
                  />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}