"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { createPanelPageUrl } from "@/utils";
// Importamos el tipo de cliente real
import type { CustomerRecord } from "@/types/modules/customer";

const quickLinks = [
  { label: "Ventas", href: createPanelPageUrl("pos") },
  { label: "Pedidos", href: createPanelPageUrl("order-tracking") },
  { label: "Historial de Reclamos", href: "#reclamos" }, // Scroll a la lista de abajo
  { label: "Red Comercial", href: createPanelPageUrl("NetworkMembers") },
];

type CustomerContextCardProps = {
  customer?: CustomerRecord | null;
  showContextSkeleton: boolean;
};

export function CustomerContextCard({ customer, showContextSkeleton }: CustomerContextCardProps) {
  
  // Helper para mostrar el nombre (Prioriza nombre comercial o razón social)
  const displayName = customer?.name || customer?.business_name || "—";
  
  return (
    <Card className="rounded-xl border-slate-200/80 bg-white shadow-sm">
      <CardHeader>
        <CardTitle className="text-base font-semibold">Contexto Cliente</CardTitle>
        <CardDescription>Información general y accesos rápidos</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {showContextSkeleton ? (
          <div className="space-y-3">
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-4 w-1/2" />
            <Skeleton className="h-4 w-2/3" />
          </div>
        ) : customer ? (
          <>
            {/* Badge de estado si el cliente está inactivo o bloqueado */}
            {!customer.is_active && (
              <Badge
                className="w-full justify-center border-amber-200 bg-amber-50 text-amber-900 hover:bg-amber-50"
                variant="outline"
              >
                Cliente con restricciones
              </Badge>
            )}

            <dl className="space-y-2 text-sm">
              <div className="flex justify-between gap-2">
                <dt className="text-slate-500">Nombre</dt>
                <dd className="font-medium text-slate-900 text-right">
                  {displayName}
                </dd>
              </div>
              <div className="flex justify-between gap-2">
                <dt className="text-slate-500">RUT</dt>
                <dd className="font-medium text-blue-700 text-right">
                  {customer.tax_id || "—"}
                </dd>
              </div>
              <div className="flex justify-between gap-2">
                <dt className="text-slate-500">ID cliente</dt>
                <dd className="font-mono text-xs text-slate-700 text-right">
                  {customer.id}
                </dd>
              </div>
              <div className="flex justify-between gap-2">
                <dt className="text-slate-500">Email</dt>
                <dd className="font-medium text-slate-900 text-right truncate max-w-[150px]">
                  {customer.email || "—"}
                </dd>
              </div>
              <div className="flex justify-between gap-2">
                <dt className="text-slate-500">Teléfono</dt>
                <dd className="font-medium text-slate-900 text-right">
                  {customer.phone || "—"}
                </dd>
              </div>
            </dl>

            <nav className="space-y-1 border-t border-slate-100 pt-4">
              <p className="px-2 pb-2 text-[10px] font-bold uppercase tracking-wider text-slate-400">
                Accesos directos
              </p>
              {quickLinks.map((item) => (
                <Link
                  key={item.label}
                  className="flex items-center justify-between rounded-lg px-2 py-2 text-sm text-slate-700 hover:bg-slate-50 transition-colors"
                  href={item.href}
                >
                  <span className="flex items-center gap-2">
                    <span className="h-1.5 w-1.5 rounded-full bg-blue-600 shadow-[0_0_5px_rgba(37,99,235,0.5)]" />
                    {item.label}
                  </span>
                  <ChevronRight className="h-4 w-4 text-slate-400" />
                </Link>
              ))}
            </nav>
          </>
        ) : (
          <div className="py-4 text-center">
            <p className="text-sm text-slate-500 italic">No se ha seleccionado un cliente para ver su contexto.</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}