"use client";

import React, { useEffect, useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Users,
  CreditCard,
  TrendingUp,
  Activity,
  ArrowUpRight,
  ArrowDownRight,
  Plus,
  RefreshCcw,
  CalendarDays,
  Gem
} from "lucide-react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  AreaChart,
  Area,
} from "recharts";
import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import { Button } from "@/components/ui/button";

const conversionData = [
  { name: "Mon", rate: 40 },
  { name: "Tue", rate: 30 },
  { name: "Wed", rate: 45 },
  { name: "Thu", rate: 50 },
  { name: "Fri", rate: 65 },
  { name: "Sat", rate: 55 },
  { name: "Sun", rate: 70 },
];

export default function DashboardPage() {
  const [stats, setStats] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  const fetchStats = async () => {
    setLoading(true);
    try {
      const res = await fetch(`${API_BASE_URL}/dashboard/stats/`, {
        headers: getAuthHeaders()
      });
      if (res.ok) {
        const data = await res.json();
        setStats(data);
      }
    } catch (err) {
      console.error("Failed to fetch dashboard stats:", err);
    } finally {
      setLoading(false);
    }
  };

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

  const displayStats = stats || {
    total_revenue: 0,
    active_clients: 0,
    active_contracts: 0,
    overdue_installments: 0,
    recent_sales: [],
    revenue_history: []
  };

  return (
    <div className="flex-1 space-y-8">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h2 className="text-4xl font-black tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-primary to-indigo-600 dark:from-primary dark:to-blue-400">
            Control Center
          </h2>
          <p className="text-muted-foreground mt-1 font-medium flex items-center gap-2">
            <CalendarDays className="h-4 w-4" />
            Overview for {new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={fetchStats}
            disabled={loading}
            className="rounded-xl border-border/40 hover:bg-accent/50 transition-all font-semibold"
          >
            <RefreshCcw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
            Refresh Data
          </Button>
          <Button className="rounded-xl bg-primary hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all font-bold">
            <Plus className="mr-2 h-4 w-4" /> New Contract
          </Button>
        </div>
      </div>

      {/* KPI Cards Grid */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <Card className="group border-none shadow-card hover:shadow-primary/5 transition-all duration-500 overflow-hidden relative bg-card">
          <div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full -mr-10 -mt-10 transition-transform group-hover:scale-150 duration-700" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Portfolio Liquidity</CardTitle>
            <div className="rounded-2xl bg-primary/10 p-2.5 transition-colors group-hover:bg-primary group-hover:text-white">
              <span className="font-bold text-lg">₦</span>
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black tracking-tighter">₦{displayStats.total_revenue.toLocaleString()}</div>
            <div className="flex items-center mt-3 gap-1.5">
              <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
              <span className="text-[10px] uppercase font-bold text-emerald-600 dark:text-emerald-400">Total Verified Inflow</span>
            </div>
          </CardContent>
        </Card>

        <Card className="group border-none shadow-card hover:shadow-indigo-500/5 transition-all duration-500 overflow-hidden relative bg-card">
          <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full -mr-10 -mt-10 transition-transform group-hover:scale-150 duration-700" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Total Client</CardTitle>
            <div className="rounded-2xl bg-indigo-100 dark:bg-indigo-900/30 p-2.5 transition-colors group-hover:bg-indigo-600 group-hover:text-white">
              <Users className="h-5 w-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black tracking-tighter">{displayStats.active_clients}</div>
            <div className="flex items-center mt-3 gap-1.5">
              <div className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
              <span className="text-[10px] uppercase font-bold text-indigo-600 dark:text-indigo-400">Registered Clients</span>
            </div>
          </CardContent>
        </Card>

        <Card className="group border-none shadow-card hover:shadow-emerald-500/5 transition-all duration-500 overflow-hidden relative bg-card">
          <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full -mr-10 -mt-10 transition-transform group-hover:scale-150 duration-700" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Active Contracts</CardTitle>
            <div className="rounded-2xl bg-emerald-100 dark:bg-emerald-900/30 p-2.5 transition-colors group-hover:bg-emerald-600 group-hover:text-white">
              <Gem className="h-5 w-5 text-emerald-600 dark:text-emerald-400 group-hover:text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black tracking-tighter">{displayStats.active_contracts}</div>
            <div className="flex items-center mt-3 gap-1.5">
              <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
              <span className="text-[10px] uppercase font-bold text-emerald-600 dark:text-emerald-400">Running Property Plans</span>
            </div>
          </CardContent>
        </Card>

        <Card className="group border-none shadow-card hover:shadow-red-500/5 transition-all duration-500 overflow-hidden relative bg-card">
          <div className="absolute top-0 right-0 w-24 h-24 bg-red-500/5 rounded-full -mr-10 -mt-10 transition-transform group-hover:scale-150 duration-700" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-widest text-muted-foreground">At-Risk Accounts</CardTitle>
            <div className="rounded-2xl bg-red-100 dark:bg-red-900/30 p-2.5 transition-colors group-hover:bg-red-600 group-hover:text-white">
              <Activity className="h-5 w-5 text-red-600 dark:text-red-400 group-hover:text-white" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-black tracking-tighter">{displayStats.overdue_installments}</div>
            <div className="flex items-center mt-3 gap-1.5">
              <div className="h-1.5 w-1.5 rounded-full bg-red-500" />
              <span className="text-[10px] uppercase font-bold text-red-600 dark:text-red-400">Overdue Installments</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7 text-card-foreground">
        {/* Main Bar Chart */}
        <Card className="col-span-full lg:col-span-4 border-none shadow-card rounded-3xl overflow-hidden bg-card">
          <CardHeader className="pb-2">
            <CardTitle className="text-xl font-bold flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-primary" />
              Revenue Performance
            </CardTitle>
            <CardDescription className="font-medium">
              Historical performance data for the current fiscal year.
            </CardDescription>
          </CardHeader>
          <CardContent className="pl-2">
            <div className="h-[350px] w-full mt-4">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={displayStats.revenue_history}>
                  <defs>
                    <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="var(--primary)" stopOpacity={1} />
                      <stop offset="100%" stopColor="var(--primary)" stopOpacity={0.6} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="oklch(0.9 0.01 250 / 0.1)" />
                  <XAxis
                    dataKey="name"
                    stroke="currentColor"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                    dy={10}
                    className="text-muted-foreground"
                  />
                  <YAxis
                    stroke="currentColor"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                    tickFormatter={(value) => `₦${value}`}
                    dx={-10}
                    className="text-muted-foreground"
                  />
                  <Tooltip
                    cursor={{ fill: 'oklch(var(--primary) / 0.05)' }}
                    contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 40px -4px rgba(0, 0, 0, 0.1)', background: 'oklch(var(--card))', color: 'oklch(var(--card-foreground))' }}
                  />
                  <Bar
                    dataKey="total"
                    fill="url(#barGradient)"
                    radius={[6, 6, 0, 0]}
                    maxBarSize={40}
                    animationDuration={1500}
                  />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

        {/* Auxiliary Stats or Recent Feed */}
        <Card className="col-span-full lg:col-span-3 border-none shadow-card rounded-3xl overflow-hidden bg-card">
          <CardHeader>
            <CardTitle className="text-xl font-bold">Latest Inflows</CardTitle>
            <CardDescription className="font-medium">
              Real-time activity from the payments engine.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {displayStats.recent_sales.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-12 text-center">
                  <div className="h-16 w-16 bg-muted rounded-full flex items-center justify-center mb-4">
                    <Activity className="h-8 w-8 text-muted-foreground/50" />
                  </div>
                  <p className="text-muted-foreground font-medium italic">No recent transactions recorded</p>
                </div>
              ) : (
                displayStats.recent_sales.map((sale: any, i: number) => (
                  <div key={i} className="flex items-center group cursor-pointer p-2 rounded-2xl hover:bg-accent/50 transition-all">
                    <div className="h-11 w-11 bg-primary/10 rounded-xl flex items-center justify-center font-bold text-primary group-hover:scale-110 transition-transform">
                      {sale.name.charAt(0)}
                    </div>
                    <div className="ml-4 space-y-1 flex-1">
                      <p className="text-sm font-bold leading-none">{sale.name}</p>
                      <p className="text-xs text-muted-foreground">
                        {sale.plot} • {sale.date}
                      </p>
                    </div>
                    <div className="ml-auto font-black text-emerald-600 dark:text-emerald-400">{sale.amount}</div>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7 overflow-hidden">
        {/* Secondary Chart */}
        <Card className="col-span-full border-none shadow-card rounded-3xl bg-primary/5 border border-primary/10 transition-all">
          <CardHeader>
            <CardTitle className="text-xl font-bold">Engagement Intensity</CardTitle>
            <CardDescription className="font-medium">
              Property inquiry-to-contract conversion scaling across the week.
            </CardDescription>
          </CardHeader>
          <CardContent className="pl-0">
            <div className="h-[250px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={conversionData} margin={{ top: 10, right: 30, left: 10, bottom: 0 }}>
                  <defs>
                    <linearGradient id="colorRate" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="var(--primary)" stopOpacity={0.3} />
                      <stop offset="95%" stopColor="var(--primary)" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="oklch(var(--primary) / 0.1)" />
                  <XAxis dataKey="name" stroke="currentColor" className="text-muted-foreground" fontSize={12} tickLine={false} axisLine={false} dy={10} />
                  <YAxis stroke="currentColor" className="text-muted-foreground" fontSize={12} tickLine={false} axisLine={false} dx={-10} />
                  <Tooltip contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 40px -4px rgba(0, 0, 0, 0.1)', background: 'oklch(var(--card))', color: 'oklch(var(--card-foreground))' }} />
                  <Area type="monotone" dataKey="rate" stroke="var(--primary)" strokeWidth={4} fillOpacity={1} fill="url(#colorRate)" animationDuration={2000} />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}