"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  Headphones,
  Search,
  RefreshCw,
  Users,
  Clock,
  CheckCircle2,
  AlertTriangle,
  UserX,
  UserCheck,
  Calendar,
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Filter,
  X,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";

import {
  CallCenterAPI,
  type CallCenterTicket,
  type CallCenterStats,
  type PendingFollowup,
} from "@/apis/CallCenterAPI";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";
import { createPanelPageUrl } from "@/utils";

// ─── Constantes ───────────────────────────────────────────────────────────────

const STATUS_LABELS: Record<string, string> = {
  abierto: "Abierto",
  en_proceso: "En Proceso",
  pendiente_cliente: "Pdte. Cliente",
  resuelto: "Resuelto",
  cerrado: "Cerrado",
};

const STATUS_COLORS: Record<string, string> = {
  abierto: "bg-blue-100 text-blue-800",
  en_proceso: "bg-yellow-100 text-yellow-800",
  pendiente_cliente: "bg-orange-100 text-orange-800",
  resuelto: "bg-green-100 text-green-800",
  cerrado: "bg-slate-100 text-slate-600",
};

const PRIORITY_LABELS: Record<string, string> = {
  low: "Baja",
  medium: "Media",
  high: "Alta",
  urgent: "Urgente",
};

const PRIORITY_COLORS: Record<string, string> = {
  low: "bg-slate-100 text-slate-500",
  medium: "bg-blue-100 text-blue-700",
  high: "bg-orange-100 text-orange-700",
  urgent: "bg-red-100 text-red-700",
};

const TYPE_LABELS: Record<string, string> = {
  consulta: "Consulta",
  reclamo: "Reclamo",
  solicitud_pedido: "Sol. Pedido",
  seguimiento: "Seguimiento",
  otro: "Otro",
};

// ─── Sub-componente: tarjeta de indicador ─────────────────────────────────────

interface StatCardProps {
  label: string;
  value: number;
  icon: React.ReactNode;
  colorClass: string;
  onClick?: () => void;
  active?: boolean;
}

