import { ChevronRight, type LucideIcon } from "lucide-react"
import { cn } from "@/lib/utils"

export type TileTone = "ok" | "warn" | "alert" | "muted" | "loading"

const DOT: Record<TileTone, string> = {
  ok: "bg-emerald-500",
  warn: "bg-amber-500",
  alert: "bg-red-500",
  muted: "bg-muted-foreground/40",
  loading: "bg-muted-foreground/40 animate-pulse",
}

const RING: Record<TileTone, string> = {
  ok: "hover:border-emerald-500/40",
  warn: "hover:border-amber-500/50",
  alert: "hover:border-red-500/50",
  muted: "hover:border-primary/40",
  loading: "hover:border-border/60",
}

// Eine Bereichs-Kachel der Cockpit-Startseite: EIN Symbol, EINE große Live-Zahl,
// EIN Status-Punkt, Klartext-Titel. Tiefe steckt hinter dem Klick (Werkbank/Drawer).
export function CockpitTile({
  icon: Icon,
  title,
  value,
  unit,
  tone = "muted",
  hint,
  onClick,
}: {
  icon: LucideIcon
  title: string
  value: React.ReactNode
  unit?: string
  tone?: TileTone
  hint?: string
  onClick: () => void
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "group relative flex flex-col items-start mc-card p-5 text-left cursor-pointer",
        RING[tone],
      )}
    >
      <div className="mb-4 flex w-full items-center justify-between">
        <span className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/40 bg-background/30 text-foreground/80 transition-colors group-hover:text-primary">
          <Icon className="h-5 w-5" />
        </span>
        <span className={cn("h-2.5 w-2.5 rounded-full ring-2 ring-black/40", DOT[tone])} title={hint} />
      </div>

      <div className="flex items-baseline gap-1.5">
        <span className="text-2xl font-bold tracking-tight text-foreground font-space tabular-nums">{value}</span>
        {unit && <span className="text-xs font-medium text-muted-foreground">{unit}</span>}
      </div>

      <div className="mt-1 flex w-full items-center justify-between">
        <span className="text-sm font-semibold text-foreground/90">{title}</span>
        <ChevronRight className="h-4 w-4 text-muted-foreground/40 transition-all group-hover:translate-x-0.5 group-hover:text-primary" />
      </div>
      {hint && <span className="mt-0.5 text-[11px] text-muted-foreground">{hint}</span>}
    </button>
  )
}
