"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { type DateRange } from "react-day-picker";

import { ChevronLeft, ChevronRight, Search } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { DateRangePicker } from "@/components/ui/date-range-picker";

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;
  };
}

type SortKey =
  | "eventtime"
  | "eventtype"
  | "cid_num"
  | "exten"
  | "context"
  | "appname";

export function CelTable() {
  const [records, setRecords] = useState<CelRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);

  // Filtros avanzados
  const [search, setSearch] = useState("");
  const [uniqueid, setUniqueid] = useState("");
  const [eventtype, setEventtype] = useState("");
  const [cidNum, setCidNum] = useState("");
  const [exten, setExten] = useState("");
  const [context, setContext] = useState("");
  const [dateRange, setDateRange] = useState<DateRange | undefined>();

  // Ordenamiento
  const [sortBy, _setSortBy] = useState<SortKey>("eventtime");
  const [sortOrder, _setSortOrder] = useState<"asc" | "desc">("asc");

  const limit = 20;

  const queryString = useMemo(() => {
    const params = new URLSearchParams({
      page: page.toString(),
      limit: limit.toString(),
      sortBy,
      sortOrder,
    });
    if (search) params.append("search", search);
    if (uniqueid) params.append("uniqueid", uniqueid);
    if (eventtype && eventtype !== "all") params.append("eventtype", eventtype);
    if (cidNum) params.append("cid_num", cidNum);
    if (exten) params.append("exten", exten);
    if (context) params.append("context", context);
    if (dateRange?.from) params.append("dateFrom", dateRange.from.toISOString());
    if (dateRange?.to) params.append("dateTo", dateRange.to.toISOString());
    return params.toString();
  }, [
    page,
    limit,
    search,
    uniqueid,
    eventtype,
    cidNum,
    exten,
    context,
    dateRange,
    sortBy,
    sortOrder,
  ]);

  const fetchRecords = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/reportes/cel?${queryString}`);
      const data = (await response.json()) as CelResponse;
      if (data.success) {
        setRecords(data.data);
      }
    } catch (error) {
      console.error("Error fetching CEL records:", error);
    } finally {
      setLoading(false);
    }
  }, [queryString]);

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

  const handleSearch = () => {
    setPage(1);
    void fetchRecords();
  };

  // Agrupar eventos por uniqueid
  const groupedEvents = useMemo(() => {
    const groups = new Map<string, CelRecord[]>();
    
    records.forEach(record => {
      const key = record.uniqueid;
      if (!groups.has(key)) {
        groups.set(key, []);
      }
      groups.get(key)!.push(record);
    });

    // Convertir a array y ordenar por tiempo del primer evento
    return Array.from(groups.entries())
      .map(([uniqueid, events]) => ({
        uniqueid,
        events: events.sort((a, b) => new Date(a.eventtime).getTime() - new Date(b.eventtime).getTime()),
        firstEvent: events.reduce((earliest, current) => 
          new Date(current.eventtime) < new Date(earliest.eventtime) ? current : earliest
        )
      }))
      .sort((a, b) => new Date(b.firstEvent.eventtime).getTime() - new Date(a.firstEvent.eventtime).getTime());
  }, [records]);

  const getEventTypeColor = (eventtype: string) => {
    switch (eventtype) {
      case "CHAN_START":
        return "bg-green-100 text-green-800 border-green-200";
      case "CHAN_END":
        return "bg-red-100 text-red-800 border-red-200";
      case "APP_START":
        return "bg-blue-100 text-blue-800 border-blue-200";
      case "APP_END":
        return "bg-purple-100 text-purple-800 border-purple-200";
      case "BRIDGE_START":
        return "bg-yellow-100 text-yellow-800 border-yellow-200";
      case "BRIDGE_END":
        return "bg-orange-100 text-orange-800 border-orange-200";
      default:
        return "bg-gray-100 text-gray-800 border-gray-200";
    }
  };

  return (
    <div className="space-y-4">
      {/* Filtros */}
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        <div className="relative">
          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <Input
            placeholder="Buscar libre (tipo, app, canal, contexto)"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
            className="pl-9"
          />
        </div>
        <Input
          placeholder="UniqueID"
          value={uniqueid}
          onChange={(e) => setUniqueid(e.target.value)}
        />
        <Select value={eventtype} onValueChange={setEventtype}>
          <SelectTrigger>
            <SelectValue placeholder="Evento" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Todos</SelectItem>
            <SelectItem value="CHAN_START">CHAN_START</SelectItem>
            <SelectItem value="CHAN_END">CHAN_END</SelectItem>
            <SelectItem value="APP_START">APP_START</SelectItem>
            <SelectItem value="APP_END">APP_END</SelectItem>
            <SelectItem value="BRIDGE_START">BRIDGE_START</SelectItem>
            <SelectItem value="BRIDGE_END">BRIDGE_END</SelectItem>
          </SelectContent>
        </Select>
        <Input
          placeholder="CallerID (cid_num)"
          value={cidNum}
          onChange={(e) => setCidNum(e.target.value)}
        />
        <Input
          placeholder="Extensión"
          value={exten}
          onChange={(e) => setExten(e.target.value)}
        />
        <Input
          placeholder="Contexto"
          value={context}
          onChange={(e) => setContext(e.target.value)}
        />
        <div className="col-span-2 w-full">
          <DateRangePicker
            value={dateRange}
            onChange={setDateRange}
            label="Rango de fechas"
            placeholder="Seleccionar fechas"
            className="w-full"
          />
        </div>
        <div className="flex items-center gap-2 sm:col-span-2 lg:col-span-3 xl:col-span-6">
          <Button onClick={handleSearch} disabled={loading}>
            Aplicar filtros
          </Button>
        </div>
      </div>

      {/* Eventos agrupados por llamada */}
      <div className="space-y-4">
        {loading ? (
          Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="rounded-lg border border-slate-200 p-4">
              <Skeleton className="h-6 w-full mb-2" />
              <Skeleton className="h-4 w-3/4" />
            </div>
          ))
        ) : groupedEvents.length === 0 ? (
          <div className="text-center py-8 text-slate-500">
            No se encontraron eventos.
          </div>
        ) : (
          <Accordion type="multiple" className="space-y-2">
            {groupedEvents.map((group, _index) => (
              <AccordionItem 
                key={group.uniqueid} 
                value={group.uniqueid}
                className="border border-slate-200 rounded-lg"
              >
                <AccordionTrigger className="px-4 py-3 hover:no-underline">
                  <div className="flex items-center justify-between w-full mr-4">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-sm bg-slate-100 px-2 py-1 rounded">
                          {group.uniqueid.slice(-8)}
                        </span>
                        <Badge 
                          variant="outline" 
                          className={getEventTypeColor(group.firstEvent.eventtype)}
                        >
                          {group.firstEvent.eventtype}
                        </Badge>
                      </div>
                      <div className="text-left">
                        <p className="font-medium">
                          {group.firstEvent.cid_num} → {group.firstEvent.exten}
                        </p>
                        <p className="text-sm text-slate-500">
                          {new Date(group.firstEvent.eventtime).toLocaleString()}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="secondary">
                        {group.events.length} eventos
                      </Badge>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="px-4 pb-4">
                  <div className="space-y-3">
                    {group.events.map((event, eventIndex) => (
                      <div 
                        key={event.id}
                        className="flex items-center justify-between p-3 bg-slate-50 rounded-lg"
                      >
                        <div className="flex items-center gap-3">
                          <div className="flex items-center gap-2">
                            <span className="text-xs text-slate-500 font-mono">
                              {String(eventIndex + 1).padStart(2, '0')}
                            </span>
                            <Badge 
                              variant="outline" 
                              className={getEventTypeColor(event.eventtype)}
                            >
                              {event.eventtype}
                            </Badge>
                          </div>
                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-sm">
                            <div>
                              <span className="text-slate-500">Tiempo:</span>
                              <p className="font-mono">
                                {new Date(event.eventtime).toLocaleTimeString()}
                              </p>
                            </div>
                            <div>
                              <span className="text-slate-500">CallerID:</span>
                              <p>{event.cid_num}</p>
                            </div>
                            <div>
                              <span className="text-slate-500">Extensión:</span>
                              <p>{event.exten}</p>
                            </div>
                            <div>
                              <span className="text-slate-500">Contexto:</span>
                              <p>{event.context}</p>
                            </div>
                          </div>
                        </div>
                        <div className="text-right text-sm">
                          <div>
                            <span className="text-slate-500">Canal:</span>
                            <p className="font-mono text-xs">{event.channame}</p>
                          </div>
                          {event.appname && (
                            <div className="mt-1">
                              <span className="text-slate-500">App:</span>
                              <p className="text-xs">{event.appname}</p>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        )}
      </div>

      {/* Paginación */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-600">
          Mostrando {records.length} eventos
        </p>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page === 1 || loading}
          >
            <ChevronLeft className="h-4 w-4" /> Anterior
          </Button>
          <span className="flex items-center text-sm text-slate-600">
            Página {page}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage((p) => p + 1)}
            disabled={loading || records.length < limit}
          >
            Siguiente <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}