"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,
  XCircle,
  RotateCcw,
  CheckCircle,
  Search,
  ChevronLeft,
  ChevronRight,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Pencil,
  Key,
} from "lucide-react";
import type { Agent, AgentStatus } from "@/roles/admin/services/agents.service";

interface AgentTableProps {
  agents: Agent[];
  onViewDetails: (agent: Agent) => void;
  onApprove: (agent: Agent) => void;
  onReject: (agent: Agent) => void;
  onBlock: (agent: Agent) => void;
  onUnblock: (agent: Agent) => void;
  onRestore: (agent: Agent) => void;
  onEdit: (agent: Agent) => void;
  onChangePassword: (agent: Agent) => void;
}

type SortField = "name" | "email" | "phone";
type SortDirection = "asc" | "desc";

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

const statusConfig: Record<
  AgentStatus,
  {
    label: string;
    variant: "default" | "secondary" | "destructive" | "outline";
  }
> = {
  pending: { label: "Pending", variant: "secondary" },
  approved: { label: "Approved", variant: "default" },
  rejected: { label: "Rejected", variant: "outline" },
  blocked: { label: "Blocked", variant: "destructive" },
};

export function AgentTable({
  agents,
  onViewDetails,
  onApprove,
  onReject,
  onBlock,
  onUnblock,
  onRestore,
  onEdit,
  onChangePassword,
}: AgentTableProps) {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [sortField, setSortField] = useState<SortField>("name");
  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");

  // Filter data based on search
  const filteredData = useMemo(() => {
    if (!searchQuery.trim()) return agents;
    const query = searchQuery.toLowerCase();
    return agents.filter(
      (agent) =>
        `${agent.firstName} ${agent.lastName}`.toLowerCase().includes(query) ||
        agent.email.toLowerCase().includes(query) ||
        agent.phone.includes(query)
    );
  }, [agents, searchQuery]);

  // Sort data
  const sortedData = useMemo(() => {
    return [...filteredData].sort((a, b) => {
      let comparison = 0;
      switch (sortField) {
        case "name":
          comparison = `${a.firstName} ${a.lastName}`.localeCompare(
            `${b.firstName} ${b.lastName}`
          );
          break;
        case "email":
          comparison = a.email.localeCompare(b.email);
          break;
        case "phone":
          comparison = a.phone.localeCompare(b.phone);
          break;
      }
      return sortDirection === "asc" ? comparison : -comparison;
    });
  }, [filteredData, sortField, sortDirection]);

  // Paginate data
  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return sortedData.slice(startIndex, startIndex + itemsPerPage);
  }, [sortedData, currentPage, itemsPerPage]);

  const totalPages = Math.ceil(sortedData.length / itemsPerPage);

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortDirection("asc");
    }
  };

  const 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 handlePageChange = (page: number) => {
    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
  };

  const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(Number(value));
    setCurrentPage(1);
  };

  const renderActions = (agent: Agent) => {
    switch (agent.status) {
      case "pending":
        return (
          <>
            <Button
              variant="default"
              size="sm"
              onClick={() => onApprove(agent)}
              aria-label={`Approve ${agent.firstName} ${agent.lastName}`}
            >
              <CheckCircle className="mr-1 h-4 w-4" aria-hidden="true" />
              Approve
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={() => onReject(agent)}
              aria-label={`Reject ${agent.firstName} ${agent.lastName}`}
            >
              <XCircle className="mr-1 h-4 w-4" aria-hidden="true" />
              Reject
            </Button>
          </>
        );
      case "approved":
        return (
          <Button
            variant="destructive"
            size="sm"
            onClick={() => onBlock(agent)}
            aria-label={`Block ${agent.firstName} ${agent.lastName}`}
          >
            <Ban className="mr-1 h-4 w-4" aria-hidden="true" />
            Block
          </Button>
        );
      case "rejected":
        return (
          <Button
            variant="outline"
            size="sm"
            onClick={() => onRestore(agent)}
            aria-label={`Restore ${agent.firstName} ${agent.lastName} to pending`}
          >
            <RotateCcw className="mr-1 h-4 w-4" aria-hidden="true" />
            Restore
          </Button>
        );
      case "blocked":
        return (
          <Button
            variant="default"
            size="sm"
            onClick={() => onUnblock(agent)}
            aria-label={`Unblock ${agent.firstName} ${agent.lastName}`}
          >
            <UserCheck className="mr-1 h-4 w-4" aria-hidden="true" />
            Unblock
          </Button>
        );
      default:
        return null;
    }
  };

  return (
    <div className="space-y-4">
      {/* Search and filters */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="relative max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Search agents by name, email, or phone..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value);
              setCurrentPage(1);
            }}
            className="pl-9"
            aria-label="Search agents"
          />
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Show:</span>
          <Select
            value={String(itemsPerPage)}
            onValueChange={handleItemsPerPageChange}
          >
            <SelectTrigger className="w-20" aria-label="Items per page">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {ITEMS_PER_PAGE_OPTIONS.map((option) => (
                <SelectItem key={option} value={String(option)}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Results count */}
      <div className="flex items-center justify-between text-sm text-muted-foreground">
        <p>
          Showing{" "}
          {paginatedData.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0}{" "}
          to {Math.min(currentPage * itemsPerPage, sortedData.length)} of{" "}
          {sortedData.length} agents
        </p>
        {searchQuery && (
          <Badge variant="secondary" className="font-normal">
            Filtered from {agents.length} total
          </Badge>
        )}
      </div>

      {/* Table */}
      <div className="rounded-md border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-16 text-center">S.No</TableHead>
              <TableHead>
                <Button
                  variant="ghost"
                  size="sm"
                  className="-ml-3 h-8 data-[state=open]:bg-accent"
                  onClick={() => handleSort("name")}
                >
                  Name
                  {getSortIcon("name")}
                </Button>
              </TableHead>
              <TableHead className="hidden md:table-cell">
                <Button
                  variant="ghost"
                  size="sm"
                  className="-ml-3 h-8 data-[state=open]:bg-accent"
                  onClick={() => handleSort("email")}
                >
                  Email
                  {getSortIcon("email")}
                </Button>
              </TableHead>
              <TableHead className="hidden lg:table-cell">
                <Button
                  variant="ghost"
                  size="sm"
                  className="-ml-3 h-8 data-[state=open]:bg-accent"
                  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="h-24 text-center">
                  <p className="text-muted-foreground">
                    {searchQuery
                      ? `No agents found matching "${searchQuery}"`
                      : "No agents found."}
                  </p>
                </TableCell>
              </TableRow>
            ) : (
              paginatedData.map((agent, index) => {
                const status = statusConfig[agent.status];
                return (
                  <TableRow key={agent.id}>
                    <TableCell className="text-center font-medium text-muted-foreground">
                      {(currentPage - 1) * itemsPerPage + index + 1}
                    </TableCell>
                    <TableCell className="font-medium">
                      {agent.firstName} {agent.lastName}
                    </TableCell>
                    <TableCell className="hidden md:table-cell text-muted-foreground">
                      {agent.email}
                    </TableCell>
                    <TableCell className="hidden lg:table-cell text-muted-foreground">
                      {agent.phone}
                    </TableCell>
                    <TableCell>
                      <Badge variant={status.variant}>{status.label}</Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-2 flex-wrap">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => onViewDetails(agent)}
                          aria-label={`View details for ${agent.firstName} ${agent.lastName}`}
                        >
                          <Eye className="mr-1 h-4 w-4" aria-hidden="true" />
                          View
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => onEdit(agent)}
                          aria-label={`Edit ${agent.firstName} ${agent.lastName}`}
                        >
                          <Pencil className="mr-1 h-4 w-4" aria-hidden="true" />
                          Edit
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => onChangePassword(agent)}
                          aria-label={`Change password for ${agent.firstName} ${agent.lastName}`}
                        >
                          <Key className="mr-1 h-4 w-4" aria-hidden="true" />
                          Password 
                        </Button>
                        {renderActions(agent)}
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between">
          <p className="text-sm text-muted-foreground">
            Page {currentPage} of {totalPages}
          </p>
          <div className="flex items-center gap-1">
            <Button
              variant="outline"
              size="icon"
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              aria-label="Previous page"
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <div className="hidden sm:flex items-center gap-1">
              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                let pageNum: number;
                if (totalPages <= 5) {
                  pageNum = i + 1;
                } else if (currentPage <= 3) {
                  pageNum = i + 1;
                } else if (currentPage >= totalPages - 2) {
                  pageNum = totalPages - 4 + i;
                } else {
                  pageNum = currentPage - 2 + i;
                }
                return (
                  <Button
                    key={pageNum}
                    variant={currentPage === pageNum ? "default" : "outline"}
                    size="icon"
                    onClick={() => handlePageChange(pageNum)}
                    aria-label={`Go to page ${pageNum}`}
                    aria-current={currentPage === pageNum ? "page" : undefined}
                  >
                    {pageNum}
                  </Button>
                );
              })}
            </div>
            <Button
              variant="outline"
              size="icon"
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              aria-label="Next page"
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}