"use client";

import * as React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { ReactSelect } from "@/components/ui/react-select";
import { APILoader } from "@/components/shadix-ui/components/loader";

interface ProfileDealsTableProps {
  deals: any[];
  isLoading: boolean;
  stageNameMap: Map<string, string>;
}

export function ProfileDealsTable({
  deals,
  isLoading,
  stageNameMap,
}: ProfileDealsTableProps) {
  const [currentPage, setCurrentPage] = React.useState(1);
  const [rowsPerPage, setRowsPerPage] = React.useState(5);

  const totalPages = Math.max(1, Math.ceil(deals.length / rowsPerPage));
  const effectivePage = Math.min(
    Math.max(1, currentPage),
    totalPages,
  );
  const paginatedDeals = React.useMemo(() => {
    const start = (effectivePage - 1) * rowsPerPage;
    return deals.slice(start, start + rowsPerPage);
  }, [deals, effectivePage, rowsPerPage]);

  const rowsPerPageOptions = React.useMemo(
    () => [
      { value: "5", label: "5" },
      { value: "10", label: "10" },
      { value: "20", label: "20" },
    ],
    [],
  );

  return (
    <div className="rounded-2xl border border-[#eaecf0] bg-white shadow-sm p-6 sm:p-8">
      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between mb-4">
        <div>
          <h2 className="text-xl font-bold text-[#101828] font-['Lexend']">
            My Deals
          </h2>
          <p className="text-sm text-[#475467]">
            View the profile owner's deals in a table with tracking actions.
          </p>
        </div>
        <span className="inline-flex items-center rounded-full bg-[#f2f4f7] border border-[#d0d5dd] px-2.5 py-1 text-xs font-semibold text-[#344054]">
          {deals.length} deals
        </span>
      </div>

      <div className="overflow-x-auto overflow-y-visible">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Customer</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Stage</TableHead>
              <TableHead>Lead Owner</TableHead>
              <TableHead className="text-right">Tracking</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={6} className="py-12">
                  <APILoader />
                </TableCell>
              </TableRow>
            ) : deals.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-sm text-[#667085]">
                  No Deal Found.
                </TableCell>
              </TableRow>
            ) : (
              paginatedDeals.map((deal) => (
                <TableRow key={deal.id}>
                  <TableCell className="font-semibold text-[#101828]">
                    {deal.customerName ?? "Unnamed"}
                  </TableCell>
                  <TableCell>{deal.email ?? "—"}</TableCell>
                  <TableCell>{deal.leadStatus ?? "—"}</TableCell>
                  <TableCell>
                    {stageNameMap.get(deal.stage) || deal.stage || "—"}
                  </TableCell>
                  <TableCell>{deal?.owner?.name ?? "—"}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-2">
                      <Button size="sm" asChild>
                        <Link href={`/leads/${deal.id}/tracker`}>Tracking Page</Link>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {deals.length > 0 && !isLoading && (
        <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-[#eaecf0] pt-4">
          <div className="flex items-center gap-2">
            <span className="text-sm text-[#475467]">Rows per page:</span>
            <ReactSelect
              value={String(rowsPerPage)}
              onValueChange={(val) => {
                setRowsPerPage(Number(val));
                setCurrentPage(1);
              }}
              options={rowsPerPageOptions}
              triggerClassName="h-8 w-[70px] rounded-lg border-[#d0d5dd]"
            />
            <span className="text-sm text-[#475467] ml-2">
              Showing{" "}
              {Math.min((effectivePage - 1) * rowsPerPage + 1, deals.length)} to{" "}
              {Math.min(effectivePage * rowsPerPage, deals.length)} of {deals.length}
            </span>
          </div>

          {totalPages > 1 && (
            <Pagination className="mx-0 w-auto">
              <PaginationContent>
                <PaginationItem>
                  <PaginationPrevious
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      if (effectivePage > 1) setCurrentPage(effectivePage - 1);
                    }}
                    className={
                      effectivePage === 1
                        ? "pointer-events-none opacity-50"
                        : "cursor-pointer"
                    }
                  />
                </PaginationItem>

                {Array.from({ length: totalPages }, (_, i) => i + 1)
                  .filter((page) => {
                    if (totalPages <= 5) return true;
                    return (
                      page === 1 ||
                      page === totalPages ||
                      Math.abs(page - effectivePage) <= 1
                    );
                  })
                  .map((page, i, arr) => {
                    const showEllipsis = i > 0 && page - arr[i - 1] > 1;
                    return (
                      <React.Fragment key={page}>
                        {showEllipsis && (
                          <PaginationItem>
                            <PaginationEllipsis />
                          </PaginationItem>
                        )}
                        <PaginationItem>
                          <PaginationLink
                            href="#"
                            isActive={effectivePage === page}
                            onClick={(e) => {
                              e.preventDefault();
                              setCurrentPage(page);
                            }}
                            className="cursor-pointer"
                          >
                            {page}
                          </PaginationLink>
                        </PaginationItem>
                      </React.Fragment>
                    );
                  })}

                <PaginationItem>
                  <PaginationNext
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      if (effectivePage < totalPages) {
                        setCurrentPage(effectivePage + 1);
                      }
                    }}
                    className={
                      effectivePage === totalPages
                        ? "pointer-events-none opacity-50"
                        : "cursor-pointer"
                    }
                  />
                </PaginationItem>
              </PaginationContent>
            </Pagination>
          )}
        </div>
      )}
    </div>
  );
}