"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  Headphones,
  Search,
  Plus,
  Phone,
  MessageSquare,
  Mail,
  Users,
  Clock,
  CheckCircle2,
  AlertCircle,
  ChevronLeft,
  ChevronRight,
  X,
  Calendar,
  RefreshCw,
  Pencil,
  Trash2,
  ArrowLeft,
  Tag,
  CalendarDays,
  TrendingUp,
  Wallet,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  AlertDialog,
  AlertDialogContent,
} from "@/components/ui/alert-dialog";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

import { CallCenterAPI, type CallCenterTicket, type CallCenterFollowup } from "@/apis/CallCenterAPI";
import { CustomerAPI } from "@/apis/CustomerAPI";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";
import type { CustomerRecord } from "@/types/modules/customer";
import { createPanelPageUrl } from "@/utils";

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

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

const SEGMENT_LABELS: Record<string, string> = {
  uncategorized: "Sin categoría",
  vip: "VIP",
  premium: "Premium",
  regular: "Regular",
  occasional: "Ocasional",
  new: "Nuevo",
  at_risk: "En riesgo",
  loyal: "Fiel",
};

const PAYMENT_METHOD_LABELS: Record<string, string> = {
  bank_transfer: "Transferencia bancaria",
  cash: "Efectivo",
  credit_card: "Tarjeta de crédito",
  debit_card: "Tarjeta de débito",
  check: "Cheque",
  credit: "Crédito",
  other: "Otro",
};

const STATUS_LABELS: Record<string, string> = {
  abierto: "Abierto",
  en_proceso: "En Proceso",
  pendiente_cliente: "Pendiente 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 TYPE_LABELS: Record<string, string> = {
  consulta: "Consulta",
  reclamo: "Reclamo",
  solicitud_pedido: "Solicitud de Pedido",
  seguimiento: "Seguimiento",
  otro: "Otro",
};

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

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

const CHANNEL_ICONS: Record<string, React.ReactNode> = {
  phone: <Phone className="h-3.5 w-3.5" />,
  whatsapp: <MessageSquare className="h-3.5 w-3.5" />,
  email: <Mail className="h-3.5 w-3.5" />,
  presencial: <Users className="h-3.5 w-3.5" />,
  twitter: <X className="h-3.5 w-3.5" />,
};

// ─── Component ───────────────────────────────────────────────────────────────

