Error empty states

"use client"

import type * as React from "react"
import {
  CloudOff,
  Lock,
  RefreshCw,
  ServerCrash,
  TimerReset,
  Unplug,
} from "lucide-react"

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

/* Error empty family: 5 error, offline and permission empty states. Every variant drives one semantic tone family (danger / warning / muted) and shows it in the icon badge; its root carries data-tone. Colour comes ONLY from semantic tokens (transparency via color-mix), size = the padding plus icon and text scale. Renders without props too. Static - no motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Scale = {
  root: string
  icon: string
  badge: string
  title: string
  description: string
}

const scales: Record<StyledSize, Scale> = {
  sm: {
    root: "gap-2 p-6",
    icon: "size-6",
    badge: "size-12",
    title: "text-sm",
    description: "text-xs",
  },
  md: {
    root: "gap-3 p-8",
    icon: "size-8",
    badge: "size-16",
    title: "text-base",
    description: "text-sm",
  },
  lg: {
    root: "gap-3.5 p-10",
    icon: "size-10",
    badge: "size-20",
    title: "text-lg",
    description: "text-sm",
  },
  xl: {
    root: "gap-4 p-12",
    icon: "size-12",
    badge: "size-24",
    title: "text-xl",
    description: "text-base",
  },
}

interface EmptyProps {
  className?: string
  size?: StyledSize
  icon?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
}

type Tone = "danger" | "warning" | "muted"

/* Ton haritasi: rozet zemini + on-plan rengi + kenar. danger/warning gercek
   -soft token'larini kullanir; muted notr yuzeydir. */
const toneBadge: Record<Tone, string> = {
  danger:
    "bg-danger-soft text-danger-soft-foreground [border-color:color-mix(in_oklab,var(--color-danger)_28%,transparent)]",
  warning:
    "bg-warning-soft text-warning-soft-foreground [border-color:color-mix(in_oklab,var(--color-warning)_28%,transparent)]",
  muted: "bg-muted text-muted-foreground border-border",
}

const rootBase = "flex flex-col items-center justify-center text-center"

const iconBase = "[&_i]:leading-none [&_svg]:size-full"

const retryBtn =
  "inline-flex h-9 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-4 text-sm font-medium text-foreground outline-none transition-colors duration-(--motion-base) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none [&_i]:text-base [&_i]:leading-none [&_svg]:size-4 [&_svg]:shrink-0"

/* Shared shell: a toned badge plus title plus description plus an optional action. */
function ErrorShell({
  tone,
  fallbackIcon,
  className,
  size = "md",
  icon,
  title,
  description,
  action,
  defaultAction,
}: EmptyProps & {
  tone: Tone
  fallbackIcon: React.ReactNode
  defaultAction?: React.ReactNode
}) {
  const s = scales[size]
  return (
    <div
      data-slot="styled-empty"
      data-tone={tone}
      className={cn(rootBase, s.root, className)}
    >
      <span
        aria-hidden="true"
        className={cn(
          "flex items-center justify-center rounded-full border",
          toneBadge[tone],
          s.badge
        )}
      >
        <span className={cn(iconBase, s.icon)}>{icon ?? fallbackIcon}</span>
      </span>
      <p className={cn("font-semibold text-foreground", s.title)}>{title}</p>
      {description ? (
        <p className={cn("max-w-prose text-muted-foreground", s.description)}>
          {description}
        </p>
      ) : null}
      {action ?? defaultAction ? (
        <div className="mt-2">{action ?? defaultAction}</div>
      ) : null}
    </div>
  )
}

/* ErrorEmpty: genel sunucu hatasi, danger tonu + tekrar dene aksiyonu. */
export function ErrorEmpty({
  title = "Something went wrong",
  description = "We could not load this content. Try again in a moment.",
  ...props
}: EmptyProps) {
  return (
    <ErrorShell
      tone="danger"
      fallbackIcon={<ServerCrash />}
      title={title}
      description={description}
      defaultAction={
        <button type="button" data-slot="styled-empty-action" className={retryBtn}>
          <RefreshCw />
          Try again
        </button>
      }
      {...props}
    />
  )
}

/* OfflineEmpty: baglanti yok, warning tonu + yeniden baglan aksiyonu. */
export function OfflineEmpty({
  title = "You are offline",
  description = "Check your connection. Your changes will sync once you are back online.",
  ...props
}: EmptyProps) {
  return (
    <ErrorShell
      tone="warning"
      fallbackIcon={<CloudOff />}
      title={title}
      description={description}
      defaultAction={
        <button type="button" data-slot="styled-empty-action" className={retryBtn}>
          <RefreshCw />
          Reconnect
        </button>
      }
      {...props}
    />
  )
}

/* DeniedEmpty: yetki yok, danger tonu + erisim isteme aksiyonu. */
export function DeniedEmpty({
  title = "You do not have access",
  description = "Ask a workspace admin to grant you permission to view this page.",
  ...props
}: EmptyProps) {
  return (
    <ErrorShell
      tone="danger"
      fallbackIcon={<Lock />}
      title={title}
      description={description}
      defaultAction={
        <button type="button" data-slot="styled-empty-action" className={retryBtn}>
          <Lock />
          Request access
        </button>
      }
      {...props}
    />
  )
}

/* TimeoutEmpty: istek zaman asimi, warning tonu + yeniden yukle aksiyonu. */
export function TimeoutEmpty({
  title = "This is taking too long",
  description = "The request timed out before it finished. Reload to give it another go.",
  ...props
}: EmptyProps) {
  return (
    <ErrorShell
      tone="warning"
      fallbackIcon={<TimerReset />}
      title={title}
      description={description}
      defaultAction={
        <button type="button" data-slot="styled-empty-action" className={retryBtn}>
          <RefreshCw />
          Reload
        </button>
      }
      {...props}
    />
  )
}

/* BrokenEmpty: kirik/eksik kaynak, muted notr ton, aksiyon yok. */
export function BrokenEmpty({
  title = "This link is broken",
  description = "The page you are looking for was moved or deleted.",
  ...props
}: EmptyProps) {
  return (
    <ErrorShell
      tone="muted"
      fallbackIcon={<Unplug />}
      title={title}
      description={description}
      {...props}
    />
  )
}