"use client";

import { getPaymentHistory } from "@/pages/finance/lib/api";
import formatPrice from "@/shared/lib/formatPrice";
import { Button } from "@/shared/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/ui/table";
import { useQuery } from "@tanstack/react-query";
import { ChevronLeft, ChevronRightIcon, Loader2 } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export function PaymentHistory() {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);

  const { data, isLoading, isError } = useQuery({
    queryKey: ["payment-history", page],
    queryFn: () => getPaymentHistory({ page, page_size: 10 }),
  });

  if (isLoading)
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="animate-spin text-gray-500" size={40} />
      </div>
    );

  if (isError || !data)
    return (
      <Card className="p-6 text-center">
        <p className="text-red-500">Xatolik yuz berdi. Qayta urinib ko‘ring.</p>
      </Card>
    );

  const history = data.data;

  return (
    <Card className="bg-gray-900 text-white">
      <CardHeader>
        <CardTitle>{t("To'lovlar tarixi")}</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>{t("Agentlik")}</TableHead>
              <TableHead>{t("Telefon")}</TableHead>
              <TableHead>{t("Summasi")}</TableHead>
              <TableHead>{t("Izoh")}</TableHead>
              <TableHead>{t("Buxgalter")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {history.data.results.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.travel_agency.custom_id}</TableCell>
                <TableCell>{item.travel_agency.name}</TableCell>
                <TableCell>{item.travel_agency.phone}</TableCell>
                <TableCell>{formatPrice(item.amount, true)}</TableCell>
                <TableCell>{item.note || "-"}</TableCell>
                <TableCell>
                  {item.accountant.first_name} {item.accountant.last_name}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>

        {/* Pagination */}
        <div className="flex justify-between items-center mt-6">
          <p className="text-sm text-gray-400">
            {t("Sahifa")} {history.data.current_page} /{" "}
            {history.data.total_pages}
          </p>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={!history.data.links.previous}
              onClick={() => setPage((p) => Math.max(p - 1, 1))}
            >
              <ChevronLeft className="size-6" />
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={!history.data.links.next}
              onClick={() =>
                setPage((p) =>
                  Math.min(p + 1, history.data.total_pages || p + 1),
                )
              }
            >
              <ChevronRightIcon className="size-6" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}