/**
 * Skeleton Loader Component
 * Placeholder animado para melhorar percepção de carregamento
 * @version 1.0
 */

import { cn } from "@/lib/utils";

// ============================================================================
// TIPOS
// ============================================================================

export interface SkeletonProps {
  /**
   * Variante do skeleton
   */
  variant?: "text" | "avatar" | "card" | "table" | "calendar" | "custom";

  /**
   * Largura do skeleton
   */
  width?: string | number;

  /**
   * Altura do skeleton
   */
  height?: string | number;

  /**
   * Border radius
   */
  rounded?: "none" | "sm" | "base" | "md" | "lg" | "xl" | "full";

  /**
   * Tipo de animação
   */
  animated?: "pulse" | "shimmer" | "none";

  /**
   * Classes adicionais
   */
  className?: string;

  /**
   * Número de linhas (para variant='text')
   */
  lines?: number;
}

// ============================================================================
// COMPONENTE BASE
// ============================================================================

export function Skeleton({
  variant = "custom",
  width,
  height,
  rounded = "md",
  animated = "pulse",
  className,
  lines = 1,
}: SkeletonProps) {
  const baseClasses = "bg-gray-200 dark:bg-gray-700";

  const roundedClasses = {
    none: "rounded-none",
    sm: "rounded-sm",
    base: "rounded",
    md: "rounded-md",
    lg: "rounded-lg",
    xl: "rounded-xl",
    full: "rounded-full",
  };

  const animationClasses = {
    pulse: "animate-pulse",
    shimmer:
      "animate-shimmer bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:1000px_100%]",
    none: "",
  };

  const style: React.CSSProperties = {
    width: typeof width === "number" ? `${width}px` : width,
    height: typeof height === "number" ? `${height}px` : height,
  };

  const classes = cn(
    baseClasses,
    roundedClasses[rounded],
    animationClasses[animated],
    className
  );

  // Variantes pré-configuradas
  switch (variant) {
    case "text":
      return (
        <div
          className="space-y-2"
          role="status"
          aria-busy="true"
          aria-label="Carregando texto"
        >
          {Array.from({ length: lines }).map((_, i) => (
            <div
              key={i}
              className={classes}
              style={{
                height: height || "1rem",
                width: i === lines - 1 && lines > 1 ? "80%" : width || "100%",
              }}
            />
          ))}
        </div>
      );

    case "avatar":
      return (
        <div
          className={cn(classes, "shrink-0")}
          style={{ width: width || "40px", height: height || "40px" }}
          role="status"
          aria-busy="true"
          aria-label="Carregando avatar"
        />
      );

    case "card":
      return (
        <div
          className={cn(
            "p-4 border border-gray-200 dark:border-gray-700",
            roundedClasses[rounded]
          )}
          role="status"
          aria-busy="true"
          aria-label="Carregando card"
        >
          <div className="space-y-3">
            <div className={cn(classes, "h-4")} style={{ width: "60%" }} />
            <div className={cn(classes, "h-3")} />
            <div className={cn(classes, "h-3")} style={{ width: "80%" }} />
          </div>
        </div>
      );

    case "table":
      return (
        <div
          className="space-y-2"
          role="status"
          aria-busy="true"
          aria-label="Carregando tabela"
        >
          {Array.from({ length: lines || 5 }).map((_, i) => (
            <div key={i} className="flex gap-4">
              <div className={cn(classes, "h-10")} style={{ width: "30%" }} />
              <div className={cn(classes, "h-10")} style={{ width: "40%" }} />
              <div className={cn(classes, "h-10")} style={{ width: "30%" }} />
            </div>
          ))}
        </div>
      );

    case "calendar":
      return (
        <div
          className="space-y-4"
          role="status"
          aria-busy="true"
          aria-label="Carregando calendário"
        >
          {/* Header */}
          <div className="flex justify-between items-center">
            <div className={cn(classes, "h-8")} style={{ width: "150px" }} />
            <div className="flex gap-2">
              <div className={cn(classes, "h-8 w-8")} />
              <div className={cn(classes, "h-8 w-8")} />
            </div>
          </div>

          {/* Week days */}
          <div className="grid grid-cols-7 gap-2">
            {Array.from({ length: 7 }).map((_, i) => (
              <div key={i} className={cn(classes, "h-6")} />
            ))}
          </div>

          {/* Calendar grid */}
          <div className="grid grid-cols-7 gap-2">
            {Array.from({ length: 35 }).map((_, i) => (
              <div key={i} className={cn(classes, "h-12")} />
            ))}
          </div>
        </div>
      );

    default:
      return (
        <div
          className={classes}
          style={style}
          role="status"
          aria-busy="true"
          aria-label="Carregando conteúdo"
        />
      );
  }
}

