"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Spinner } from "@/components/ui/spinner"
import { Skeleton } from "@/components/ui/skeleton"
import { Loader as ShadixLoader } from "@/components/shadix-ui/components/loader"

export type LoadingVariant = "spinner" | "skeleton" | "deals-kanban" | "api"

/** default: compact block; page: detail-style min height; panel: flex-1 / embedded; section: tab/inline panels */
export type LoadingLayout = "default" | "page" | "panel" | "section"

export type LoadingSize = "sm" | "md" | "lg"

type LoadingProps = {
  variant?: LoadingVariant
  layout?: LoadingLayout
  size?: LoadingSize
  message?: string
  skeletonCount?: number
  renderSkeletonRow?: (index: number) => React.ReactNode
  spinnerClassName?: string
  className?: string
}

const SIZE_CLASS: Record<LoadingSize, string> = {
  sm: "size-4",
  md: "size-8",
  lg: "size-10",
}

const LAYOUT_CLASS: Record<LoadingLayout, string> = {
  default:
    "flex flex-col items-center justify-center gap-3 py-8 text-muted-foreground",
  page: "flex min-h-[400px] w-full flex-col items-center justify-center gap-3 p-6 sm:p-10 text-muted-foreground",
  panel:
    "flex min-h-[240px] w-full flex-1 flex-col items-center justify-center gap-3 p-6 text-muted-foreground",
  section:
    "flex w-full flex-col items-center justify-center gap-3 py-20 text-muted-foreground",
}

const defaultSkeletonRow = () => (
  <div className="flex gap-2 py-3 first:pt-0 last:pb-0">
    <Skeleton className="size-7 shrink-0 rounded-[7px]" />
    <div className="flex-1 space-y-1.5">
      <Skeleton className="h-3.5 w-3/4 rounded" />
      <Skeleton className="h-2.5 w-12 rounded" />
    </div>
  </div>
)

/**
 * Must stay aligned with `GRID` in `deal-list-view.tsx` so the skeleton matches the real table.
 */
const DEAL_LIST_TABLE_GRID =
  "grid-cols-[40px_minmax(0,1fr)_minmax(5.5rem,auto)] sm:grid-cols-[40px_minmax(0,1.5fr)_minmax(6.5rem,1fr)_minmax(5.5rem,auto)] lg:grid-cols-[40px_minmax(0,1.55fr)_minmax(0,0.95fr)_minmax(0,0.78fr)_minmax(0,0.62fr)_minmax(0,0.52fr)_minmax(0,0.52fr)_minmax(0,0.92fr)_minmax(0,0.82fr)_minmax(0,0.92fr)_minmax(0,1fr)_minmax(6.75rem,auto)]"

