import * as React from "react";
import { type LucideIcon, Inbox, ShieldAlert, WifiOff, AlertTriangle } from "lucide-react";
import { cn } from "@/lib/utils";

export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("skeleton h-4 w-full", className)} {...props} />;
}

export function SkeletonCard({ lines = 3, className }: { lines?: number; className?: string }) {
  return (
    <div className={cn("surface p-5 space-y-3", className)}>
      <Skeleton className="h-3 w-1/3" />
      <Skeleton className="h-7 w-1/2" />
      {Array.from({ length: lines - 1 }).map((_, i) => (
        <Skeleton key={i} className="h-3" style={{ width: `${85 - i * 15}%` }} />
      ))}
    </div>
  );
}

export function SkeletonTable({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
  return (
    <div className="surface overflow-hidden">
      <div className="flex gap-4 border-b border-border px-4 py-3">
        {Array.from({ length: cols }).map((_, i) => (
          <Skeleton key={i} className="h-3 flex-1" />
        ))}
      </div>
      {Array.from({ length: rows }).map((_, r) => (
        <div key={r} className="flex gap-4 border-b border-border px-4 py-3.5 last:border-0">
          {Array.from({ length: cols }).map((_, c) => (
            <Skeleton key={c} className="h-3.5 flex-1" style={{ opacity: 1 - r * 0.1 }} />
          ))}
        </div>
      ))}
    </div>
  );
}

export function EmptyState({
  icon: Icon = Inbox,
  title,
  description,
  action,
  className,
  compact,
}: {
  icon?: LucideIcon;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
  compact?: boolean;
}) {
  return (
    <div className={cn("flex flex-col items-center justify-center text-center", compact ? "px-4 py-8" : "px-6 py-14", className)}>
      <div className={cn("mb-3 flex items-center justify-center rounded-full bg-surface-2 text-fg-subtle", compact ? "size-10" : "size-12")}>
        <Icon className={compact ? "size-5" : "size-6"} strokeWidth={1.5} />
      </div>
      <h3 className="text-sm font-semibold text-fg">{title}</h3>
      {description ? <p className="mt-1 max-w-xs text-xs text-fg-muted text-balance">{description}</p> : null}
      {action ? <div className="mt-4 flex gap-2">{action}</div> : null}
    </div>
  );
}

export function ErrorState({ kind = "unknown", title, description, action }: { kind?: "network" | "permission" | "conflict" | "unknown"; title?: string; description?: string; action?: React.ReactNode }) {
  const map = {
    network: { icon: WifiOff, title: "Connection problem", description: "We couldn't reach the server. Check your connection and try again." },
    permission: { icon: ShieldAlert, title: "Permission denied", description: "You don't have access to this. Ask an administrator if you need it." },
    conflict: { icon: AlertTriangle, title: "Conflict", description: "The apartment is not available for these dates." },
    unknown: { icon: AlertTriangle, title: "Something went wrong", description: "An unexpected error occurred. Try again or contact the administrator." },
  }[kind];
  return <EmptyState icon={map.icon} title={title ?? map.title} description={description ?? map.description} action={action} />;
}