'use client';

import { useMemo } from 'react';
import Link from 'next/link';
import { useQueries } from '@tanstack/react-query';
import { format } from 'date-fns';
import {
  ArrowRight,
  Banknote,
  CheckCircle2,
  Clock,
  Megaphone,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  fetchOffers,
  fetchWithdrawals,
} from '@/network/apis/dashboard/marketplace/marketplace.apis';

const formatMoney = (amount: number, currency = 'SAR') =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
    maximumFractionDigits: 0,
  }).format(amount);

export function MarketplaceOverview() {
  const monthStart = useMemo(() => {
    const d = new Date();
    return format(new Date(d.getFullYear(), d.getMonth(), 1), 'yyyy-MM-dd');
  }, []);

  const queries = useQueries({
    queries: [
      {
        queryKey: ['ov', 'wd-pending'],
        queryFn: () => fetchWithdrawals({ status: 'requested', per_page: 1 }),
        staleTime: 30_000,
      },
      {
        queryKey: ['ov', 'wd-approved'],
        queryFn: () => fetchWithdrawals({ status: 'approved', per_page: 1 }),
        staleTime: 30_000,
      },
      {
        queryKey: ['ov', 'wd-paid-month'],
        queryFn: () =>
          fetchWithdrawals({
            status: 'paid',
            from: monthStart,
            per_page: 100,
          }),
        staleTime: 60_000,
      },
      {
        queryKey: ['ov', 'offers-pending'],
        queryFn: () => fetchOffers({ status: 'pending', per_page: 1 }),
        staleTime: 30_000,
      },
    ],
  });

  const wdPending = queries[0].data?.meta?.total ?? 0;
  const wdApproved = queries[1].data?.meta?.total ?? 0;
  const paidThisMonth = queries[2].data;
  const paidCount = paidThisMonth?.meta?.total ?? 0;
  const paidSum =
    paidThisMonth?.items?.reduce((acc, w) => acc + Number(w.amount || 0), 0) ?? 0;
  const offersPending = queries[3].data?.meta?.total ?? 0;

  const cards = [
    {
      label: 'Pending withdrawals',
      value: wdPending,
      icon: Clock,
      tone: 'text-yellow-600',
      href: '/marketplace-admin/withdrawals?status=requested',
    },
    {
      label: 'Approved (awaiting payment)',
      value: wdApproved,
      icon: Banknote,
      tone: 'text-blue-600',
      href: '/marketplace-admin/withdrawals?status=approved',
    },
    {
      label: 'Paid this month',
      value: `${paidCount} · ${formatMoney(paidSum)}`,
      icon: CheckCircle2,
      tone: 'text-green-600',
      href: '/marketplace-admin/withdrawals?status=paid',
    },
    {
      label: 'Offers pending review',
      value: offersPending,
      icon: Megaphone,
      tone: 'text-purple-600',
      href: '/marketplace-admin/offers?status=pending',
    },
  ];

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-2xl font-semibold">Marketplace overview</h1>
        <p className="text-sm text-muted-foreground">
          Daily snapshot of payouts and offer moderation queues.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {cards.map((c) => (
          <Link key={c.label} href={c.href}>
            <Card className="hover:shadow-md transition cursor-pointer h-full">
              <CardHeader className="pb-2">
                <CardTitle className="text-xs uppercase tracking-wide text-muted-foreground flex items-center justify-between">
                  {c.label}
                  <ArrowRight className="size-4 text-muted-foreground" />
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-2xl font-semibold ${c.tone}`}>
                  {c.value}
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}