"use client";

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

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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import { CelEventsList } from "./CelEventsList";
import { AudioPlayerModal } from "./AudioPlayerModal";
import { DateRangePicker } from "@/components/ui/date-range-picker";

interface CdrRecord {
  calldate: string;
  src: string;
  dst: string;
  disposition: string;
  duration: number;
  billsec: number;
  accountcode: string;
  uniqueid: string;
  recording_path: string | null;
}

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

type SortKey =
  | "calldate"
  | "duration"
  | "billsec"
  | "src"
  | "dst"
  | "accountcode"
  | "disposition";

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

  // Filtros avanzados
  const [search, setSearch] = useState("");
  const [srcFilter, setSrcFilter] = useState("");
  const [dstFilter, setDstFilter] = useState("");
  const [accountcodeFilter, setAccountcodeFilter] = useState("");
  const [dispositionFilter, setDispositionFilter] = useState<string>("");
  const [dateRange, setDateRange] = useState<DateRange | undefined>();

  // Ordenamiento
  const [sortBy, setSortBy] = useState<SortKey>("calldate");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");

  // Modal CEL
  const [openCelModal, setOpenCelModal] = useState(false);
  const [selectedUniqueId, setSelectedUniqueId] = useState<string | null>(null);

  // Modal Audio Player
  const [openAudioModal, setOpenAudioModal] = useState(false);
  const [selectedRecording, setSelectedRecording] = useState<{
    url: string;
    callData: CdrRecord;
  } | null>(null);

  const limit = 15;

  const queryString = useMemo(() => {
    const params = new URLSearchParams({
      page: page.toString(),
      limit: limit.toString(),
      sortBy,
      sortOrder,
    });

    if (search) params.append("search", search);
    if (srcFilter) params.append("src", srcFilter);
    if (dstFilter) params.append("dst", dstFilter);
    if (accountcodeFilter) params.append("accountcode", accountcodeFilter);
    if (dispositionFilter && dispositionFilter !== "all")
      params.append("disposition", dispositionFilter);
    if (dateRange?.from) params.append("dateFrom", dateRange.from.toISOString());
    if (dateRange?.to) params.append("dateTo", dateRange.to.toISOString());

    return params.toString();
  }, [
    page,
    limit,
    search,
    srcFilter,
    dstFilter,
    accountcodeFilter,
    dispositionFilter,
    dateRange,
    sortBy,
    sortOrder,
  ]);

  const fetchRecords = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/reportes/cdr?${queryString}`);
      const data = (await response.json()) as CdrResponse;

      if (data.success) {
        setRecords(data.data);
        // Actualiza totalPages si fuese necesario.
      }
    } catch (error) {
      console.error("Error fetching CDR records:", error);
    } finally {
      setLoading(false);
    }
  }, [queryString]);

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

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

  const toggleSort = (key: SortKey) => {
    if (sortBy === key) {
      setSortOrder((p) => (p === "asc" ? "desc" : "asc"));
    } else {
      setSortBy(key);
      setSortOrder("desc");
    }
  };

  const getDispositionBadge = (disposition: string) => {
    switch (disposition) {
      case "ANSWERED":
        return <Badge className="bg-green-500">Contestada</Badge>;
      case "NO ANSWER":
        return <Badge variant="secondary">No Contestada</Badge>;
      case "BUSY":
        return (
          <Badge variant="destructive" className="bg-yellow-500">
            Ocupado
          </Badge>
        );
      case "FAILED":
        return <Badge variant="destructive">Fallida</Badge>;
      default:
        return <Badge variant="outline">{disposition}</Badge>;
    }
  };

  const openEvents = (uniqueid: string) => {
    setSelectedUniqueId(uniqueid);
    setOpenCelModal(true);
  };

  const openAudioPlayer = (recordingUrl: string, callData: CdrRecord) => {
    setSelectedRecording({ url: recordingUrl, callData });
    setOpenAudioModal(true);
  };

  return (
    <div className="space-y-4">
      {/* Filtros avanzados */}
      <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 (origen, destino, tipo)"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
            className="pl-9"
          />
        </div>
        <Input
          placeholder="Origen (src)"
          value={srcFilter}
          onChange={(e) => setSrcFilter(e.target.value)}
        />
        <Input
          placeholder="Destino (dst)"
          value={dstFilter}
          onChange={(e) => setDstFilter(e.target.value)}
        />
        <Input
          placeholder="Tipo (accountcode)"
          value={accountcodeFilter}
          onChange={(e) => setAccountcodeFilter(e.target.value)}
        />
        <Select value={dispositionFilter} onValueChange={setDispositionFilter}>
          <SelectTrigger>
            <SelectValue placeholder="Resultado" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Todos</SelectItem>
            <SelectItem value="ANSWERED">Contestada</SelectItem>
            <SelectItem value="NO ANSWER">No Contestada</SelectItem>
            <SelectItem value="BUSY">Ocupado</SelectItem>
            <SelectItem value="FAILED">Fallida</SelectItem>
          </SelectContent>
        </Select>
        <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>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="ml-auto">
                Ordenar por <ChevronDown className="ml-2 h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Campo</DropdownMenuLabel>
              <DropdownMenuItem onClick={() => setSortBy("calldate")}>
                Fecha
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("src")}>
                Origen
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("dst")}>
                Destino
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("duration")}>
                Duración Total
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("billsec")}>
                Tiempo de Voz
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("accountcode")}>
                Tipo
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => setSortOrder("asc")}>
                Ascendente
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortOrder("desc")}>
                Descendente
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* Tabla */}
      <div className="overflow-x-auto rounded-lg border border-slate-200">
        <Table className="min-w-[768px]">
          <TableHeader>
            <TableRow>
              <TableHead
                onClick={() => toggleSort("calldate")}
                className="cursor-pointer"
              >
                Fecha y Hora
              </TableHead>
              <TableHead
                onClick={() => toggleSort("src")}
                className="cursor-pointer"
              >
                Origen
              </TableHead>
              <TableHead
                onClick={() => toggleSort("dst")}
                className="cursor-pointer"
              >
                Destino
              </TableHead>
              <TableHead
                onClick={() => toggleSort("disposition")}
                className="cursor-pointer"
              >
                Resultado
              </TableHead>
              <TableHead
                onClick={() => toggleSort("duration")}
                className="cursor-pointer"
              >
                Duración (Total/Voz)
              </TableHead>
              <TableHead
                onClick={() => toggleSort("accountcode")}
                className="cursor-pointer"
              >
                Tipo
              </TableHead>
              <TableHead>Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              Array.from({ length: 5 }).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 registros.
                </TableCell>
              </TableRow>
            ) : (
              records.map((rec) => (
                <TableRow key={rec.uniqueid}>
                  <TableCell>
                    {new Date(rec.calldate).toLocaleString()}
                  </TableCell>
                  <TableCell className="font-medium">{rec.src}</TableCell>
                  <TableCell>{rec.dst}</TableCell>
                  <TableCell>{getDispositionBadge(rec.disposition)}</TableCell>
                  <TableCell>
                    {rec.duration}s / {rec.billsec}s
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{rec.accountcode || "N/A"}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => openEvents(rec.uniqueid)}
                      >
                        Ver eventos
                      </Button>
                      {rec.recording_path ? (
                        <Button 
                          variant="secondary" 
                          size="sm"
                          onClick={() => openAudioPlayer(rec.recording_path!, rec)}
                        >
                          Escuchar grabación
                        </Button>
                      ) : null}
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Paginación simple (basada en recuento mostrado) */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-600">
          Mostrando {records.length} registros
        </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>

      {/* Modal de eventos CEL */}
      <Dialog open={openCelModal} onOpenChange={setOpenCelModal}>
        <DialogContent className="max-w-3xl w-[95vw] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Eventos CEL</DialogTitle>
          </DialogHeader>
          {selectedUniqueId && <CelEventsList uniqueid={selectedUniqueId} />}
        </DialogContent>
      </Dialog>

      {/* Modal del reproductor de audio */}
      {selectedRecording && (
        <AudioPlayerModal
          isOpen={openAudioModal}
          onClose={() => {
            setOpenAudioModal(false);
            setSelectedRecording(null);
          }}
          recordingUrl={selectedRecording.url}
          callData={{
            calldate: selectedRecording.callData.calldate,
            src: selectedRecording.callData.src,
            dst: selectedRecording.callData.dst,
            duration: selectedRecording.callData.duration,
            disposition: selectedRecording.callData.disposition,
          }}
        />
      )}
    </div>
  );
}