"use client";

import { useState, useEffect } from "react";
import { Button } from "../../../../../src/components/ui/button";
import { Input } from "../../../../../src/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../../../src/components/ui/table";
import { 
  Eye, 
  Search, 
  ChevronLeft, 
  ChevronRight,
  ArrowUp,
  ArrowDown,
  ArrowUpDown 
} from "lucide-react";
import { toast } from "sonner";
import { useDebounce } from "../../../../../src/hooks/useDebounce";

interface Lead {
  _id: string;
  name: string;
  phone_number: string;
  createdAt: string;
}

type SortField = "name" | "phone_number" | "createdAt";

export default function LeadsManagement() {
  const [leads, setLeads] = useState<Lead[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const debouncedSearch = useDebounce(search, 400);

  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);

  const [pagination, setPagination] = useState({
    total: 0,
    pages: 0,
    page: 1,
    limit: 10,
  });

  const [isViewOpen, setIsViewOpen] = useState(false);
  const [viewing, setViewing] = useState<Lead | null>(null);

  const [sortField, setSortField] = useState<SortField>("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");

  useEffect(() => {
    fetchLeads();
  }, [debouncedSearch, page, limit, sortField, sortOrder]);

  const fetchLeads = async () => {
    try {
      setLoading(true);

      const params = new URLSearchParams({
        page: page.toString(),
        limit: limit.toString(),
        ...(debouncedSearch && { search: debouncedSearch }),
        sort: sortField,
        order: sortOrder,
      });

      const res = await fetch(`/api/leads?${params}`);
      const data = await res.json();

      if (data.success) {
        setLeads(data.data || []);
        setPagination(
          data.pagination || {
            total: 0,
            pages: 0,
            page,
            limit,
          }
        );
      } else {
        toast.error(data.error || "Failed to load leads");
      }
    } catch (err) {
      console.error(err);
      toast.error("Error fetching leads");
    } finally {
      setLoading(false);
    }
  };

  const handlePageChange = (newPage: number) => {
    setPage(newPage);
  };

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortOrder(field === "createdAt" ? "desc" : "asc");
    }
    setPage(1); // Reset to first page when sorting changes
  };

  const getSortIcon = (field: SortField) => {
    if (sortField !== field) {
      return <ArrowUpDown className="h-4 w-4 text-gray-400" />;
    }
    return sortOrder === "asc" ? (
      <ArrowUp className="h-4 w-4" />
    ) : (
      <ArrowDown className="h-4 w-4" />
    );
  };

  return (
    <div className="space-y-6">
      {/* SEARCH AND FILTERS */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
          <Input
            placeholder="Search by name or phone..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            className="pl-10"
          />
        </div>

        <select
          value={limit}
          onChange={(e) => {
            setLimit(Number(e.target.value));
            setPage(1);
          }}
          className="px-3 py-2.5 rounded-md border"
        >
          <option value={6}>6</option>
          <option value={10}>10</option>
          <option value={20}>20</option>
          <option value={50}>50</option>
        </select>
      </div>

      {/* TABLE */}
      <div className="rounded-md border">
        <Table>
          <TableHeader className="bg-gray-100 dark:bg-gray-700">
            <TableRow>
              <TableHead 
                className="text-center cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                onClick={() => handleSort("createdAt")}
              >
                <div className="flex items-center justify-center gap-2">
                  ID
                  {getSortIcon("createdAt")}
                </div>
              </TableHead>
              
              <TableHead 
                className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                onClick={() => handleSort("name")}
              >
                <div className="flex items-center gap-2">
                  Name
                  {getSortIcon("name")}
                </div>
              </TableHead>
              
              <TableHead 
                className="cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                onClick={() => handleSort("phone_number")}
              >
                <div className="flex items-center gap-2">
                  Phone Number
                  {getSortIcon("phone_number")}
                </div>
              </TableHead>
              
              <TableHead className="text-center">Created At</TableHead>
              {/* <TableHead className="text-center">Actions</TableHead> */}
            </TableRow>
          </TableHeader>

          <TableBody className="bg-gray-100 dark:bg-gray-800">
            {loading ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : leads.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-8">
                  No leads found
                </TableCell>
              </TableRow>
            ) : (
              leads.map((l, index) => (
                <TableRow key={l._id}>
                  <TableCell className="text-center">
                    {(page - 1) * limit + index + 1}
                  </TableCell>

                  <TableCell className="font-medium">{l.name}</TableCell>

                  <TableCell>{l.phone_number}</TableCell>

                  <TableCell className="text-center">
                    {new Date(l.createdAt).toLocaleString()}
                  </TableCell>

                  {/* <TableCell className="text-center">
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => {
                        setViewing(l);
                        setIsViewOpen(true);
                      }}
                    >
                      <Eye className="w-4 h-4" />
                    </Button>
                  </TableCell> */}
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* PAGINATION */}
      {pagination.pages > 1 && (
        <div className="mt-4 flex items-center justify-between flex-wrap gap-4">
          <div className="text-sm text-gray-500">
            Showing {(page - 1) * limit + 1} to{" "}
            {Math.min(page * limit, pagination.total)} of {pagination.total}
          </div>

          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => handlePageChange(page - 1)}
              disabled={page === 1}
            >
              <ChevronLeft className="h-4 w-4" />
              Previous
            </Button>

            <span className="text-sm">
              Page {page} of {pagination.pages}
            </span>

            <Button
              variant="outline"
              size="sm"
              onClick={() => handlePageChange(page + 1)}
              disabled={page === pagination.pages}
            >
              Next
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}