"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import type { ComplaintRecord } from "@/types/modules/complaint";
import { Badge } from "@/components/ui/badge";

type ComplaintsHistoryProps = {
  complaintStats: Record<string, unknown> | undefined;
  customerComplaints: ComplaintRecord[];
  selectedComplaintId: string | number | undefined | null;
  showComplaintsSkeleton: boolean;
  onSelectComplaint: (c: ComplaintRecord) => void;
};

export function ComplaintsHistory({
  complaintStats,
  customerComplaints,
  selectedComplaintId,
  showComplaintsSkeleton,
  onSelectComplaint,
}: ComplaintsHistoryProps) {
  return (
    <Card className="rounded-xl border-slate-200/80 bg-white shadow-sm" id="reclamos">
      <CardHeader>
        <CardTitle className="text-base font-semibold">Historial de Reclamos</CardTitle>
        <CardDescription>Tickets registrados para este cliente</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {complaintStats && (
          <div className="grid grid-cols-2 gap-2">
            {/* Aquí puedes mapear stats reales si el backend los envía */}
          </div>
        )}

        {showComplaintsSkeleton ? (
          <div className="space-y-2">
            <Skeleton className="h-12 w-full rounded-lg" />
            <Skeleton className="h-12 w-full rounded-lg" />
          </div>
        ) : customerComplaints.length === 0 ? (
          <p className="text-sm text-slate-500 py-4 text-center italic">No hay reclamos registrados.</p>
        ) : (
          <ul className="space-y-2">
            {customerComplaints.map((c) => (
              <li key={c.id}>
                <button
                  type="button"
                  className={`flex w-full flex-col rounded-lg border px-3 py-2 text-left text-sm transition-all ${
                    selectedComplaintId === c.id
                      ? "border-blue-500 bg-blue-50 ring-1 ring-blue-500"
                      : "border-slate-100 bg-white hover:bg-slate-50"
                  }`}
                  onClick={() => onSelectComplaint(c)}
                >
                  <div className="flex justify-between items-start w-full">
                    <span className="font-semibold text-slate-900">
                      {String(c.complaint_number ?? `#${c.id}`)} · {c.title}
                    </span>
                    <Badge variant="outline" className="text-[10px] uppercase">
                      {(c.status as any)?.name || "Sin estado"}
                    </Badge>
                  </div>
                  <span className="text-[10px] text-slate-500 mt-1 uppercase tracking-tighter">
                    Tipo: {(c.type as any)?.name || "No definido"}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}