"use client";

import { useState, useMemo } from "react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import {
  Eye,
  Ban,
  UserCheck,
  Search,
  ChevronLeft,
  ChevronRight,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Pencil,
  Key,
} from "lucide-react";

import type { Customer } from "@/roles/admin/services/customers.service";

/**
 * Props
 */
interface CustomerTableProps {
  customers: Customer[];

  onViewDetails: (customer: Customer) => void;

  onBlock: (customer: Customer) => void;

  onUnblock: (customer: Customer) => void;

  onEdit?: (customer: Customer) => void;
  onChangePassword?: (customer: Customer) => void;
}

type SortField = "name" | "email" | "phone";

type SortDirection = "asc" | "desc";

const ITEMS_PER_PAGE_OPTIONS = [10, 20, 50, 100];

export function CustomerTable({
  customers,

  onViewDetails,

  onBlock,

  onUnblock,

  onEdit,

  onChangePassword,
}: CustomerTableProps) {
  /**
   * STATE
   */
  const [searchQuery, setSearchQuery] = useState("");

  const [currentPage, setCurrentPage] = useState(1);

  const [itemsPerPage, setItemsPerPage] = useState<number>(10);

  const [sortField, setSortField] = useState<SortField>("name");

  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");

  /**
   * FILTER
   */
  const filteredData = useMemo(() => {
    if (!searchQuery.trim()) return customers;

    const query = searchQuery.toLowerCase();

    return customers.filter(
      (customer) =>
        `${customer.firstName} ${customer.lastName}`
          .toLowerCase()
          .includes(query) ||
        customer.email.toLowerCase().includes(query) ||
        customer.phone.toLowerCase().includes(query)
    );
  }, [customers, searchQuery]);

  console.log("customers", filteredData);

  /**
   * SORT
   */
  const sortedData = useMemo(() => {
    return [...filteredData].sort((a, b) => {
      let result = 0;

      switch (sortField) {
        case "name":
          result = `${a.firstName} ${a.lastName}`.localeCompare(
            `${b.firstName} ${b.lastName}`
          );
          break;

        case "email":
          result = a.email.localeCompare(b.email);
          break;

        case "phone":
          result = a.phone.localeCompare(b.phone);
          break;
      }

      return sortDirection === "asc" ? result : -result;
    });
  }, [filteredData, sortField, sortDirection]);

  /**
   * PAGINATION
   */
  const totalPages = Math.max(1, Math.ceil(sortedData.length / itemsPerPage));

  const paginatedData = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;

    return sortedData.slice(start, start + itemsPerPage);
  }, [sortedData, currentPage, itemsPerPage]);

  /**
   * SORT HANDLER
   */
  function handleSort(field: SortField) {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);

      setSortDirection("asc");
    }
  }

  /**
   * SORT ICON
   */
  function getSortIcon(field: SortField) {
    if (sortField !== field)
      return <ArrowUpDown className="ml-1 h-3 w-3 text-muted-foreground" />;

    return sortDirection === "asc" ? (
      <ArrowUp className="ml-1 h-3 w-3" />
    ) : (
      <ArrowDown className="ml-1 h-3 w-3" />
    );
  }

  const getStatusVariant = (status: string) => {
    switch (status?.toLowerCase()) {
      case "active":
        return "default"; // green
      case "pending":
        return "secondary"; // gray
      case "block":
        return "destructive"; // red
      case "reject":
        return "destructive";
      default:
        return "outline";
    }
  };

  /**
   * PAGE HANDLER
   */
  function handlePageChange(page: number) {
    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
  }

  /**
   * ITEMS PER PAGE HANDLER
   */
  function handleItemsPerPageChange(value: string) {
    setItemsPerPage(Number(value));

    setCurrentPage(1);
  }

  /**
   * UI
   */
  return (
    <div className="space-y-4">
      {/* SEARCH */}
      <div className="flex justify-between">
        <div className="relative max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />

          <Input
            placeholder="Search customers..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value);

              setCurrentPage(1);
            }}
            className="pl-9"
          />
        </div>

        {/* ITEMS PER PAGE */}
        <Select
          value={String(itemsPerPage)}
          onValueChange={handleItemsPerPageChange}
        >
          <SelectTrigger className="w-24">
            <SelectValue placeholder="10" />
          </SelectTrigger>

          <SelectContent>
            {ITEMS_PER_PAGE_OPTIONS.map((option) => (
              <SelectItem key={option} value={String(option)}>
                {option}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* TABLE */}
      <div className="border rounded-md">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>S.No</TableHead>

              <TableHead>
                <Button variant="ghost" onClick={() => handleSort("name")}>
                  Name
                  {getSortIcon("name")}
                </Button>
              </TableHead>

              <TableHead>
                <Button variant="ghost" onClick={() => handleSort("email")}>
                  Email
                  {getSortIcon("email")}
                </Button>
              </TableHead>

              <TableHead>
                <Button variant="ghost" onClick={() => handleSort("phone")}>
                  Phone
                  {getSortIcon("phone")}
                </Button>
              </TableHead>

              <TableHead>Status</TableHead>

              <TableHead className="text-center">Actions</TableHead>
            </TableRow>
          </TableHeader>

          <TableBody>
            {paginatedData.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-10">
                  No customers found
                </TableCell>
              </TableRow>
            ) : (
              paginatedData.map((customer, index) => (
                <TableRow key={customer.id}>
                  <TableCell>
                    {(currentPage - 1) * itemsPerPage + index + 1}
                  </TableCell>

                  <TableCell>
                    {customer.firstName} {customer.lastName}
                  </TableCell>

                  <TableCell>{customer.email}</TableCell>

                  <TableCell>{customer.phone}</TableCell>

                  {/* STATUS */}

                  <TableCell>
                    <Badge variant={getStatusVariant(customer.status)}>
                      {customer.status?.toUpperCase()}
                    </Badge>
                  </TableCell>

                  {/* ACTIONS */}
                  <TableCell className="text-center">
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => onViewDetails(customer)}
                      >
                        <Eye className="h-4 w-4 mr-1" />
                        View
                      </Button>

                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => onEdit && onEdit(customer)}
                      >
                        <Pencil className="h-4 w-4 mr-1" />
                        Edit
                      </Button>

                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() =>
                          onChangePassword && onChangePassword(customer)
                        }
                      >
                        <Key className="h-4 w-4 mr-1" />
                        Password
                      </Button>

                      {customer.status === "active" ? (
                        <Button
                          size="sm"
                          variant="destructive"
                          onClick={() => onBlock(customer)}
                        >
                          <Ban className="h-4 w-4 mr-1" />
                          Block
                        </Button>
                      ) : (
                        <Button
                          size="sm"
                          variant="default"
                          onClick={() => onUnblock(customer)}
                        >
                          <UserCheck className="h-4 w-4 mr-1" />
                          Unblock
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* PAGINATION */}
      <div className="flex justify-between items-center">
        <span className="text-sm">
          Page {currentPage} of {totalPages}
        </span>

        <div className="flex gap-2">
          <Button
            variant="outline"
            size="icon"
            disabled={currentPage === 1}
            onClick={() => handlePageChange(currentPage - 1)}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>

          <Button
            variant="outline"
            size="icon"
            disabled={currentPage === totalPages}
            onClick={() => handlePageChange(currentPage + 1)}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}