'use client';

import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Users, Wifi, DollarSign, AlertTriangle } from 'lucide-react';

interface DashboardSummary {
  totalClients: number;
  activeSubscribers: number;
  todayCollections: number;
  overdueInvoices: number;
}

const kpiCards = [
  {
    key: 'totalClients' as const,
    label: 'Total Clients',
    icon: Users,
    color: '#0891B2',
    format: (v: number) => v.toLocaleString(),
  },
  {
    key: 'activeSubscribers' as const,
    label: 'Active Subscribers',
    icon: Wifi,
    color: '#059669',
    format: (v: number) => v.toLocaleString(),
  },
  {
    key: 'todayCollections' as const,
    label: "Today's Collections",
    icon: DollarSign,
    color: '#7C3AED',
    format: (v: number) => '₱' + v.toLocaleString('en-PH', { minimumFractionDigits: 2 }),
  },
  {
    key: 'overdueInvoices' as const,
    label: 'Overdue Invoices',
    icon: AlertTriangle,
    color: '#DC2626',
    format: (v: number) => v.toLocaleString(),
  },
];

export default function DashboardPage() {
  const { data, isLoading, error } = useQuery<DashboardSummary>({
    queryKey: ['dashboard', 'summary'],
    queryFn: async () => {
      const res = await api.get('/api/v1/dashboard/summary');
      return res.data;
    },
  });

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
        <p className="text-slate-500 text-sm mt-1">Overview of your ISP operations</p>
      </div>

      {error && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
          Failed to load dashboard data. The API endpoint may not be available yet.
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
        {kpiCards.map((card) => {
          const Icon = card.icon;
          return (
            <Card key={card.key} className="border shadow-sm">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-slate-500">
                  {card.label}
                </CardTitle>
                <div
                  className="w-9 h-9 rounded-lg flex items-center justify-center"
                  style={{ backgroundColor: card.color + '1A' }}
                >
                  <Icon size={18} style={{ color: card.color }} />
                </div>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <Skeleton className="h-8 w-24" />
                ) : (
                  <p className="text-2xl font-bold text-slate-800">
                    {data ? card.format(data[card.key]) : '—'}
                  </p>
                )}
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}