"use client";

import { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import { TableColumn } from "react-data-table-component";
import { Clock, RefreshCw, CheckCircle, XCircle } from "lucide-react";

import CustomDataTable from "@/src/components/admin/tables/customTableComponent";
import StatusCard from "@/src/components/shared/StatusCard";
import { useStateContext } from "@/src/context/admin/StateContext";
import { getTicketStatusCounts } from "@/src/services/admin/services";
import TicketFilters from "./TicketFilters";

import Button from "@/src/components/admin/ui/button/Button";



export type TicketRow = [
  number, // Sr No
  string, // Ticket No
  string, // Application Type
  string, // Title
  string, // Status
  string  // Created On
];

export default function TicketList() {
  const [filteredUrl, setFilteredUrl] = useState("/ticket/ajax/ticket-list");
  const [ticketCounts, setTicketCounts] = useState({
    PENDING: 0,
    IN_PROGRESS: 0,
    SOLVED: 0,
    CLOSED: 0,
  });
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  const { refresh } = useStateContext();

  // Load ticket status counts for status cards (no filters applied)
  useEffect(() => {
    const loadTicketCounts = async () => {
      try {
        setLoading(true);
        
        // Get simple counts without any filter parameters
        const response = await getTicketStatusCounts();
        setTicketCounts(response.data.data || {
          PENDING: 0,
          IN_PROGRESS: 0,
          SOLVED: 0,
          CLOSED: 0,
        });
      } catch (error) {
        console.error("Error loading ticket counts:", error);
        setTicketCounts({
          PENDING: 0,
          IN_PROGRESS: 0,
          SOLVED: 0,
          CLOSED: 0,
        });
      } finally {
        setLoading(false);
      }
    };
    
    loadTicketCounts();
  }, [refresh]); // Only refresh dependency, no filteredUrl

  const handleViewTicket = (ticketId: number) => {
    router.push(`/admin/view-ticket?id=${ticketId}`);
  };

  const columns: TableColumn<any>[] = [
    {
      name: "Sr. No.",
      selector: (row) => row.serial,
      width: "80px",
      
    },
    {
      name: "Ticket No",
      selector: (row) => row.ticket_no,
      
      width: "180px",
    },
    {
      name: "Application Type",
      selector: (row) => row.application_name,
      
      width: "180px",
    },
    {
      name: "Title",
      selector: (row) => row.title,
      
      wrap: true,
    },
    {
      name: "Status",
      cell: (row) => (
        <span
          className={`px-3 py-1 rounded-md text-xs font-medium whitespace-nowrap ${
            row.status === "PENDING"
              ? "bg-yellow-100 text-yellow-800"
              : row.status === "IN_PROGRESS"
              ? "bg-blue-100 text-blue-800"
              : row.status === "SOLVED"
              ? "bg-green-100 text-green-800"
              : "bg-gray-100 text-gray-800"
          }`}
        >
          {row.status}
        </span>
      ),
      width: "150px",
      
    },
    {
      name: "View",
      cell: (row) => (
        <div className="flex justify-center">
          <Button
            onClick={() => handleViewTicket(row.id)}
            title="View Ticket"
          >
            View
          </Button>
        </div>
      ),
      width: "150px",
      ignoreRowClick: true,
    },
    {
      name: "Created On",
      selector: (row) => row.created_on,
      
      width: "220px",
    },
  ];

  return (
    <div className="space-y-6">
      {/* Ticket Status Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatusCard
          title="Pending Tickets"
          value={loading ? "..." : ticketCounts.PENDING}
          icon={Clock}
          bgColor="bg-yellow-200"
          textColor="text-yellow-800"
        />
        <StatusCard
          title="In Progress Tickets"
          value={loading ? "..." : ticketCounts.IN_PROGRESS}
          icon={RefreshCw}
          bgColor="bg-blue-200"
          textColor="text-blue-800"
        />
        <StatusCard
          title="Solved Tickets"
          value={loading ? "..." : ticketCounts.SOLVED}
          icon={CheckCircle}
          bgColor="bg-green-200"
          textColor="text-green-800"
        />
        <StatusCard
          title="Closed Tickets"
          value={loading ? "..." : ticketCounts.CLOSED}
          icon={XCircle}
          bgColor="bg-gray-200"
          textColor="text-gray-800"
        />
      </div>

      {/* Filters */}
      <TicketFilters
        filteredUrl={filteredUrl}
        setFilteredUrl={setFilteredUrl}
      />

      {/* Data Table */}
      <div className="table-container max-w-full">
        <CustomDataTable
          tableName="Tickets"
          url={filteredUrl}
          columns={columns}
          refresh={refresh}
           search={true}
        />
      </div>
    </div>
  );
}