// ============================================================================
// COMPONENTES ESPECIALIZADOS
// ============================================================================

/**
 * Skeleton para Card de Consulta
 */
export function SkeletonAppointmentCard({ count = 1 }: { count?: number }) {
  return (
    <div
      className="space-y-4"
      role="status"
      aria-busy="true"
      aria-label="Carregando consultas"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
        >
          <div className="flex items-start gap-4">
            {/* Avatar */}
            <Skeleton variant="avatar" rounded="full" width={48} height={48} />

            {/* Content */}
            <div className="flex-1 space-y-2">
              <Skeleton variant="text" width="60%" height={16} />
              <Skeleton variant="text" width="40%" height={14} />
              <div className="flex gap-2 mt-2">
                <Skeleton width={80} height={24} rounded="full" />
                <Skeleton width={60} height={24} rounded="full" />
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-2">
              <Skeleton width={32} height={32} rounded="md" />
              <Skeleton width={32} height={32} rounded="md" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/**
 * Skeleton para Calendário do Médico
 */
export function SkeletonCalendar() {
  return <Skeleton variant="calendar" />;
}

/**
 * Skeleton para Lista de Pacientes
 */
export function SkeletonPatientList({ count = 5 }: { count?: number }) {
  return (
    <div
      className="space-y-2"
      role="status"
      aria-busy="true"
      aria-label="Carregando pacientes"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
        >
          <Skeleton variant="avatar" rounded="full" width={40} height={40} />
          <div className="flex-1 space-y-2">
            <Skeleton width="50%" height={16} />
            <Skeleton width="30%" height={14} />
          </div>
          <Skeleton width={80} height={32} rounded="md" />
        </div>
      ))}
    </div>
  );
}

/**
 * Skeleton para Card de Relatório
 */
export function SkeletonReportCard({ count = 3 }: { count?: number }) {
  return (
    <div
      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
      role="status"
      aria-busy="true"
      aria-label="Carregando relatórios"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
        >
          <div className="space-y-4">
            <div className="flex justify-between items-start">
              <Skeleton width="60%" height={20} />
              <Skeleton width={24} height={24} rounded="md" />
            </div>
            <Skeleton width="100%" height={48} />
            <Skeleton width="40%" height={14} />
          </div>
        </div>
      ))}
    </div>
  );
}

/**
 * Skeleton para Tabela
 */
export function SkeletonTable({
  rows = 5,
  columns = 4,
}: {
  rows?: number;
  columns?: number;
}) {
  return (
    <div
      className="space-y-2"
      role="status"
      aria-busy="true"
      aria-label="Carregando tabela"
    >
      {/* Header */}
      <div
        className="grid gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-t-lg"
        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
      >
        {Array.from({ length: columns }).map((_, i) => (
          <Skeleton key={i} height={16} />
        ))}
      </div>

      {/* Rows */}
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <div
          key={rowIndex}
          className="grid gap-4 p-4 border-b border-gray-200 dark:border-gray-700"
          style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
        >
          {Array.from({ length: columns }).map((_, colIndex) => (
            <Skeleton key={colIndex} height={14} />
          ))}
        </div>
      ))}
    </div>
  );
}
