'use client';

import { useEffect, useState } from 'react';
import {
  Users,
  CreditCard,
  Box,
  Wallet,
  TrendingUp,
  TrendingDown,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Container } from '@/components/common/container';
import { Toolbar, ToolbarHeading } from '@/app/components/layouts/demo1/components/toolbar';
import { fetchUsers } from '@/network/apis/dashboard/userManagment/users/users.apis';
import { fetchPackages } from '@/network/apis/dashboard/packages/packages.apis.';
import { fetchSubscriptions } from '@/network/apis/dashboard/subscriptions/subscriptions.apis';
import { RevenueChart } from './components/revenue-chart';
import { SubscriptionChart } from './components/subscription-chart';
import { RecentActivity } from './components/recent-activity';
import { QuickStats } from './components/quick-stats';
import { MarketplaceActivity, MarketplaceStats } from './components/marketplace-activity';

interface DashboardStats {
  totalUsers: number;
  totalPackages: number;
  totalSubscriptions: number;
  loading: boolean;
}

export default function DashboardPage() {
  const [stats, setStats] = useState<DashboardStats>({
    totalUsers: 0,
    totalPackages: 0,
    totalSubscriptions: 0,
    loading: true,
  });

  useEffect(() => {
    async function loadStats() {
      try {
        const [usersData, packagesData, subscriptionsData] = await Promise.allSettled([
          fetchUsers({ page: 1, per_page: 1 }),
          fetchPackages(1),
          fetchSubscriptions({ page: 1, perPage: 1 }),
        ]);

        setStats({
          totalUsers:
            usersData.status === 'fulfilled'
              ? usersData.value?.pagination?.total ?? 0
              : 0,
          totalPackages:
            packagesData.status === 'fulfilled'
              ? packagesData.value?.pagination?.total ?? 0
              : 0,
          totalSubscriptions:
            subscriptionsData.status === 'fulfilled'
              ? subscriptionsData.value?.pagination?.total ?? 0
              : 0,
          loading: false,
        });
      } catch {
        setStats((prev) => ({ ...prev, loading: false }));
      }
    }
    loadStats();
  }, []);

  const kpiCards = [
    {
      title: 'Total Users',
      value: stats.totalUsers,
      icon: Users,
      trend: '+12.5%',
      trendUp: true,
      color: 'text-blue-600',
      bg: 'bg-blue-50 dark:bg-blue-950/30',
    },
    {
      title: 'Active Subscriptions',
      value: stats.totalSubscriptions,
      icon: CreditCard,
      trend: '+8.2%',
      trendUp: true,
      color: 'text-emerald-600',
      bg: 'bg-emerald-50 dark:bg-emerald-950/30',
    },
    {
      title: 'Total Packages',
      value: stats.totalPackages,
      icon: Box,
      trend: '+3.1%',
      trendUp: true,
      color: 'text-violet-600',
      bg: 'bg-violet-50 dark:bg-violet-950/30',
    },
    {
      title: 'Revenue',
      value: 0,
      icon: Wallet,
      trend: '+15.3%',
      trendUp: true,
      color: 'text-amber-600',
      bg: 'bg-amber-50 dark:bg-amber-950/30',
      isCurrency: true,
    },
  ];

  return (
    <Container>
      <Toolbar>
        <ToolbarHeading>
          <h1 className="text-xl font-semibold text-foreground">Dashboard</h1>
          <p className="text-sm text-muted-foreground">
            Welcome back! Here&apos;s an overview of your platform.
          </p>
        </ToolbarHeading>
      </Toolbar>

      <div className="space-y-6 pb-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
          {kpiCards.map((card) => (
            <Card key={card.title} className="relative overflow-hidden">
              <CardContent className="p-5">
                <div className="flex items-start justify-between">
                  <div className="space-y-2">
                    <p className="text-sm font-medium text-muted-foreground">
                      {card.title}
                    </p>
                    <div className="flex items-baseline gap-2">
                      <h3 className="text-2xl font-bold tracking-tight">
                        {stats.loading ? (
                          <span className="inline-block w-16 h-7 bg-muted animate-pulse rounded" />
                        ) : card.isCurrency ? (
                          `SAR ${card.value.toLocaleString()}`
                        ) : (
                          card.value.toLocaleString()
                        )}
                      </h3>
                    </div>
                    <div className="flex items-center gap-1">
                      {card.trendUp ? (
                        <TrendingUp className="h-3.5 w-3.5 text-emerald-500" />
                      ) : (
                        <TrendingDown className="h-3.5 w-3.5 text-red-500" />
                      )}
                      <span
                        className={`text-xs font-medium ${card.trendUp ? 'text-emerald-500' : 'text-red-500'}`}
                      >
                        {card.trend}
                      </span>
                      <span className="text-xs text-muted-foreground">vs last month</span>
                    </div>
                  </div>
                  <div className={`${card.bg} rounded-lg p-2.5`}>
                    <card.icon className={`h-5 w-5 ${card.color}`} />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-7 gap-4">
          <Card className="xl:col-span-4">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base font-semibold">Revenue Overview</CardTitle>
                <Badge variant="secondary" className="text-xs font-normal">
                  Last 12 months
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="pt-0">
              <RevenueChart />
            </CardContent>
          </Card>

          <Card className="xl:col-span-3">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base font-semibold">Subscriptions</CardTitle>
                <Badge variant="secondary" className="text-xs font-normal">
                  Distribution
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="pt-0">
              <SubscriptionChart />
            </CardContent>
          </Card>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-7 gap-4">
          <div className="xl:col-span-4">
            <MarketplaceActivity />
          </div>
          <div className="xl:col-span-3">
            <MarketplaceStats />
          </div>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-7 gap-4">
          <div className="xl:col-span-4">
            <RecentActivity />
          </div>
          <div className="xl:col-span-3">
            <QuickStats />
          </div>
        </div>
      </div>
    </Container>
  );
}