interface Props {
  initialCustomerId?: number;
}

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

  // Form state
  const [formAssignedTo, setFormAssignedTo] = useState<string>("");
  const [supervisors, setSupervisors] = useState<any[]>([]);
  const [isLoadingSupervisors, setIsLoadingSupervisors] = useState(false);
  const [formSaleId, setFormSaleId] = useState<string>("none");
  const [formDueDate, setFormDueDate] = useState<string>("");
  const [showCatalogModal, setShowCatalogModal] = useState(false);
  const [catalogType, setCatalogType] = useState<"type" | "channel" | "priority" | null>(null);
  const [newCatalogValue, setNewCatalogValue] = useState("");
  const [catalogs, setCatalogs] = useState<any>(null);
  const [isLoadingCatalogs, setIsLoadingCatalogs] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<number | null>(null);

  // Customer search
  const [searchInput, setSearchInput] = useState("");
  const [isSearching, setIsSearching] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState<CustomerRecord | null>(null);
  const [customerContext, setCustomerContext] = useState<any>(null);

  // Ticket list
  const [tickets, setTickets] = useState<CallCenterTicket[]>([]);
  const [isLoadingTickets, setIsLoadingTickets] = useState(false);
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [ticketPage, setTicketPage] = useState(1);
  const [ticketsTotal, setTicketsTotal] = useState(0);
  const TICKETS_PER_PAGE = 8;

  // Selected ticket
  const [selectedTicket, setSelectedTicket] = useState<CallCenterTicket | null>(null);
  const [isLoadingTicket, setIsLoadingTicket] = useState(false);

  // New / edit form
  const [showForm, setShowForm] = useState(false);
  const [formSubject, setFormSubject] = useState("");
  const [formType, setFormType] = useState("consulta");
  const [formPriority, setFormPriority] = useState("medium");
  const [formChannel, setFormChannel] = useState("phone");
  const [formDescription, setFormDescription] = useState("");
  const [isSaving, setIsSaving] = useState(false);

  // Status change
  const [showStatusChange, setShowStatusChange] = useState(false);
  const [newStatus, setNewStatus] = useState("");
  const [statusComment, setStatusComment] = useState("");
  const [isChangingStatus, setIsChangingStatus] = useState(false);

  // Resolution notes
  const [resolutionNotes, setResolutionNotes] = useState("");

  // Followup form
  const [showFollowupForm, setShowFollowupForm] = useState(false);
  const [followupNotes, setFollowupNotes] = useState("");
  const [followupDate, setFollowupDate] = useState("");
  const [isSavingFollowup, setIsSavingFollowup] = useState(false);

  // ── Load tickets ──────────────────────────────────────────────────────────

  const openCatalogModal = (type: "type" | "channel" | "priority") => {
    setCatalogType(type);
    setShowCatalogModal(true);
  };

  const loadSupervisors = useCallback(async () => {
    setIsLoadingSupervisors(true);
    try {
      const data = await CallCenterAPI.getSupervisors();
      setSupervisors(data);
    } catch {
      toast.error("No se pudieron cargar los supervisores");
    } finally {
      setIsLoadingSupervisors(false);
    }
  }, []);

  const loadCatalogs = useCallback(async () => {
    setIsLoadingCatalogs(true);
    try {
      const data = await CallCenterAPI.getCatalogs();
      setCatalogs(data);
    } catch {
      toast.error("Error cargando catálogos");
    } finally {
      setIsLoadingCatalogs(false);
    }
  }, []);

  const handleSaveCatalog = async () => {
    if (!newCatalogValue.trim()) {
      toast.error("El nombre es obligatorio");
      return;
    }
    try {
      const slugValue = newCatalogValue
        .toLowerCase()
        .trim()
        .replace(/\s+/g, "_")
        .replace(/[^\w-]+/g, "");
      await CallCenterAPI.createCatalog({
        type: catalogType ?? "type",
        value: slugValue,
        label: newCatalogValue,
      });
      toast.success("Opción agregada");
      setNewCatalogValue("");
      setShowCatalogModal(false);
      await loadCatalogs();
    } catch (error: any) {
      toast.error(error?.response?.data?.message || "Error al guardar");
    }
  };

  const handleDeleteCatalog = async (id: number) => {
    try {
      await CallCenterAPI.deleteCatalog(id);
      const updatedCatalogs = await CallCenterAPI.getCatalogs();
      setCatalogs(updatedCatalogs);
      toast.success("Opción eliminada correctamente");
    } catch {
      toast.error("No se pudo eliminar la opción. Intente nuevamente.");
    }
  };

  const loadTickets = useCallback(async () => {
    if (!selectedCustomer) return;
    setIsLoadingTickets(true);
    try {
      const params: any = {
        idcompany,
        idcustomer: selectedCustomer.id,
        per_page: TICKETS_PER_PAGE,
        page: ticketPage,
      };
      if (statusFilter !== "all") params.status = statusFilter;
      const { tickets: data, total } = await CallCenterAPI.getAll(params);
      setTickets(data);
      setTicketsTotal(total);
    } catch {
      toast.error("No se pudieron cargar los tickets");
    } finally {
      setIsLoadingTickets(false);
    }
  }, [selectedCustomer, idcompany, statusFilter, ticketPage]);

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

  // Resetear página al cambiar filtro o cliente
  useEffect(() => {
    setTicketPage(1);
  }, [statusFilter, selectedCustomer]);

  useEffect(() => {
    if (showForm) {
      loadSupervisors();
    }
  }, [showForm, loadSupervisors]);

  useEffect(() => {
    if (showForm) {
      loadCatalogs();
    }
  }, [showForm, loadCatalogs]);

  // Auto-cargar cliente desde prop
  useEffect(() => {
    if (!initialCustomerId || !idcompany) return;
    setIsSearching(true);
    CallCenterAPI.getCustomerContext(initialCustomerId, idcompany)
      .then((ctx) => {
        if (ctx?.customer) {
          setSelectedCustomer(ctx.customer as CustomerRecord);
          setCustomerContext(ctx);
        }
      })
      .catch(() => toast.error("No se pudo cargar el cliente"))
      .finally(() => setIsSearching(false));
  }, [initialCustomerId, idcompany]);

  // ── Customer search ───────────────────────────────────────────────────────

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    const term = searchInput.trim();
    if (!term) return;

    setIsSearching(true);
    setSelectedCustomer(null);
    setCustomerContext(null);
    setTickets([]);
    setSelectedTicket(null);

    try {
      const result = await CustomerAPI.findForComplaintsContext(idcompany, term);
      if (result.status === "not_found" || !result.customer) {
        toast.error("No se encontró ningún cliente");
        return;
      }
      const customer = result.customer;
      setSelectedCustomer(customer);
      const ctx = await CallCenterAPI.getCustomerContext(customer.id, idcompany);
      setCustomerContext(ctx);
    } catch {
      toast.error("Error al buscar el cliente");
    } finally {
      setIsSearching(false);
    }
  };

  // ── Load ticket detail ────────────────────────────────────────────────────

  const handleSelectTicket = async (ticket: CallCenterTicket) => {
    setIsLoadingTicket(true);
    setShowForm(false);
    try {
      const full = await CallCenterAPI.getById(ticket.id);
      setSelectedTicket(full);
      setResolutionNotes(full.resolution_notes ?? "");
    } catch {
      toast.error("No se pudo cargar el ticket");
    } finally {
      setIsLoadingTicket(false);
    }
  };

  // ── Create ticket ─────────────────────────────────────────────────────────

  const handleCreateTicket = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCustomer) {
      toast.error("Seleccione un cliente primero");
      return;
    }
    if (!formSubject.trim()) {
      toast.error("El asunto es obligatorio");
      return;
    }

    setIsSaving(true);
    try {
      const created = await CallCenterAPI.create({
        idcompany,
        idcustomer: selectedCustomer.id,
        type: formType,
        priority: formPriority,
        channel: formChannel,
        subject: formSubject,
        description: formDescription || undefined,
        assigned_to: formAssignedTo ? Number(formAssignedTo) : undefined,
        idsale: formSaleId && formSaleId !== "none" ? Number(formSaleId) : null,
        due_date: formDueDate || null,
      });
      toast.success(`Ticket ${created.ticket_number} creado`);
      setShowForm(false);
      setFormSubject("");
      setFormDescription("");
      setFormAssignedTo("");
      setFormSaleId("");
      setFormDueDate("");
      await loadTickets();
      const full = await CallCenterAPI.getById(created.id);
      setSelectedTicket(full);
    } catch {
      toast.error("Error al crear el ticket");
    } finally {
      setIsSaving(false);
    }
  };

  // ── Change status ─────────────────────────────────────────────────────────

  const handleChangeStatus = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTicket || !newStatus) return;

    setIsChangingStatus(true);
    try {
      const updated = await CallCenterAPI.changeStatus(selectedTicket.id, {
        status: newStatus,
        comment: statusComment || undefined,
      });
      toast.success("Estado actualizado");
      setSelectedTicket(updated);
      setShowStatusChange(false);
      setStatusComment("");
      await loadTickets();
    } catch {
      toast.error("Error al cambiar estado");
    } finally {
      setIsChangingStatus(false);
    }
  };

  // ── Save resolution notes ─────────────────────────────────────────────────

  const handleSaveNotes = async () => {
    if (!selectedTicket) return;
    try {
      const updated = await CallCenterAPI.update(selectedTicket.id, {
        resolution_notes: resolutionNotes,
      });
      setSelectedTicket(updated);
      toast.success("Notas guardadas");
    } catch {
      toast.error("Error al guardar notas");
    }
  };

  // ── Create followup ───────────────────────────────────────────────────────

  const handleCreateFollowup = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTicket || !followupNotes.trim() || !followupDate) return;

    setIsSavingFollowup(true);
    try {
      await CallCenterAPI.createFollowup(selectedTicket.id, {
        idcompany,
        notes: followupNotes,
        scheduled_at: followupDate,
      });
      toast.success("Seguimiento agendado");
      setShowFollowupForm(false);
      setFollowupNotes("");
      setFollowupDate("");
      const updated = await CallCenterAPI.getById(selectedTicket.id);
      setSelectedTicket(updated);
    } catch {
      toast.error("Error al agendar seguimiento");
    } finally {
      setIsSavingFollowup(false);
    }
  };

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

  const handleCompleteFollowup = async (followup: CallCenterFollowup) => {
    try {
      await CallCenterAPI.completeFollowup(followup.id);
      toast.success("Seguimiento marcado como completado");
      if (selectedTicket) {
        const updated = await CallCenterAPI.getById(selectedTicket.id);
        setSelectedTicket(updated);
      }
    } catch {
      toast.error("Error al completar seguimiento");
    }
  };

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

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

      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Button
            size="icon"
            variant="ghost"
            className="h-8 w-8 text-slate-500"
            onClick={() => router.push(createPanelPageUrl("CallCenter"))}
          >
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div className="flex h-10 w-10 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">
              {selectedCustomer ? selectedCustomer.name : "Vista de Cliente"}
            </h1>
            <p className="text-xs text-slate-500">Gestión de tickets por cliente</p>
          </div>
        </div>
        {selectedCustomer && (
          <Button
            size="sm"
            className="gap-2"
            onClick={() => { setShowForm(true); setSelectedTicket(null); }}
          >
            <Plus className="h-4 w-4" /> Nuevo Ticket
          </Button>
        )}
      </div>

      {/* Search */}
      <Card>
        <CardContent className="pt-4 pb-4">
          <form onSubmit={handleSearch} className="flex gap-2">
            <Input
              placeholder="Buscar cliente por nombre, teléfono o RUT..."
              value={searchInput}
              onChange={(e) => setSearchInput(e.target.value)}
              className="flex-1"
            />
            <Button type="submit" disabled={isSearching} className="gap-2">
              {isSearching ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
              Buscar
            </Button>
          </form>
        </CardContent>
      </Card>

      {!selectedCustomer ? (
        <div className="flex flex-col items-center justify-center py-20 text-slate-400 gap-3">
          {isSearching
            ? <RefreshCw className="h-8 w-8 animate-spin opacity-40" />
            : <Headphones className="h-12 w-12 opacity-30" />}
          <p className="text-sm">Busca un cliente para comenzar la atención</p>
        </div>
      ) : (
        <div className="grid grid-cols-12 gap-5">

          {/* LEFT: Customer + Context */}
          <div className="col-span-12 lg:col-span-4 space-y-4">
            {/* Customer card */}
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-semibold text-slate-700">Cliente</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">

                {/* Nombre + estado */}
                <div>
                  <p className="font-semibold text-slate-900 text-base leading-tight">{selectedCustomer.name}</p>
                  {selectedCustomer.status && (
                    <span className={`inline-block mt-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${
                      selectedCustomer.status === "active"
                        ? "bg-green-100 text-green-700"
                        : selectedCustomer.status === "suspended"
                        ? "bg-red-100 text-red-700"
                        : "bg-slate-100 text-slate-500"
                    }`}>
                      {selectedCustomer.status === "active" ? "Activo" : selectedCustomer.status === "suspended" ? "Suspendido" : "Inactivo"}
                    </span>
                  )}
                </div>

                {/* Datos personales */}
                <div className="space-y-1.5">
                  <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wide">Datos Personales</p>
                  {selectedCustomer.phone && (
                    <p className="text-xs text-slate-600 flex items-center gap-1.5">
                      <Phone className="h-3 w-3 text-slate-400 shrink-0" />{selectedCustomer.phone}
                    </p>
                  )}
                  {selectedCustomer.email && (
                    <p className="text-xs text-slate-600 flex items-center gap-1.5">
                      <Mail className="h-3 w-3 text-slate-400 shrink-0" />{selectedCustomer.email}
                    </p>
                  )}
                  {selectedCustomer.tax_id && (
                    <p className="text-xs text-slate-600">
                      <span className="text-slate-400">RUT:</span> {selectedCustomer.tax_id}
                    </p>
                  )}
                  {(selectedCustomer as any).incorporation_date && (
                    <p className="text-xs text-slate-600 flex items-center gap-1.5">
                      <CalendarDays className="h-3 w-3 text-slate-400 shrink-0" />
                      <span>
                        <span className="text-slate-400">Incorporación:</span>{" "}
                        {new Date((selectedCustomer as any).incorporation_date).toLocaleDateString("es-CL", { day: "2-digit", month: "short", year: "numeric" })}
                      </span>
                    </p>
                  )}
                </div>

                {/* Categoría */}
                {(selectedCustomer.referral_category || (selectedCustomer as any).physical_category_code) && (
                  <div className="space-y-1.5">
                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wide">Categoría</p>
                    <div className="flex flex-wrap gap-1.5">
                      {selectedCustomer.referral_category && (
                        <span className="inline-flex items-center gap-1 text-xs bg-purple-50 text-purple-700 border border-purple-200 px-2 py-0.5 rounded-full font-medium">
                          <Tag className="h-3 w-3" />
                          {selectedCustomer.referral_category}
                        </span>
                      )}
                      {(selectedCustomer as any).physical_category_code && (
                        <span className="inline-flex items-center gap-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 px-2 py-0.5 rounded-full font-medium">
                          <Tag className="h-3 w-3" />
                          {(selectedCustomer as any).physical_category_code}
                        </span>
                      )}
                    </div>
                  </div>
                )}

                {/* Información comercial */}
                <div className="space-y-1.5">
                  <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wide">Información Comercial</p>
                  <div className="grid grid-cols-2 gap-2">
                    <div className="bg-blue-50 rounded-lg p-2 text-center">
                      <TrendingUp className="h-3.5 w-3.5 text-blue-500 mx-auto mb-0.5" />
                      <p className="text-sm font-bold text-blue-700">{selectedCustomer.accumulated_points ?? 0}</p>
                      <p className="text-[10px] text-blue-500">Puntos</p>
                    </div>
                    <div className="bg-emerald-50 rounded-lg p-2 text-center">
                      <Wallet className="h-3.5 w-3.5 text-emerald-500 mx-auto mb-0.5" />
                      <p className="text-sm font-bold text-emerald-700">
                        {(selectedCustomer.balance ?? 0).toLocaleString("es-CL", { style: "currency", currency: "CLP" })}
                      </p>
                      <p className="text-[10px] text-emerald-500">Saldo</p>
                    </div>
                  </div>
                  {customerContext?.recent_sales?.length > 0 && (
                    <p className="text-xs text-slate-500 flex items-center gap-1">
                      <TrendingUp className="h-3 w-3 text-slate-400" />
                      {customerContext.recent_sales.length} venta{customerContext.recent_sales.length !== 1 ? "s" : ""} reciente{customerContext.recent_sales.length !== 1 ? "s" : ""}
                    </p>
                  )}
                  {selectedCustomer.customer_segment && selectedCustomer.customer_segment !== "uncategorized" && (
                    <p className="text-xs text-slate-500">
                      <span className="text-slate-400">Segmento:</span>{" "}
                      {SEGMENT_LABELS[selectedCustomer.customer_segment] ?? selectedCustomer.customer_segment}
                    </p>
                  )}
                  {selectedCustomer.payment_method && (
                    <p className="text-xs text-slate-500">
                      <span className="text-slate-400">Pago:</span>{" "}
                      {PAYMENT_METHOD_LABELS[selectedCustomer.payment_method] ?? selectedCustomer.payment_method}
                    </p>
                  )}
                </div>

              </CardContent>
            </Card>

            {/* Recent sales */}
            {customerContext?.recent_sales?.length > 0 && (
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-semibold text-slate-700">Últimas Ventas</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {customerContext.recent_sales.map((sale: any) => (
                    <div key={sale.id} className="flex justify-between text-xs">
                      <span className="text-slate-600">{sale.sale_number}</span>
                      <span className="font-medium">{sale.total?.toLocaleString("es-CL", { style: "currency", currency: "CLP" })}</span>
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}

            {/* Open tickets */}
            {customerContext?.open_tickets?.length > 0 && (
              <Card className="border-orange-200">
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-semibold text-orange-700 flex items-center gap-1">
                    <AlertCircle className="h-4 w-4" />
                    Tickets Abiertos ({customerContext.open_tickets.length})
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {customerContext.open_tickets.map((t: any) => (
                    <div key={t.id} className="text-xs space-y-0.5">
                      <p className="font-medium text-slate-800">{t.ticket_number}: {t.subject}</p>
                      <span className={`inline-block px-1.5 py-0.5 rounded text-xs ${STATUS_COLORS[t.status]}`}>
                        {STATUS_LABELS[t.status]}
                      </span>
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}

            {/* Ticket list */}
            <Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-sm font-semibold text-slate-700">
                    Historial de Tickets
                    {ticketsTotal > 0 && (
                      <span className="ml-1.5 text-xs font-normal text-slate-400">({ticketsTotal})</span>
                    )}
                  </CardTitle>
                  <Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger className="h-7 text-xs w-36">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todos</SelectItem>
                      <SelectItem value="abierto">Abiertos</SelectItem>
                      <SelectItem value="en_proceso">En Proceso</SelectItem>
                      <SelectItem value="resuelto">Resueltos</SelectItem>
                      <SelectItem value="cerrado">Cerrados</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardHeader>
              <CardContent className="space-y-2 p-3">
                {isLoadingTickets ? (
                  <p className="text-xs text-slate-400 text-center py-4">Cargando...</p>
                ) : tickets.length === 0 ? (
                  <p className="text-xs text-slate-400 text-center py-4">Sin tickets</p>
                ) : (
                  tickets.map((t) => (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => handleSelectTicket(t)}
                      className={`w-full text-left rounded-lg border p-2.5 transition-all hover:border-blue-300 hover:bg-blue-50 ${
                        selectedTicket?.id === t.id ? "border-blue-400 bg-blue-50" : "border-slate-200 bg-white"
                      }`}
                    >
                      <div className="flex items-start justify-between gap-1">
                        <p className="text-xs font-medium text-slate-800 leading-snug">{t.subject}</p>
                        <span className={`shrink-0 inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${STATUS_COLORS[t.status]}`}>
                          {STATUS_LABELS[t.status]}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 mt-1">
                        <span className="text-[10px] text-slate-400">{t.ticket_number}</span>
                        <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] ${PRIORITY_COLORS[t.priority]}`}>
                          {PRIORITY_LABELS[t.priority]}
                        </span>
                        <span className="text-slate-400">{CHANNEL_ICONS[t.channel]}</span>
                      </div>
                    </button>
                  ))
                )}

                {/* Paginación compacta */}
                {ticketsTotal > TICKETS_PER_PAGE && (
                  <div className="flex items-center justify-between pt-2 border-t border-slate-100">
                    <span className="text-[10px] text-slate-400">
                      {ticketPage} / {Math.ceil(ticketsTotal / TICKETS_PER_PAGE)}
                    </span>
                    <div className="flex gap-1">
                      <Button
                        size="icon"
                        variant="outline"
                        className="h-6 w-6"
                        disabled={ticketPage <= 1 || isLoadingTickets}
                        onClick={() => setTicketPage((p) => p - 1)}
                      >
                        <ChevronLeft className="h-3 w-3" />
                      </Button>
                      <Button
                        size="icon"
                        variant="outline"
                        className="h-6 w-6"
                        disabled={ticketPage >= Math.ceil(ticketsTotal / TICKETS_PER_PAGE) || isLoadingTickets}
                        onClick={() => setTicketPage((p) => p + 1)}
                      >
                        <ChevronRight className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* RIGHT: Form / Ticket detail */}
          <div className="col-span-12 lg:col-span-8 space-y-4">

            {/* New Ticket Form */}
            {showForm && (
              <Card>
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-base">Nuevo Ticket</CardTitle>
                    <Button size="icon" variant="ghost" onClick={() => setShowForm(false)}>
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleCreateTicket} className="space-y-4">
                    <div className="grid grid-cols-2 gap-3">
                      <div className="space-y-1">
                        <div className="flex items-center justify-between">
                          <Label className="text-xs">Tipo de Atención *</Label>
                          <Button type="button" variant="ghost" size="icon" className="h-6 w-6" onClick={() => openCatalogModal("type")}>
                            <Pencil className="h-3 w-3" />
                          </Button>
                        </div>
                        <Select value={formType} onValueChange={setFormType}>
                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {catalogs?.type?.map((t: any) => (
                              <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-1">
                        <div className="flex items-center justify-between">
                          <Label className="text-xs">Canal</Label>
                          <Button type="button" variant="ghost" size="icon" className="h-6 w-6" onClick={() => openCatalogModal("channel")}>
                            <Pencil className="h-3 w-3" />
                          </Button>
                        </div>
                        <Select value={formChannel} onValueChange={setFormChannel}>
                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {catalogs?.channel?.map((c: any) => (
                              <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-1">
                        <div className="flex items-center justify-between">
                          <Label className="text-xs">Prioridad</Label>
                          <Button type="button" variant="ghost" size="icon" className="h-6 w-6" onClick={() => openCatalogModal("priority")}>
                            <Pencil className="h-3 w-3" />
                          </Button>
                        </div>
                        <Select value={formPriority} onValueChange={setFormPriority}>
                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {catalogs?.priority?.map((p: any) => (
                              <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-1">
                        <Label className="text-xs">Seleccionar Pedido</Label>
                        <Select value={formSaleId} onValueChange={setFormSaleId}>
                          <SelectTrigger className="h-9">
                            <SelectValue placeholder="Seleccionar pedido (opcional)" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="none">Sin pedido</SelectItem>
                            {customerContext?.recent_sales?.map((sale: any) => (
                              <SelectItem key={sale.id} value={String(sale.id)}>
                                {sale.sale_number} — {new Date(sale.sale_date).toLocaleDateString("es-CL", { day: "2-digit", month: "short", year: "numeric" })}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-1">
                        <Label className="text-xs">Asignar Responsable</Label>
                        <Select value={formAssignedTo} onValueChange={setFormAssignedTo}>
                          <SelectTrigger className="h-9">
                            <SelectValue placeholder="Seleccionar responsable" />
                          </SelectTrigger>
                          <SelectContent>
                            {isLoadingSupervisors ? (
                              <SelectItem value="loading" disabled>Cargando...</SelectItem>
                            ) : supervisors.length === 0 ? (
                              <SelectItem value="empty" disabled>Sin supervisores</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-xs">Fecha de Resolución</Label>
                        <Input
                          type="datetime-local"
                          value={formDueDate}
                          onChange={(e) => setFormDueDate(e.target.value)}
                          className="h-9"
                        />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs">Asunto *</Label>
                      <Input
                        value={formSubject}
                        onChange={(e) => setFormSubject(e.target.value)}
                        placeholder="Ej: Consulta sobre pedido #001234"
                        className="h-9"
                      />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs">Descripción</Label>
                      <Textarea
                        value={formDescription}
                        onChange={(e) => setFormDescription(e.target.value)}
                        rows={3}
                        placeholder="Detalle de la atención..."
                      />
                    </div>
                    <div className="flex justify-end gap-2">
                      <Button type="button" variant="outline" size="sm" onClick={() => setShowForm(false)}>
                        Cancelar
                      </Button>
                      <Button type="submit" size="sm" disabled={isSaving}>
                        {isSaving ? "Guardando..." : "Crear Ticket"}
                      </Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            )}

            {/* Ticket detail */}
            {!showForm && selectedTicket && (
              <>
                <Card>
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-xs text-slate-500">{selectedTicket.ticket_number} · {selectedTicket.opened_at}</p>
                        <h2 className="text-base font-semibold text-slate-900 mt-0.5">{selectedTicket.subject}</h2>
                      </div>
                      <div className="flex items-center gap-2 shrink-0">
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[selectedTicket.status]}`}>
                          {STATUS_LABELS[selectedTicket.status]}
                        </span>
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${PRIORITY_COLORS[selectedTicket.priority]}`}>
                          {PRIORITY_LABELS[selectedTicket.priority]}
                        </span>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex gap-4 text-xs text-slate-500">
                      <span className="flex items-center gap-1">{CHANNEL_ICONS[selectedTicket.channel]} {selectedTicket.channel}</span>
                      <span>{selectedTicket.type_label || TYPE_LABELS[selectedTicket.type] || selectedTicket.type}</span>
                      {selectedTicket.assigned_to && (
                        <span>Asignado: {fullName(selectedTicket.assigned_to as any)}</span>
                      )}
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 bg-slate-50/50 p-2 rounded-lg border border-dashed border-slate-200">
                      <div className="flex flex-col gap-0.5">
                        <span className="text-[10px] font-bold text-slate-400 uppercase">Pedido Relacionado</span>
                        {selectedTicket.sale ? (
                          <span className="text-xs font-semibold text-blue-600">
                            #{selectedTicket.sale.sale_number} — {selectedTicket.sale.sale_date ? new Date(selectedTicket.sale.sale_date).toLocaleDateString("es-CL", { day: "2-digit", month: "short", year: "numeric" }) : "Sin fecha"}
                          </span>
                        ) : (
                          <span className="text-xs text-slate-400 italic">No asociado</span>
                        )}
                      </div>
                      <div className="flex flex-col gap-0.5">
                        <span className="text-[10px] font-bold text-slate-400 uppercase">Fecha de Resolución</span>
                        <span className={`text-xs font-medium ${selectedTicket.due_date ? "text-slate-700" : "text-slate-400 italic"}`}>
                          {selectedTicket.due_date || "Sin fecha límite"}
                        </span>
                      </div>
                    </div>

                    {selectedTicket.description && (
                      <div>
                        <p className="text-xs font-medium text-slate-600 mb-1">Descripción</p>
                        <p className="text-sm text-slate-700 bg-slate-50 rounded-lg p-3">{selectedTicket.description}</p>
                      </div>
                    )}

                    <Separator />

                    {/* Action buttons */}
                    <div className="flex flex-wrap gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        className="gap-1 text-xs"
                        disabled={selectedTicket.status === "cerrado"}
                        onClick={() => { setNewStatus(selectedTicket.status); setShowStatusChange(true); }}
                      >
                        <RefreshCw className="h-3.5 w-3.5" /> Cambiar Estado
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="gap-1 text-xs"
                        onClick={() => setShowFollowupForm(!showFollowupForm)}
                      >
                        <Calendar className="h-3.5 w-3.5" /> Agendar Seguimiento
                      </Button>
                      {selectedTicket.status !== "resuelto" && selectedTicket.status !== "cerrado" && (
                        <Button
                          size="sm"
                          className="gap-1 text-xs bg-green-600 hover:bg-green-700"
                          onClick={() => { setNewStatus("resuelto"); setShowStatusChange(true); }}
                        >
                          <CheckCircle2 className="h-3.5 w-3.5" /> Resolver
                        </Button>
                      )}
                    </div>

                    {/* Status change form */}
                    {showStatusChange && (
                      <form onSubmit={handleChangeStatus} className="border rounded-lg p-3 space-y-3 bg-slate-50">
                        <p className="text-xs font-semibold text-slate-700">Cambiar Estado</p>
                        <Select value={newStatus} onValueChange={setNewStatus}>
                          <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {Object.entries(STATUS_LABELS).map(([v, l]) => (
                              <SelectItem key={v} value={v} className="text-xs">{l}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Input
                          value={statusComment}
                          onChange={(e) => setStatusComment(e.target.value)}
                          placeholder="Comentario (opcional)"
                          className="h-8 text-xs"
                        />
                        <div className="flex gap-2 justify-end">
                          <Button type="button" size="sm" variant="ghost" className="text-xs h-7" onClick={() => setShowStatusChange(false)}>
                            Cancelar
                          </Button>
                          <Button type="submit" size="sm" className="text-xs h-7" disabled={isChangingStatus}>
                            {isChangingStatus ? "..." : "Confirmar"}
                          </Button>
                        </div>
                      </form>
                    )}

                    {/* Followup form */}
                    {showFollowupForm && (
                      <form onSubmit={handleCreateFollowup} className="border rounded-lg p-3 space-y-3 bg-slate-50">
                        <p className="text-xs font-semibold text-slate-700">Nuevo Seguimiento</p>
                        <Textarea
                          value={followupNotes}
                          onChange={(e) => setFollowupNotes(e.target.value)}
                          placeholder="Descripción del seguimiento..."
                          rows={2}
                          className="text-xs"
                        />
                        <Input
                          type="datetime-local"
                          value={followupDate}
                          onChange={(e) => setFollowupDate(e.target.value)}
                          className="h-8 text-xs"
                        />
                        <div className="flex gap-2 justify-end">
                          <Button type="button" size="sm" variant="ghost" className="text-xs h-7" onClick={() => setShowFollowupForm(false)}>
                            Cancelar
                          </Button>
                          <Button type="submit" size="sm" className="text-xs h-7" disabled={isSavingFollowup}>
                            {isSavingFollowup ? "..." : "Agendar"}
                          </Button>
                        </div>
                      </form>
                    )}
                  </CardContent>
                </Card>

                {/* Resolution notes */}
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-semibold text-slate-700">Notas de Resolución</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <Textarea
                      value={resolutionNotes}
                      onChange={(e) => setResolutionNotes(e.target.value)}
                      rows={3}
                      placeholder="Escribe aquí la solución o notas del caso..."
                    />
                    <div className="flex justify-end">
                      <Button size="sm" variant="outline" className="text-xs" onClick={handleSaveNotes}>
                        Guardar Notas
                      </Button>
                    </div>
                  </CardContent>
                </Card>

                {/* History timeline */}
                {selectedTicket.histories && selectedTicket.histories.length > 0 && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm font-semibold text-slate-700 flex items-center gap-1">
                        <Clock className="h-4 w-4" /> Historial de Estados
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        {selectedTicket.histories.map((h: any) => (
                          <div key={h.id} className="flex gap-3">
                            <div className="flex flex-col items-center">
                              <div className="h-2 w-2 rounded-full bg-blue-400 mt-1.5" />
                              <div className="w-px flex-1 bg-slate-200 mt-1" />
                            </div>
                            <div className="pb-3">
                              <div className="flex items-center gap-2 text-xs">
                                {h.old_status && (
                                  <>
                                    <span className={`px-1.5 py-0.5 rounded ${STATUS_COLORS[h.old_status]}`}>
                                      {STATUS_LABELS[h.old_status]}
                                    </span>
                                    <ChevronRight className="h-3 w-3 text-slate-400" />
                                  </>
                                )}
                                <span className={`px-1.5 py-0.5 rounded ${STATUS_COLORS[h.new_status]}`}>
                                  {STATUS_LABELS[h.new_status]}
                                </span>
                              </div>
                              {h.comment && <p className="text-xs text-slate-500 mt-0.5">{h.comment}</p>}
                              <div className="mt-0.5">
                                <p className="text-[10px] text-slate-500 font-medium">
                                  {fullName((h.user ?? h.changed_by) as any)}
                                </p>
                                {(h.user?.email ?? h.changed_by?.email) && (
                                  <p className="text-[10px] text-slate-400">
                                    {h.user?.email ?? h.changed_by?.email}
                                  </p>
                                )}
                                <p className="text-[10px] text-slate-500">{h.created_at}</p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}

                {/* Followups */}
                {selectedTicket.followups && selectedTicket.followups.length > 0 && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm font-semibold text-slate-700 flex items-center gap-1">
                        <Calendar className="h-4 w-4" /> Seguimientos
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      {selectedTicket.followups.map((f: any) => (
                        <div key={f.id} className="flex items-start justify-between border rounded-lg p-3 bg-slate-50">
                          <div className="space-y-1">
                            <p className="text-xs font-medium text-slate-700">{f.notes}</p>
                            <p className="text-[10px] text-slate-500">Programado: {f.scheduled_at}</p>
                            {f.completed_at && (
                              <p className="text-[10px] text-green-600">Completado: {f.completed_at}</p>
                            )}
                          </div>
                          <div className="flex items-center gap-2 shrink-0">
                            <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
                              f.status === "completed" ? "bg-green-100 text-green-700" :
                              f.status === "cancelled" ? "bg-red-100 text-red-700" :
                              "bg-yellow-100 text-yellow-700"
                            }`}>
                              {f.status === "completed" ? "Completado" : f.status === "cancelled" ? "Cancelado" : "Pendiente"}
                            </span>
                            {f.status === "pending" && (
                              <Button
                                size="sm"
                                variant="ghost"
                                className="h-6 text-[10px] text-green-700"
                                onClick={() => handleCompleteFollowup(f)}
                              >
                                <CheckCircle2 className="h-3.5 w-3.5" />
                              </Button>
                            )}
                          </div>
                        </div>
                      ))}
                    </CardContent>
                  </Card>
                )}
              </>
            )}

            {/* Empty state */}
            {!showForm && !selectedTicket && !isLoadingTicket && (
              <div className="flex flex-col items-center justify-center h-64 text-slate-400 gap-3 border-2 border-dashed rounded-xl">
                <Headphones className="h-10 w-10 opacity-30" />
                <p className="text-sm">Selecciona un ticket o crea uno nuevo</p>
                <Button size="sm" variant="outline" className="gap-1" onClick={() => setShowForm(true)}>
                  <Plus className="h-4 w-4" /> Nuevo Ticket
                </Button>
              </div>
            )}

            {isLoadingTicket && (
              <div className="flex items-center justify-center h-40">
                <RefreshCw className="h-6 w-6 animate-spin text-blue-400" />
              </div>
            )}
          </div>
        </div>
      )}

      {/* Catalog modal */}
      {showCatalogModal && (
        <>
          <Dialog open={showCatalogModal} onOpenChange={setShowCatalogModal}>
            <DialogContent className="max-w-sm">
              <DialogHeader>
                <DialogTitle>
                  Gestionar{" "}
                  {catalogType === "type" && "Tipos"}
                  {catalogType === "channel" && "Canales"}
                  {catalogType === "priority" && "Prioridades"}
                </DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label className="text-[10px] font-bold text-slate-400 uppercase">Opciones Actuales</Label>
                  <div className="max-h-40 overflow-y-auto border rounded-md divide-y divide-slate-100 bg-slate-50/50">
                    {catalogs?.[catalogType as keyof typeof catalogs]?.map((item: any) => (
                      <div key={item.value} className="flex items-center justify-between p-2 text-sm">
                        <span className={item.is_custom ? "text-slate-700 font-medium" : "text-slate-400 italic"}>
                          {item.label}
                        </span>
                        {item.is_custom ? (
                          <button
                            onClick={() => setItemToDelete(item.id)}
                            className="text-red-400 hover:text-red-600 transition-colors p-1"
                          >
                            <Trash2 className="h-4 w-4" />
                          </button>
                        ) : (
                          <span className="text-[9px] bg-slate-200 text-slate-500 px-1.5 py-0.5 rounded font-bold uppercase">
                            Sistema
                          </span>
                        )}
                      </div>
                    ))}
                    {catalogs?.[catalogType as keyof typeof catalogs]?.length === 0 && (
                      <div className="p-4 text-center text-xs text-slate-400">No hay opciones personalizadas.</div>
                    )}
                  </div>
                </div>
                <hr className="border-slate-100" />
                <div className="space-y-1">
                  <Label className="text-xs">Agregar Nuevo Nombre</Label>
                  <div className="flex gap-2">
                    <Input
                      placeholder="Ej: Reclamo urgente..."
                      value={newCatalogValue}
                      onChange={(e) => setNewCatalogValue(e.target.value)}
                      onKeyDown={(e) => e.key === "Enter" && newCatalogValue.trim() && handleSaveCatalog()}
                    />
                    <Button onClick={handleSaveCatalog} disabled={!newCatalogValue.trim()} size="sm">
                      Añadir
                    </Button>
                  </div>
                </div>
              </div>
            </DialogContent>
          </Dialog>

          <AlertDialog open={!!itemToDelete} onOpenChange={() => setItemToDelete(null)}>
            <AlertDialogContent className="max-w-[400px]">
              <div className="p-6 space-y-4">
                <div className="space-y-2">
                  <h2 className="text-lg font-semibold text-slate-900">¿Eliminar esta opción?</h2>
                  <p className="text-sm text-slate-500">
                    Esta acción es reversible desde la base de datos. La opción ya no aparecerá en nuevos tickets.
                  </p>
                </div>
                <div className="flex justify-end gap-3 pt-4">
                  <Button variant="outline" type="button" onClick={() => setItemToDelete(null)}>
                    Cancelar
                  </Button>
                  <Button
                    variant="destructive"
                    type="button"
                    onClick={() => {
                      if (itemToDelete) {
                        handleDeleteCatalog(itemToDelete);
                        setItemToDelete(null);
                      }
                    }}
                  >
                    Confirmar Eliminación
                  </Button>
                </div>
              </div>
            </AlertDialogContent>
          </AlertDialog>
        </>
      )}
    </div>
  );
}