/** List / table view skeleton for the leads pipeline table (matches `DealListView` chrome). */
export function DealsLeadTableSkeleton({
  className,
  rowCount = 8,
}: {
  className?: string
  rowCount?: number
}) {
  return (
    <div
      className={cn(
        "w-full min-h-[min(420px,70vh)] flex-1 rounded-2xl border border-border/60 bg-white/80 backdrop-blur-md shadow-premium overflow-hidden flex flex-col animate-pulse",
        className,
      )}
      data-slot="loading-deals-lead-table"
      role="status"
      aria-busy="true"
      aria-live="polite"
    >
      <div className="overflow-x-auto custom-scrollbar flex-1 min-h-0">
        <div
          className={cn(
            "grid gap-3 px-4 sm:px-6 py-2.5 bg-gray-50/50 border-b border-border/40 items-center",
            DEAL_LIST_TABLE_GRID,
          )}
        >
          <Skeleton className="size-4 rounded-md bg-border/35 shrink-0" />
          <Skeleton className="h-3 w-24 rounded bg-border/35" />
          <Skeleton className="hidden lg:block h-3 w-20 rounded bg-border/30" />
          <Skeleton className="hidden sm:block h-3 w-14 justify-self-center rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-16 rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-12 rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-14 rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-14 rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-14 rounded bg-border/30" />
          <Skeleton className="hidden lg:block h-3 w-12 rounded bg-border/30" />
          <Skeleton className="h-3 w-16 justify-self-end rounded bg-border/30" />
        </div>
        <div className="divide-y divide-border/30">
          {Array.from({ length: rowCount }).map((_, i) => (
            <div
              key={i}
              className={cn(
                "grid gap-3 px-4 sm:px-6 py-2.5 items-center",
                DEAL_LIST_TABLE_GRID,
              )}
            >
              <Skeleton className="size-4 rounded-md bg-border/25 shrink-0" />
              <div className="flex items-center gap-3 min-w-0">
                <Skeleton className="size-9 shrink-0 rounded-xl bg-border/30" />
                <div className="flex-1 min-w-0 space-y-2">
                  <Skeleton className="h-3.5 w-[72%] max-w-[220px] rounded bg-border/35" />
                  <Skeleton className="h-2.5 w-[55%] max-w-[160px] rounded bg-border/25" />
                </div>
              </div>
              <Skeleton className="hidden lg:block h-3 w-3/4 rounded bg-border/25" />
              <Skeleton className="hidden sm:flex min-w-0 justify-center px-0.5">
                <Skeleton className="h-6 w-16 rounded-lg bg-border/25" />
              </Skeleton>
              <Skeleton className="hidden lg:block h-3 w-20 rounded bg-border/25" />
              <Skeleton className="hidden lg:block h-3 w-14 rounded bg-border/25" />
              <Skeleton className="hidden lg:block h-6 w-full max-w-[5.5rem] rounded-lg bg-border/20" />
              <Skeleton className="hidden lg:block h-3 w-4/5 rounded bg-border/25" />
              <Skeleton className="hidden lg:block h-3 w-2/3 rounded bg-border/25" />
              <div className="hidden lg:flex items-center gap-2 min-w-0">
                <Skeleton className="size-7 rounded-full bg-border/25 shrink-0" />
                <Skeleton className="h-3 flex-1 max-w-[5rem] rounded bg-border/25" />
              </div>
              <div className="flex justify-end gap-1.5">
                <Skeleton className="size-8 rounded-lg bg-border/20" />
                <Skeleton className="size-8 rounded-lg bg-border/20" />
                <Skeleton className="size-8 rounded-lg bg-border/20" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

/** Kanban-style skeleton for leads/deals boards (shared by deals page Suspense fallbacks). */
export function DealsKanbanSkeleton({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "h-full flex gap-4 overflow-x-auto pb-4 scrollbar-themed animate-pulse",
        className,
      )}
      data-slot="loading-deals-kanban"
    >
      {[1, 2, 3, 4].map((i) => (
        <div key={i} className="w-[305px] flex flex-col shrink-0 gap-4">
          <div className="flex items-center gap-3">
            <Skeleton className="h-8 w-32 rounded-lg bg-border/40" />
            <Skeleton className="h-4 w-12 rounded-full bg-border/20" />
          </div>
          <div className="flex flex-col gap-3">
            {[1, 2, 3].map((j) => (
              <div key={j} className="relative">
                <Skeleton className="h-32 w-full rounded-2xl bg-border/20" />
                <div className="absolute bottom-4 left-4 right-4 flex flex-col gap-2">
                  <Skeleton className="h-3 w-3/4 rounded bg-border/30" />
                  <Skeleton className="h-3 w-1/2 rounded bg-border/30" />
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

export function Loading({
  variant = "spinner",
  layout = "default",
  size = "md",
  message,
  skeletonCount = 5,
  renderSkeletonRow = defaultSkeletonRow,
  spinnerClassName,
  className,
}: LoadingProps) {
  if (variant === "deals-kanban") {
    return <DealsKanbanSkeleton className={className} />
  }

  if (variant === "skeleton") {
    return (
      <div
        className={cn("flex flex-col", className)}
        data-slot="loading-skeleton"
      >
        {Array.from({ length: skeletonCount }).map((_, i) => (
          <div key={i}>{renderSkeletonRow(i)}</div>
        ))}
      </div>
    )
  }

  return (
    <div
      className={cn(LAYOUT_CLASS[layout], className)}
      data-slot="loading-spinner"
      role="status"
      aria-busy="true"
      aria-live="polite"
    >
      {variant === "api" ? (
        <ShadixLoader variant="dual-arc" size={"sm"} />
      ) : (
        <Spinner className={cn(SIZE_CLASS[size], "text-accent", spinnerClassName)} />
      )}
      {message ? (
        <p className="max-w-md text-center text-sm font-medium font-['Lexend_Deca'] text-muted-foreground">
          {message}
        </p>
      ) : null}
    </div>
  )
}