"use client";

import { useCallback, useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

interface CelRecord {
  id: number;
  eventtime: string;
  eventtype: string;
  cid_num: string;
  exten: string;
  context: string;
  channame: string;
  appname: string;
  uniqueid: string;
}

interface CelResponse {
  success: boolean;
  data: CelRecord[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
  };
}

export function CelEventsList({ uniqueid }: { uniqueid: string }) {
  const [records, setRecords] = useState<CelRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");

  const fetchEvents = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        uniqueid,
        limit: "50",
        sortBy: "eventtime",
        sortOrder: "asc",
      });
      if (search) params.append("search", search);
      const response = await fetch(`/api/reportes/cel?${params.toString()}`);
      const data = (await response.json()) as CelResponse;
      if (data.success) setRecords(data.data);
    } catch (error) {
      console.error("Error fetching CEL events:", error);
    } finally {
      setLoading(false);
    }
  }, [uniqueid, search]);

  useEffect(() => {
    void fetchEvents();
  }, [fetchEvents]);

  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        <Input
          placeholder="Buscar en eventos (tipo, app, canal)"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && fetchEvents()}
        />
      </div>
      <div className="overflow-x-auto rounded-lg border border-slate-200">
        <Table className="w-full">
          <TableHeader>
            <TableRow>
              <TableHead className="whitespace-nowrap">Tiempo</TableHead>
              <TableHead className="whitespace-nowrap">Tipo</TableHead>
              <TableHead className="whitespace-nowrap">CallerID</TableHead>
              <TableHead className="whitespace-nowrap">Extensión</TableHead>
              <TableHead className="whitespace-nowrap">Contexto</TableHead>
              <TableHead className="whitespace-nowrap">Canal</TableHead>
              <TableHead className="whitespace-nowrap">Aplicación</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              Array.from({ length: 6 }).map((_, i) => (
                <TableRow key={i}>
                  <TableCell colSpan={7}>
                    <Skeleton className="h-6 w-full" />
                  </TableCell>
                </TableRow>
              ))
            ) : records.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-slate-500">
                  No se encontraron eventos.
                </TableCell>
              </TableRow>
            ) : (
              records.map((ev) => (
                <TableRow key={ev.id}>
                  <TableCell className="whitespace-nowrap">
                    {new Date(ev.eventtime).toLocaleTimeString()}
                  </TableCell>
                  <TableCell className="whitespace-nowrap">
                    <Badge variant="outline">{ev.eventtype}</Badge>
                  </TableCell>
                  <TableCell className="whitespace-nowrap">{ev.cid_num}</TableCell>
                  <TableCell className="whitespace-nowrap">{ev.exten}</TableCell>
                  <TableCell className="whitespace-nowrap">{ev.context}</TableCell>
                  <TableCell className="max-w-[150px] truncate">{ev.channame}</TableCell>
                  <TableCell className="max-w-[150px] truncate">{ev.appname}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}