'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useQueries, useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Search, X, CreditCard, Banknote } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Spinner } from '@/components/ui/spinners';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { fetchWalletCharges } from '@/network/apis/dashboard/marketplace/wallets.apis';
import {
  WalletCharge,
  WalletChargePaymentMethod,
  WalletChargeStatus,
} from '@/network/apis/dashboard/marketplace/wallets.types';
import PaginationComponent from '@/modules/client-management/components/paginationComponent/paginationComponent';
import { FetchError } from '@/modules/marketplace-admin/components/EndpointPending';
import { WalletChargeDetailSheet } from './WalletChargeDetailSheet';

type StatusChip = { label: string; value: WalletChargeStatus | 'all' };
const STATUS_CHIPS: StatusChip[] = [
  { label: 'Pending', value: 'pending' },
  { label: 'Approved', value: 'approved' },
  { label: 'Rejected', value: 'rejected' },
  { label: 'All', value: 'all' },
];

const STATUS_PILL: Record<WalletChargeStatus, string> = {
  pending: 'bg-amber-100 text-amber-800 border-amber-200',
  approved: 'bg-emerald-100 text-emerald-700 border-emerald-200',
  rejected: 'bg-red-100 text-red-700 border-red-200',
};

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

const safeFormat = (value: string | null | undefined) => {
  if (!value) return '—';
  try {
    return format(new Date(value), 'PP p');
  } catch {
    return value;
  }
};

