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

type PanelVariant = "flat" | "surface";
type PanelDensity = "normal" | "compact" | "dense";

type PanelProps = {
  title?: string;
  subtitle?: string;
  actions?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  variant?: PanelVariant;
  density?: PanelDensity;
};

const densityStyles: Record<PanelDensity, string> = {
  normal: "",
  compact: "",
  dense: "",
};

const headerDensityStyles: Record<PanelDensity, string> = {
  normal: "mb-4",
  compact: "mb-3",
  dense: "mb-2",
};

export function Panel({
  title,
  subtitle,
  actions,
  children,
  className,
  variant = "flat",
  density = "normal",
}: PanelProps) {
  const surfaceStyles =
    density === "normal"
      ? "p-4 sm:p-5"
      : density === "compact"
        ? "p-3 sm:p-4"
        : "p-2.5 sm:p-3";

  const flatStyles =
    density === "normal"
      ? "pt-4 sm:pt-5"
      : density === "compact"
        ? "pt-3 sm:pt-4"
        : "pt-2.5 sm:pt-3";

  return (
    <section
      className={cn(
        "min-w-0",
        variant === "surface"
          ? cn(
              "rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
              surfaceStyles,
            )
          : cn("border-t border-[color:var(--line-weak)]", flatStyles),
        densityStyles[density],
        className,
      )}
    >
      {title || subtitle || actions ? (
        <header
          className={cn(
            "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
            headerDensityStyles[density],
          )}
        >
          <div className="min-w-0">
            {title ? (
              <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
                {title}
              </h3>
            ) : null}
            {subtitle ? (
              <p
                className={cn(
                  "text-xs text-[color:var(--terminal-muted)]",
                  title ? "mt-0.5" : "",
                )}
              >
                {subtitle}
              </p>
            ) : null}
          </div>
          {actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
        </header>
      ) : null}
      {children}
    </section>
  );
}