'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { ChevronRight, CheckCircle } from 'lucide-react';
import { format } from 'date-fns';

interface Remittance {
  id: string;
  totalAmount: string;
  notes: string | null;
  status: string;
  createdAt: string;
  collectedBy?: { firstName: string; lastName: string };
  confirmedBy?: { firstName: string; lastName: string };
  payments?: Array<{ id: string; amount: string }>;
}

const peso = (v: string | number) =>
  '₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });

export default function RemittancesPage() {
  const qc = useQueryClient();

  const { data, isLoading } = useQuery<{ data: Remittance[]; total: number }>({
    queryKey: ['remittances'],
    queryFn: async () => {
      const res = await api.get('/api/v1/remittances?limit=30');
      return res.data;
    },
    staleTime: 30_000,
  });

  const confirm = useMutation({
    mutationFn: async (id: string) => {
      await api.patch(`/api/v1/remittances/${id}/confirm`);
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ['remittances'] }),
  });

  const remittances = data?.data ?? [];

  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">Cash collections submitted by collectors</p>
      </div>

      <Card className="border shadow-sm">
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b bg-slate-50">
                  <th className="text-left px-4 py-3 font-medium text-slate-500">Date</th>
                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Collector</th>
                  <th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
                  <th className="text-right px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Payments</th>
                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Confirmed By</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody>
                {isLoading
                  ? Array.from({ length: 6 }).map((_, i) => (
                      <tr key={i} className="border-b">
                        {[...Array(7)].map((_, j) => (
                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
                        ))}
                      </tr>
                    ))
                  : remittances.map((r) => (
                      <tr key={r.id} className="border-b hover:bg-slate-50 transition-colors">
                        <td className="px-4 py-3 text-slate-600">
                          {r.createdAt ? format(new Date(r.createdAt), 'MMM d, yyyy') : '—'}
                        </td>
                        <td className="px-4 py-3 text-slate-700 hidden md:table-cell">
                          {r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
                        </td>
                        <td className="px-4 py-3 text-right font-semibold text-slate-800">
                          {peso(r.totalAmount)}
                        </td>
                        <td className="px-4 py-3 text-right text-slate-600 hidden lg:table-cell">
                          {r.payments?.length ?? '—'}
                        </td>
                        <td className="px-4 py-3">
                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                            r.status === 'CONFIRMED'
                              ? 'bg-green-100 text-green-700'
                              : 'bg-yellow-100 text-yellow-700'
                          }`}>
                            {r.status}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-slate-600 hidden xl:table-cell">
                          {r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
                        </td>
                        <td className="px-4 py-3">
                          {r.status !== 'CONFIRMED' && (
                            <button
                              onClick={() => confirm.mutate(r.id)}
                              disabled={confirm.isPending}
                              className="flex items-center gap-1 text-xs font-medium text-green-700 hover:text-green-800"
                            >
                              <CheckCircle size={14} />
                              Confirm
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
              </tbody>
            </table>
          </div>
          {!isLoading && remittances.length === 0 && (
            <div className="text-center py-12 text-slate-400">No remittances yet</div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}