"use client";

import type { OrderHistoryData } from "@/pages/finance/lib/type";
import { Badge } from "@/shared/ui/badge";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/shared/ui/pagination";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/ui/table";
import { ArrowRight } from "lucide-react";
import { useState } from "react";

interface OrderHistoryTableProps {
  data: OrderHistoryData["data"];
  onPageChange: (page: number) => void;
  t: (key: string) => string;
}

export function OrderHistoryTable({
  data,
  onPageChange,
  t,
}: OrderHistoryTableProps) {
  const [currentPage, setCurrentPage] = useState(data.current_page);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    onPageChange(page);
  };

  const getStatusColor = (
    status: string,
  ): "default" | "secondary" | "destructive" | "outline" => {
    switch (status.toLowerCase()) {
      case "pending_payment":
        return "secondary";
      case "pending_confirmation":
        return "default";
      case "confirmed":
        return "default";
      case "completed":
        return "default";
      case "cancelled":
        return "destructive";
      default:
        return "outline";
    }
  };

  const formatStatus = (status: string) => {
    return status
      .split("_")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ");
  };

  return (
    <div className="w-full space-y-4">
      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t("Kim tomonidan")}</TableHead>
              <TableHead>{t("Lavozimi")}</TableHead>
              <TableHead>{t("O'zgartirilgan status")}</TableHead>
              <TableHead className="text-right">
                {t("O'zgartirgan sanasi")}
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.results.length > 0 ? (
              data.results.map((item) => (
                <TableRow key={item.id}>
                  <TableCell className="font-medium">
                    <div>
                      {item.user.first_name.length > 0 ||
                      item.user.last_name.length > 0 ? (
                        <p className="font-semibold">
                          {item.user.first_name} {item.user.last_name}
                        </p>
                      ) : (
                        <p>{t("No'malum")}</p>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="font-medium">
                    <div>
                      <p className="text-xs text-muted-foreground">
                        {item.user.role}
                      </p>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Badge variant={getStatusColor(item.old_status)}>
                        {formatStatus(t(item.old_status))}
                      </Badge>
                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
                      <Badge variant={getStatusColor(item.new_status)}>
                        {formatStatus(t(item.new_status))}
                      </Badge>
                    </div>
                  </TableCell>
                  <TableCell className="text-right text-sm text-muted-foreground">
                    {item.created_at}
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={4}
                  className="text-center text-muted-foreground py-8"
                >
                  {t("Hozircha tarix mavjud emas")}
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {data.total_pages > 1 && (
        <div className="flex justify-center">
          <Pagination>
            <PaginationContent>
              {data.links.previous && (
                <PaginationItem>
                  <PaginationPrevious
                    onClick={() => handlePageChange(currentPage - 1)}
                  />
                </PaginationItem>
              )}

              {Array.from({ length: data.total_pages }, (_, i) => i + 1).map(
                (page) => (
                  <PaginationItem key={page}>
                    <PaginationLink
                      isActive={page === currentPage}
                      onClick={() => handlePageChange(page)}
                    >
                      {page}
                    </PaginationLink>
                  </PaginationItem>
                ),
              )}

              {data.links.next && (
                <PaginationItem>
                  <PaginationNext
                    onClick={() => handlePageChange(currentPage + 1)}
                  />
                </PaginationItem>
              )}
            </PaginationContent>
          </Pagination>
        </div>
      )}
    </div>
  );
}