export function WalletChargesList() {
  const router = useRouter();
  const sp = useSearchParams();

  const status = (sp?.get('status') ?? 'pending') as WalletChargeStatus | 'all';
  const paymentMethod = (sp?.get('payment_method') ?? '') as
    | WalletChargePaymentMethod
    | '';
  const brandId = sp?.get('brand_id') ?? '';
  const from = sp?.get('from') ?? '';
  const to = sp?.get('to') ?? '';
  const page = Number(sp?.get('page') ?? 1);

  const [brandIdInput, setBrandIdInput] = useState(brandId);
  const [fromInput, setFromInput] = useState(from);
  const [toInput, setToInput] = useState(to);
  const [methodInput, setMethodInput] = useState<string>(paymentMethod);

  useEffect(() => {
    setBrandIdInput(brandId);
    setFromInput(from);
    setToInput(to);
    setMethodInput(paymentMethod);
  }, [brandId, from, to, paymentMethod]);

  const [selected, setSelected] = useState<WalletCharge | null>(null);

  const queryParams = useMemo(() => {
    const p: Record<string, unknown> = { page, per_page: 25 };
    if (status && status !== 'all') p.status = status;
    if (paymentMethod) p.payment_method = paymentMethod;
    if (brandId) p.brand_id = brandId;
    if (from) p.from = from;
    if (to) p.to = to;
    return p;
  }, [page, status, paymentMethod, brandId, from, to]);

  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ['wallet-charges', queryParams],
    queryFn: () => fetchWalletCharges(queryParams),
    retry: false,
  });

  // KPI badge — pending count
  const kpiQueries = useQueries({
    queries: [
      {
        queryKey: ['wallet-charges-kpi', 'pending'],
        queryFn: () => fetchWalletCharges({ status: 'pending', per_page: 1 }),
        staleTime: 30_000,
        retry: false,
      },
      {
        queryKey: ['wallet-charges-kpi', 'approved'],
        queryFn: () => fetchWalletCharges({ status: 'approved', per_page: 1 }),
        staleTime: 30_000,
        retry: false,
      },
      {
        queryKey: ['wallet-charges-kpi', 'rejected'],
        queryFn: () => fetchWalletCharges({ status: 'rejected', per_page: 1 }),
        staleTime: 30_000,
        retry: false,
      },
    ],
  });

  const pendingCount = kpiQueries[0].data?.meta?.total ?? 0;
  const approvedCount = kpiQueries[1].data?.meta?.total ?? 0;
  const rejectedCount = kpiQueries[2].data?.meta?.total ?? 0;

  const updateUrl = (next: Record<string, string | null | undefined>) => {
    const params = new URLSearchParams(sp?.toString() ?? '');
    for (const [k, v] of Object.entries(next)) {
      if (v === null || v === undefined || v === '') params.delete(k);
      else params.set(k, v);
    }
    if (!('page' in next)) params.delete('page');
    router.push(`?${params.toString()}`);
  };

  const handleApply = () => {
    updateUrl({
      brand_id: brandIdInput,
      from: fromInput,
      to: toInput,
      payment_method: methodInput,
    });
  };

  const handleReset = () => {
    setBrandIdInput('');
    setFromInput('');
    setToInput('');
    setMethodInput('');
    router.push('?status=pending');
  };

  const items = data?.items ?? [];
  const meta = data?.meta;

  const tabBadge = (chip: StatusChip): string | null => {
    if (chip.value === 'pending' && pendingCount > 0)
      return String(pendingCount);
    if (chip.value === 'approved' && approvedCount > 0)
      return String(approvedCount);
    if (chip.value === 'rejected' && rejectedCount > 0)
      return String(rejectedCount);
    return null;
  };

  return (
    <div className="space-y-5">
      {/* Tab chips */}
      <div className="flex flex-wrap gap-2">
        {STATUS_CHIPS.map((c) => {
          const badge = tabBadge(c);
          return (
            <Button
              key={c.value}
              variant={status === c.value ? 'primary' : 'outline'}
              size="sm"
              onClick={() => updateUrl({ status: c.value })}
            >
              {c.label}
              {badge ? (
                <span
                  className={`ms-1.5 inline-flex items-center justify-center rounded-full px-1.5 text-[10px] font-semibold ${
                    status === c.value
                      ? 'bg-white/20 text-white'
                      : 'bg-muted text-foreground'
                  }`}
                >
                  {badge}
                </span>
              ) : null}
            </Button>
          );
        })}
      </div>

      {/* Filter bar */}
      <Card>
        <CardContent className="pt-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 items-end">
            <div>
              <Label className="text-xs">Brand ID</Label>
              <Input
                value={brandIdInput}
                onChange={(e) => setBrandIdInput(e.target.value)}
                placeholder="e.g. 174"
              />
            </div>
            <div>
              <Label className="text-xs">From</Label>
              <Input
                type="date"
                value={fromInput}
                onChange={(e) => setFromInput(e.target.value)}
              />
            </div>
            <div>
              <Label className="text-xs">To</Label>
              <Input
                type="date"
                value={toInput}
                onChange={(e) => setToInput(e.target.value)}
              />
            </div>
            <div>
              <Label className="text-xs">Method</Label>
              <Select
                value={methodInput || 'all'}
                onValueChange={(v) => setMethodInput(v === 'all' ? '' : v)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Any method" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Any method</SelectItem>
                  <SelectItem value="bank_transfer">Bank transfer</SelectItem>
                  <SelectItem value="card">Card</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex gap-2">
              <Button onClick={handleApply} className="flex-1">
                <Search className="size-4 mr-1" /> Apply
              </Button>
              <Button variant="outline" onClick={handleReset}>
                <X className="size-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Table */}
      <Card>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-16">
              <Spinner className="size-8 animate-spin text-primary" />
            </div>
          ) : error ? (
            <div className="p-6">
              <FetchError
                error={error}
                fallback="Could not load top-up requests"
              />
            </div>
          ) : items.length === 0 ? (
            <div className="py-16 text-center text-muted-foreground">
              {status === 'pending'
                ? 'No pending top-up requests. You\u2019re all caught up.'
                : 'No top-up requests match your filters.'}
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>#ID</TableHead>
                  <TableHead>Brand</TableHead>
                  <TableHead>Amount</TableHead>
                  <TableHead>Method</TableHead>
                  <TableHead>Submitted</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.map((c) => (
                  <TableRow
                    key={c.id}
                    className="cursor-pointer hover:bg-muted/40"
                    onClick={() => setSelected(c)}
                  >
                    <TableCell className="font-mono text-sm">#{c.id}</TableCell>
                    <TableCell>
                      <div className="font-medium">
                        {c.brand_name || `Brand #${c.brand_id}`}
                      </div>
                      {c.brand_email ? (
                        <div className="text-xs text-muted-foreground">
                          {c.brand_email}
                        </div>
                      ) : (
                        <div className="text-xs text-muted-foreground">
                          ID #{c.brand_id}
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="font-medium tabular-nums">
                      {formatMoney(c.amount, c.currency)}
                    </TableCell>
                    <TableCell>
                      <span className="inline-flex items-center gap-1.5 text-sm capitalize">
                        {c.payment_method === 'card' ? (
                          <CreditCard className="size-4 text-muted-foreground" />
                        ) : (
                          <Banknote className="size-4 text-muted-foreground" />
                        )}
                        {c.payment_method === 'bank_transfer'
                          ? 'Bank transfer'
                          : 'Card'}
                      </span>
                    </TableCell>
                    <TableCell className="text-sm whitespace-nowrap">
                      {safeFormat(c.created_at)}
                    </TableCell>
                    <TableCell>
                      <span
                        className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${STATUS_PILL[c.status]}`}
                      >
                        {c.status}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelected(c);
                        }}
                      >
                        View
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {/* Pagination */}
      {meta && meta.last_page > 1 ? (
        <div className="flex justify-center">
          <PaginationComponent
            currentPage={meta.current_page}
            totalPages={meta.last_page}
            onPageChange={(p) => updateUrl({ page: String(p) })}
          />
        </div>
      ) : null}

      {isFetching && !isLoading ? (
        <div className="text-xs text-muted-foreground text-center">
          Refreshing…
        </div>
      ) : null}

      <WalletChargeDetailSheet
        charge={selected}
        open={!!selected}
        onClose={() => setSelected(null)}
      />
    </div>
  );
}