'use client';

import { useEffect, useState } from 'react';
import { useAuth } from '@/lib/auth-context';
import { adminApiFetch } from '@/lib/api';
import { useToast } from '@/lib/toast';
import StatCard from '@/components/StatCard';
import { StatCardSkeleton } from '@/components/Skeletons';

export default function DashboardPage() {
  const { accessToken, appSecretProof } = useAuth();
  const { show } = useToast();
  const [stats, setStats] = useState<Record<string, number> | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!accessToken || !appSecretProof) return;
    setLoading(true);
    adminApiFetch('/admin/analytics', accessToken, appSecretProof)
      .then((d) => setStats(d.stats))
      .catch(() => show('error', 'Could not load dashboard stats.'))
      .finally(() => setLoading(false));
  }, [accessToken, appSecretProof]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div>
      <h1 className="text-lg font-bold mb-4">Overview</h1>
      {loading ? (
        <StatCardSkeleton count={5} />
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <StatCard label="Open Tickets" value={stats?.openTickets ?? 0} />
          <StatCard label="Pending Quotes" value={stats?.pendingQuotes ?? 0} />
          <StatCard label="Orders This Month" value={stats?.ordersThisMonth ?? 0} />
          <StatCard label="Low Stock Products" value={stats?.lowStockProducts ?? 0} />
          <StatCard label="Revenue This Month" value={`TZS ${(stats?.revenueThisMonthTzs ?? 0).toLocaleString()}`} />
        </div>
      )}
    </div>
  );
}