function StatCard({ label, value, icon, colorClass, onClick, active }: StatCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`w-full text-left rounded-xl border p-4 transition-all hover:shadow-md ${
        active ? "ring-2 ring-blue-400 border-blue-300 bg-blue-50/60" : "bg-white hover:bg-slate-50"
      }`}
    >
      <div className="flex items-center justify-between">
        <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${colorClass}`}>
          {icon}
        </div>
        <span className="text-2xl font-bold text-slate-800">{value}</span>
      </div>
      <p className="mt-2 text-xs font-medium text-slate-500">{label}</p>
    </button>
  );
}

// ─── Helper nombre completo ───────────────────────────────────────────────────

function fullName(user: { name?: string; last_name?: string; user_name?: string; email?: string } | null | undefined): string {
  if (!user) return "—";
  const composed = [user.name, user.last_name].filter(Boolean).join(" ").trim();
  return composed || user.user_name || user.email || "—";
}

// ─── Modal de asignación ──────────────────────────────────────────────────────

interface AssignModalProps {
  ticket: CallCenterTicket | null;
  supervisors: any[];
  onClose: () => void;
  onAssign: (ticketId: number, userId: number) => Promise<void>;
}

function AssignModal({ ticket, supervisors, onClose, onAssign }: AssignModalProps) {
  const [selectedUser, setSelectedUser] = useState<string>("");
  const [isSaving, setIsSaving] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!ticket || !selectedUser) return;
    setIsSaving(true);
    try {
      await onAssign(ticket.id, Number(selectedUser));
      onClose();
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <Dialog open={!!ticket} onOpenChange={onClose}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle className="text-base">Asignar Responsable</DialogTitle>
        </DialogHeader>
        {ticket && (
          <div className="space-y-1 mb-2">
            <p className="text-xs text-slate-500">{ticket.ticket_number}</p>
            <p className="text-sm font-medium text-slate-800">{ticket.subject}</p>
          </div>
        )}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-1">
            <Label className="text-xs">Responsable</Label>
            <Select value={selectedUser} onValueChange={setSelectedUser}>
              <SelectTrigger>
                <SelectValue placeholder="Seleccionar..." />
              </SelectTrigger>
              <SelectContent>
                {supervisors.map((u) => (
                  <SelectItem key={u.id} value={String(u.id)}>
                    {fullName(u)} — {u.email}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" size="sm" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit" size="sm" disabled={!selectedUser || isSaving}>
              {isSaving ? "Asignando..." : "Asignar"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

// ─── Componente principal ────────────────────────────────────────────────────

export default function CallCenterDashboard() {
  const router = useRouter();
  const { selectedCompany } = useCompanyStore();
  const selectedCompanyId = Number(selectedCompany?.id);
  const idcompany = Number.isFinite(selectedCompanyId) && selectedCompanyId > 0 ? selectedCompanyId : 1;

  // Stats
  const [stats, setStats] = useState<CallCenterStats>({ sin_asignar: 0, pendientes: 0, en_proceso: 0, cerrados: 0, vencidos: 0, mios: 0 });
  const [isLoadingStats, setIsLoadingStats] = useState(false);

  // Tickets list
  const [tickets, setTickets] = useState<CallCenterTicket[]>([]);
  const [total, setTotal] = useState(0);
  const [isLoadingTickets, setIsLoadingTickets] = useState(false);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(15);

  // Pending followups
  const [pendingFollowups, setPendingFollowups] = useState<PendingFollowup[]>([]);
  const [isLoadingFollowups, setIsLoadingFollowups] = useState(false);

  // Filters
  const [filterStatus, setFilterStatus] = useState("all");
  const [filterPriority, setFilterPriority] = useState("all");
  const [filterType, setFilterType] = useState("all");
  const [filterAssignedTo, setFilterAssignedTo] = useState("all");
  const [filterCustomer, setFilterCustomer] = useState("");
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo, setFilterDateTo] = useState("");
  const [activeQuickFilter, setActiveQuickFilter] = useState<string | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  // Supervisors for filter + assign
  const [supervisors, setSupervisors] = useState<any[]>([]);

  // Assign modal
  const [ticketToAssign, setTicketToAssign] = useState<CallCenterTicket | null>(null);

  // Active tab
  const [activeTab, setActiveTab] = useState<"tickets" | "unassigned" | "followups">("tickets");

  // ── Helpers ────────────────────────────────────────────────────────────────

  const buildParams = useCallback(() => {
    const params: Record<string, any> = { idcompany, per_page: perPage, page };
    if (filterStatus !== "all") params.status = filterStatus;
    if (filterPriority !== "all") params.priority = filterPriority;
    if (filterType !== "all") params.type = filterType;
    if (filterAssignedTo !== "all") params.assigned_to = filterAssignedTo;
    if (filterCustomer.trim()) params.customer = filterCustomer.trim();
    if (filterDateFrom) params.date_from = filterDateFrom;
    if (filterDateTo) params.date_to = filterDateTo;
    if (activeQuickFilter === "unassigned") params.unassigned = true;
    if (activeQuickFilter === "overdue") params.overdue = true;
    if (activeQuickFilter === "mine") params.mine = true;
    return params;
  }, [idcompany, page, perPage, filterStatus, filterPriority, filterType, filterAssignedTo, filterCustomer, filterDateFrom, filterDateTo, activeQuickFilter]);

  // ── Load data ──────────────────────────────────────────────────────────────

  const loadStats = useCallback(async () => {
    setIsLoadingStats(true);
    try {
      const data = await CallCenterAPI.getStats({ idcompany });
      setStats(data);
    } catch {
      // silently fail; stats are informational
    } finally {
      setIsLoadingStats(false);
    }
  }, [idcompany]);

  const loadTickets = useCallback(async () => {
    setIsLoadingTickets(true);
    try {
      const params = buildParams();
      const { tickets: data, total: t } = await CallCenterAPI.getAll(params);
      setTickets(data);
      setTotal(t);
    } catch {
      toast.error("No se pudieron cargar los tickets");
    } finally {
      setIsLoadingTickets(false);
    }
  }, [buildParams]);

  const loadPendingFollowups = useCallback(async () => {
    setIsLoadingFollowups(true);
    try {
      const data = await CallCenterAPI.getPendingFollowups(idcompany);
      setPendingFollowups(data);
    } catch {
      toast.error("No se pudieron cargar los seguimientos");
    } finally {
      setIsLoadingFollowups(false);
    }
  }, [idcompany]);

  const loadSupervisors = useCallback(async () => {
    try {
      const data = await CallCenterAPI.getSupervisors();
      setSupervisors(data);
    } catch {
      // non-critical
    }
  }, []);

  useEffect(() => {
    loadStats();
    loadSupervisors();
    loadPendingFollowups();
  }, [loadStats, loadSupervisors, loadPendingFollowups]);

  useEffect(() => {
    loadTickets();
  }, [loadTickets]);

  const handleRefresh = () => {
    loadStats();
    loadTickets();
    loadPendingFollowups();
  };

  // ── Quick filters from stat cards ─────────────────────────────────────────

  const handleStatCardClick = (key: string) => {
    setActiveQuickFilter((prev) => (prev === key ? null : key));
    setPage(1);
    setActiveTab("tickets");
    if (key === "unassigned") setActiveTab("unassigned");
    if (key === "followups") setActiveTab("followups");
  };

  // ── Navigation to customer view ───────────────────────────────────────────

  const openCustomer = (ticket: CallCenterTicket) => {
    const customerId = ticket.customer?.id;
    if (!customerId) return;
    router.push(`${createPanelPageUrl("CallCenter/Customer")}?idcustomer=${customerId}`);
  };

  // ── Assign ticket ─────────────────────────────────────────────────────────

  const handleAssign = async (ticketId: number, userId: number) => {
    try {
      await CallCenterAPI.update(ticketId, { assigned_to: userId });
      toast.success("Responsable asignado");
      await loadTickets();
      await loadStats();
    } catch {
      toast.error("Error al asignar responsable");
    }
  };

  // ── Complete followup ─────────────────────────────────────────────────────

  const handleCompleteFollowup = async (id: number) => {
    try {
      await CallCenterAPI.completeFollowup(id);
      toast.success("Seguimiento completado");
      await loadPendingFollowups();
      await loadStats();
    } catch {
      toast.error("Error al completar seguimiento");
    }
  };

  // ── Detect overdue ────────────────────────────────────────────────────────

  const isOverdue = (ticket: CallCenterTicket) => {
    if (!ticket.due_date) return false;
    if (["resuelto", "cerrado"].includes(ticket.status)) return false;
    return true;
  };

  const totalPages = Math.ceil(total / perPage) || 1;

  // ─── Render ───────────────────────────────────────────────────────────────

  return (
    <div className="min-h-screen bg-slate-50/80 p-4 lg:p-6 space-y-6">

      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm">
            <Headphones className="h-5 w-5" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-slate-900">Call Center</h1>
            <p className="text-xs text-slate-500">Vista global de gestión operativa</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button
            size="sm"
            variant="outline"
            className="gap-1.5 text-xs"
            onClick={handleRefresh}
            disabled={isLoadingStats || isLoadingTickets}
          >
            <RefreshCw className={`h-3.5 w-3.5 ${(isLoadingStats || isLoadingTickets) ? "animate-spin" : ""}`} />
            Actualizar
          </Button>
          <Button
            size="sm"
            className="gap-1.5 text-xs"
            onClick={() => router.push(createPanelPageUrl("CallCenter/Customer"))}
          >
            <Search className="h-3.5 w-3.5" />
            Atender Cliente
          </Button>
        </div>
      </div>

      {/* Stat cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
        <StatCard
          label="Sin Asignar"
          value={stats.sin_asignar}
          icon={<UserX className="h-4 w-4 text-white" />}
          colorClass="bg-slate-500"
          onClick={() => handleStatCardClick("unassigned")}
          active={activeQuickFilter === "unassigned"}
        />
        <StatCard
          label="Pendientes"
          value={stats.pendientes}
          icon={<Clock className="h-4 w-4 text-white" />}
          colorClass="bg-blue-500"
          onClick={() => { setActiveQuickFilter(null); setFilterStatus("abierto"); setPage(1); setActiveTab("tickets"); }}
          active={filterStatus === "abierto" && !activeQuickFilter}
        />
        <StatCard
          label="En Proceso"
          value={stats.en_proceso}
          icon={<RefreshCw className="h-4 w-4 text-white" />}
          colorClass="bg-yellow-500"
          onClick={() => { setActiveQuickFilter(null); setFilterStatus("en_proceso"); setPage(1); setActiveTab("tickets"); }}
          active={filterStatus === "en_proceso" && !activeQuickFilter}
        />
        <StatCard
          label="Cerrados"
          value={stats.cerrados}
          icon={<CheckCircle2 className="h-4 w-4 text-white" />}
          colorClass="bg-green-500"
          onClick={() => { setActiveQuickFilter(null); setFilterStatus("cerrado"); setPage(1); setActiveTab("tickets"); }}
          active={filterStatus === "cerrado" && !activeQuickFilter}
        />
        <StatCard
          label="Vencidos"
          value={stats.vencidos}
          icon={<AlertTriangle className="h-4 w-4 text-white" />}
          colorClass="bg-red-500"
          onClick={() => handleStatCardClick("overdue")}
          active={activeQuickFilter === "overdue"}
        />
        <StatCard
          label="Asignados a Mí"
          value={stats.mios}
          icon={<UserCheck className="h-4 w-4 text-white" />}
          colorClass="bg-purple-500"
          onClick={() => handleStatCardClick("mine")}
          active={activeQuickFilter === "mine"}
        />
      </div>

      {/* Tabs */}
      <div className="flex gap-1 border-b border-slate-200">
        {(["tickets", "unassigned", "followups"] as const).map((tab) => (
          <button
            key={tab}
            type="button"
            onClick={() => {
              setActiveTab(tab);
              setPage(1);
              if (tab === "unassigned") {
                setActiveQuickFilter("unassigned");
              } else if (tab === "tickets") {
                // Limpiar el quick filter de "sin asignar" al volver a todos
                setActiveQuickFilter((prev) => (prev === "unassigned" ? null : prev));
              }
            }}
            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab
                ? "border-blue-500 text-blue-600"
                : "border-transparent text-slate-500 hover:text-slate-700"
            }`}
          >
            {tab === "tickets" && "Todos los Tickets"}
            {tab === "unassigned" && (
              <span className="flex items-center gap-1.5">
                Sin Asignar
                {stats.sin_asignar > 0 && (
                  <span className="inline-flex items-center justify-center h-4 min-w-4 px-1 rounded-full bg-slate-200 text-slate-700 text-[10px] font-bold">
                    {stats.sin_asignar}
                  </span>
                )}
              </span>
            )}
            {tab === "followups" && (
              <span className="flex items-center gap-1.5">
                Seguimientos Pendientes
                {pendingFollowups.length > 0 && (
                  <span className="inline-flex items-center justify-center h-4 min-w-4 px-1 rounded-full bg-orange-200 text-orange-700 text-[10px] font-bold">
                    {pendingFollowups.length}
                  </span>
                )}
              </span>
            )}
          </button>
        ))}
      </div>

      {/* ── Tab: Tickets / Sin asignar ── */}
      {(activeTab === "tickets" || activeTab === "unassigned") && (
        <div className="space-y-4">

          {/* Filters row */}
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex-1 min-w-[200px]">
              <Input
                placeholder="Buscar por cliente..."
                value={filterCustomer}
                onChange={(e) => { setFilterCustomer(e.target.value); setPage(1); }}
                className="h-8 text-sm"
              />
            </div>
            <Button
              size="sm"
              variant="outline"
              className={`gap-1.5 h-8 text-xs ${showFilters ? "bg-slate-100" : ""}`}
              onClick={() => setShowFilters((v) => !v)}
            >
              <Filter className="h-3.5 w-3.5" />
              Filtros
              {(filterStatus !== "all" || filterPriority !== "all" || filterType !== "all" || filterAssignedTo !== "all" || filterDateFrom || filterDateTo) && (
                <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-blue-500" />
              )}
            </Button>
            {(activeQuickFilter || filterStatus !== "all" || filterPriority !== "all" || filterType !== "all" || filterAssignedTo !== "all" || filterCustomer || filterDateFrom || filterDateTo) && (
              <Button
                size="sm"
                variant="ghost"
                className="h-8 text-xs text-slate-400 gap-1"
                onClick={() => {
                  setActiveQuickFilter(null);
                  setFilterStatus("all");
                  setFilterPriority("all");
                  setFilterType("all");
                  setFilterAssignedTo("all");
                  setFilterCustomer("");
                  setFilterDateFrom("");
                  setFilterDateTo("");
                  setPage(1);
                }}
              >
                <X className="h-3 w-3" /> Limpiar
              </Button>
            )}
          </div>

          {showFilters && (
            <Card>
              <CardContent className="pt-4 pb-3">
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Estado</Label>
                    <Select value={filterStatus} onValueChange={(v) => { setFilterStatus(v); setPage(1); }}>
                      <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos</SelectItem>
                        {Object.entries(STATUS_LABELS).map(([v, l]) => (
                          <SelectItem key={v} value={v}>{l}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Prioridad</Label>
                    <Select value={filterPriority} onValueChange={(v) => { setFilterPriority(v); setPage(1); }}>
                      <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todas</SelectItem>
                        {Object.entries(PRIORITY_LABELS).map(([v, l]) => (
                          <SelectItem key={v} value={v}>{l}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Tipo</Label>
                    <Select value={filterType} onValueChange={(v) => { setFilterType(v); setPage(1); }}>
                      <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos</SelectItem>
                        {Object.entries(TYPE_LABELS).map(([v, l]) => (
                          <SelectItem key={v} value={v}>{l}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Responsable</Label>
                    <Select value={filterAssignedTo} onValueChange={(v) => { setFilterAssignedTo(v); setPage(1); }}>
                      <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos</SelectItem>
                        <SelectItem value="none">Sin asignar</SelectItem>
                {supervisors.map((u) => (
                  <SelectItem key={u.id} value={String(u.id)}>
                    {fullName(u)} — {u.email}
                  </SelectItem>
                ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Desde</Label>
                    <Input
                      type="date"
                      value={filterDateFrom}
                      onChange={(e) => { setFilterDateFrom(e.target.value); setPage(1); }}
                      className="h-8 text-xs"
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-[10px] text-slate-400 uppercase font-semibold">Hasta</Label>
                    <Input
                      type="date"
                      value={filterDateTo}
                      onChange={(e) => { setFilterDateTo(e.target.value); setPage(1); }}
                      className="h-8 text-xs"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Table */}
          <Card>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="text-xs bg-slate-50/80">
                      <TableHead className="py-2.5 text-xs font-semibold">Ticket</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Cliente</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Tipo</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Estado</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Prioridad</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Responsable</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Creación</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold">Actualización</TableHead>
                      <TableHead className="py-2.5 text-xs font-semibold w-20"></TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {isLoadingTickets ? (
                      <TableRow>
                        <TableCell colSpan={9} className="text-center py-12 text-slate-400">
                          <RefreshCw className="h-5 w-5 animate-spin mx-auto mb-2 opacity-40" />
                          Cargando tickets...
                        </TableCell>
                      </TableRow>
                    ) : tickets.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={9} className="text-center py-12 text-slate-400">
                          <Headphones className="h-8 w-8 mx-auto mb-2 opacity-25" />
                          <p className="text-sm">No se encontraron tickets</p>
                        </TableCell>
                      </TableRow>
                    ) : (
                      tickets.map((ticket) => {
                        const overdue = isOverdue(ticket);
                        return (
                          <TableRow
                            key={ticket.id}
                            className={`text-xs hover:bg-slate-50 cursor-pointer ${overdue ? "bg-red-50/40" : ""}`}
                            onClick={() => openCustomer(ticket)}
                          >
                            <TableCell className="py-2.5 font-mono font-medium text-blue-700">
                              <div className="flex items-center gap-1">
                                {overdue && <AlertTriangle className="h-3 w-3 text-red-500 shrink-0" />}
                                {ticket.ticket_number}
                              </div>
                            </TableCell>
                            <TableCell className="py-2.5 font-medium text-slate-800 max-w-[140px] truncate">
                              {(ticket.customer as any)?.name ?? "—"}
                            </TableCell>
                            <TableCell className="py-2.5 text-slate-500">
                              {TYPE_LABELS[ticket.type] ?? ticket.type_label ?? ticket.type}
                            </TableCell>
                            <TableCell className="py-2.5">
                              <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium whitespace-nowrap ${STATUS_COLORS[ticket.status]}`}>
                                {STATUS_LABELS[ticket.status] ?? ticket.status}
                              </span>
                            </TableCell>
                            <TableCell className="py-2.5">
                              <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${PRIORITY_COLORS[ticket.priority]}`}>
                                {PRIORITY_LABELS[ticket.priority] ?? ticket.priority}
                              </span>
                            </TableCell>
                            <TableCell className="py-2.5 max-w-[150px]">
                              {ticket.assigned_to ? (
                                <div className="space-y-0.5">
                                  <p className="text-xs font-medium text-slate-700 truncate">
                                    {fullName(ticket.assigned_to as any)}
                                  </p>
                                  <p className="text-[10px] text-slate-400 truncate">
                                    {(ticket.assigned_to as any).email}
                                  </p>
                                </div>
                              ) : (
                                <span className="italic text-slate-300 text-xs">Sin asignar</span>
                              )}
                            </TableCell>
                            <TableCell className="py-2.5 text-slate-400 whitespace-nowrap">{ticket.created_at}</TableCell>
                            <TableCell className="py-2.5 text-slate-400 whitespace-nowrap">{(ticket as any).updated_at ?? "—"}</TableCell>
                            <TableCell className="py-2.5" onClick={(e) => e.stopPropagation()}>
                              <div className="flex items-center gap-1">
                                {!ticket.assigned_to && (
                                  <Button
                                    size="sm"
                                    variant="outline"
                                    className="h-6 text-[10px] gap-0.5 px-1.5"
                                    onClick={(e) => { e.stopPropagation(); setTicketToAssign(ticket); }}
                                  >
                                    <Users className="h-3 w-3" /> Asignar
                                  </Button>
                                )}
                                <Button
                                  size="icon"
                                  variant="ghost"
                                  className="h-6 w-6"
                                  onClick={(e) => { e.stopPropagation(); openCustomer(ticket); }}
                                >
                                  <ChevronRight className="h-3.5 w-3.5 text-slate-400" />
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        );
                      })
                    )}
                  </TableBody>
                </Table>
              </div>

              {/* Pagination */}
              <div className="flex items-center justify-between px-4 py-3 border-t border-slate-100 flex-wrap gap-3">
                {/* Info + selector */}
                <div className="flex items-center gap-3">
                  <p className="text-xs text-slate-400">
                    {total === 0
                      ? "Sin resultados"
                      : `Mostrando ${(page - 1) * perPage + 1}–${Math.min(page * perPage, total)} de ${total} tickets`}
                  </p>
                  <div className="flex items-center gap-1.5">
                    <span className="text-xs text-slate-400">Por página:</span>
                    <Select
                      value={String(perPage)}
                      onValueChange={(v) => { setPerPage(Number(v)); setPage(1); }}
                    >
                      <SelectTrigger className="h-6 w-16 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {[5, 10, 15, 20, 50].map((n) => (
                          <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {/* Page buttons */}
                <div className="flex items-center gap-1">
                  {/* Primera página */}
                  <Button
                    size="icon"
                    variant="outline"
                    className="h-7 w-7"
                    disabled={page <= 1 || isLoadingTickets}
                    onClick={() => setPage(1)}
                    title="Primera página"
                  >
                    <ChevronsLeft className="h-3.5 w-3.5" />
                  </Button>
                  {/* Anterior */}
                  <Button
                    size="icon"
                    variant="outline"
                    className="h-7 w-7"
                    disabled={page <= 1 || isLoadingTickets}
                    onClick={() => setPage((p) => p - 1)}
                    title="Página anterior"
                  >
                    <ChevronLeft className="h-3.5 w-3.5" />
                  </Button>

                  {/* Números de página */}
                  {(() => {
                    const pages: (number | "…")[] = [];
                    if (totalPages <= 7) {
                      for (let i = 1; i <= totalPages; i++) pages.push(i);
                    } else {
                      pages.push(1);
                      if (page > 3) pages.push("…");
                      for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
                        pages.push(i);
                      }
                      if (page < totalPages - 2) pages.push("…");
                      pages.push(totalPages);
                    }
                    return pages.map((p, idx) =>
                      p === "…" ? (
                        <span key={`ellipsis-${pages[idx - 1] ?? "start"}`} className="px-1 text-xs text-slate-400 select-none">…</span>
                      ) : (
                        <Button
                          key={p}
                          size="icon"
                          variant={p === page ? "default" : "outline"}
                          className={`h-7 w-7 text-xs font-medium ${p === page ? "bg-blue-600 hover:bg-blue-700 border-blue-600 text-white" : ""}`}
                          disabled={isLoadingTickets}
                          onClick={() => setPage(p as number)}
                        >
                          {p}
                        </Button>
                      )
                    );
                  })()}

                  {/* Siguiente */}
                  <Button
                    size="icon"
                    variant="outline"
                    className="h-7 w-7"
                    disabled={page >= totalPages || isLoadingTickets}
                    onClick={() => setPage((p) => p + 1)}
                    title="Página siguiente"
                  >
                    <ChevronRight className="h-3.5 w-3.5" />
                  </Button>
                  {/* Última página */}
                  <Button
                    size="icon"
                    variant="outline"
                    className="h-7 w-7"
                    disabled={page >= totalPages || isLoadingTickets}
                    onClick={() => setPage(totalPages)}
                    title="Última página"
                  >
                    <ChevronsRight className="h-3.5 w-3.5" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* ── Tab: Seguimientos Pendientes ── */}
      {activeTab === "followups" && (
        <div className="space-y-3">
          {isLoadingFollowups ? (
            <div className="flex justify-center py-12 text-slate-400">
              <RefreshCw className="h-5 w-5 animate-spin" />
            </div>
          ) : pendingFollowups.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-2">
              <Calendar className="h-8 w-8 opacity-30" />
              <p className="text-sm">No hay seguimientos pendientes</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
              {pendingFollowups.map((f) => (
                <Card key={f.id} className="border-l-4 border-l-orange-400">
                  <CardContent className="pt-4 pb-3 space-y-2">
                    {f.ticket && (
                      <div className="flex items-start justify-between gap-2">
                        <div>
                          <p className="text-xs font-semibold text-blue-700">{f.ticket.ticket_number}</p>
                          <p className="text-sm font-medium text-slate-800 leading-snug">{f.ticket.subject}</p>
                          {f.ticket.customer && (
                            <p className="text-xs text-slate-500 mt-0.5">{f.ticket.customer.name}</p>
                          )}
                        </div>
                        <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium ${STATUS_COLORS[f.ticket.status] ?? ""}`}>
                          {STATUS_LABELS[f.ticket.status] ?? f.ticket.status}
                        </span>
                      </div>
                    )}
                    <div className="flex items-center gap-1 text-xs text-slate-500">
                      <Calendar className="h-3 w-3" />
                      <span>Programado: {f.scheduled_at}</span>
                    </div>
                    <p className="text-xs text-slate-600 bg-slate-50 rounded p-2">{f.notes}</p>
                    <div className="flex items-center justify-between pt-1">
                      <span className="text-[10px] text-slate-400">
                        Por: {fullName(f.created_by as any)}
                      </span>
                      <div className="flex gap-1.5">
                        {f.ticket && (
                          <Button
                            size="sm"
                            variant="outline"
                            className="h-6 text-[10px] gap-0.5 px-1.5"
                            onClick={() => {
                              if (f.ticket?.customer?.id) {
                                router.push(`${createPanelPageUrl("CallCenter/Customer")}?idcustomer=${f.ticket.customer.id}`);
                              }
                            }}
                          >
                            <ChevronRight className="h-3 w-3" /> Ver cliente
                          </Button>
                        )}
                        <Button
                          size="sm"
                          className="h-6 text-[10px] gap-0.5 px-1.5 bg-green-600 hover:bg-green-700"
                          onClick={() => handleCompleteFollowup(f.id)}
                        >
                          <CheckCircle2 className="h-3 w-3" /> Completar
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Assign modal */}
      <AssignModal
        ticket={ticketToAssign}
        supervisors={supervisors}
        onClose={() => setTicketToAssign(null)}
        onAssign={handleAssign}
      />
    </div>
  );
}