'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { api } from '@/lib/api';
import { format } from 'date-fns';

interface Remittance {
  id: string;
  totalAmount: number;
  status: string;
  notes?: string;
  createdAt: string;
  collectedBy?: { firstName: string; lastName: string };
  confirmedBy?: { firstName: string; lastName: string };
}

const STATUS_COLORS: Record<string, string> = {
  PENDING: 'bg-yellow-100 text-yellow-700',
  CONFIRMED: 'bg-emerald-100 text-emerald-700',
  REJECTED: 'bg-red-100 text-red-700',
};

export default function RemittancesPage() {
  const [page, setPage] = useState(1);
  const limit = 20;

  const { data, isLoading } = useQuery({
    queryKey: ['remittances', page],
    queryFn: async () => {
      const res = await api.get(`/api/v1/remittances?page=${page}&limit=${limit}`);
      return res.data;
    },
  });

  const items: Remittance[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? items.length;

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-800">Remittances</h1>
        <p className="text-slate-500 text-sm mt-1">Collector cash remittance records</p>
      </div>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Date</TableHead>
                <TableHead>Collector</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Total Amount</TableHead>
                <TableHead>Confirmed By</TableHead>
                <TableHead>Notes</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                Array.from({ length: 6 }).map((_, i) => (
                  <TableRow key={i}>{Array.from({ length: 6 }).map((_, j) => (
                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
                  ))}</TableRow>
                ))
              ) : items.length === 0 ? (
                <TableRow><TableCell colSpan={6} className="text-center py-12 text-slate-400">No remittances yet</TableCell></TableRow>
              ) : (
                items.map((r) => (
                  <TableRow key={r.id} className="hover:bg-slate-50">
                    <TableCell className="text-sm text-slate-500">
                      {format(new Date(r.createdAt), 'MMM d, yyyy')}
                    </TableCell>
                    <TableCell className="text-sm font-medium">
                      {r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
                    </TableCell>
                    <TableCell>
                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[r.status] ?? 'bg-gray-100 text-gray-600'}`}>
                        {r.status}
                      </span>
                    </TableCell>
                    <TableCell className="text-right font-bold text-emerald-700">
                      ₱{Number(r.totalAmount).toLocaleString()}
                    </TableCell>
                    <TableCell className="text-sm text-slate-500">
                      {r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
                    </TableCell>
                    <TableCell className="text-xs text-slate-400 max-w-[150px] truncate">
                      {r.notes ?? '—'}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}