import type { ReactNode } from "react";
import { cn } from "@/lib/cn";

export function Page({
  eyebrow,
  title,
  description,
  actions,
  children,
  flush,
  wide,
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  actions?: ReactNode;
  children: ReactNode;
  flush?: boolean;
  /** For pages with a side column, which would otherwise squeeze the main one. */
  wide?: boolean;
}) {
  return (
    <div
      className={cn(
        "px-4 py-5 md:px-8 md:py-7 md:pb-16",
        wide ? "max-w-[1560px]" : "max-w-[1200px]",
        flush && "px-0 py-0 md:px-0 md:py-0 max-w-none",
      )}
    >
      <header className={cn("flex items-end justify-between gap-4 mb-5 flex-wrap", flush && "px-4 pt-5 md:px-8 md:pt-7 mb-0")}>
        <div className="min-w-0">
          {eyebrow ? (
            <div className="text-[12px] font-semibold text-ink-2 mb-1">{eyebrow}</div>
          ) : null}
          <h1 className="text-[20px] md:text-[24px] font-semibold tracking-tight">{title}</h1>
          {description ? (
            <p className="mt-1 text-[13px] text-ink-2 max-w-[78ch] leading-relaxed">{description}</p>
          ) : null}
        </div>
        {actions ? <div className="flex flex-wrap gap-2 shrink-0">{actions}</div> : null}
      </header>
      {children}
    </div>
  );
}

export function Panel({
  title,
  meta,
  children,
  flush,
  className,
}: {
  title?: string;
  meta?: ReactNode;
  children: ReactNode;
  flush?: boolean;
  className?: string;
}) {
  return (
    <section className={cn("border border-line bg-surface rounded-md overflow-hidden", className)}>
      {title ? (
        <div className="flex items-center gap-3 px-3.5 py-2.5 border-b border-line bg-sunken">
          <h2 className="text-[13px] font-semibold">{title}</h2>
          {meta ? <div className="ml-auto text-[12px] text-ink-2 font-normal">{meta}</div> : null}
        </div>
      ) : null}
      <div className={flush ? "" : "p-3.5"}>{children}</div>
    </section>
  );
}

export function Stats({
  items,
}: {
  items: { label: string; value: string | number; sub?: string; swatch?: string }[];
}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
      {items.map((item) => (
        <div key={item.label} className="border border-line bg-surface rounded-md px-3.5 py-3">
          <div className="text-[11px] uppercase tracking-[0.04em] text-ink-2 flex items-center gap-1.5">
            {item.swatch ? (
              <i className="size-2 rounded-[2px] inline-block" style={{ background: item.swatch }} />
            ) : null}
            {item.label}
          </div>
          <div className="mt-1 font-mono text-[26px] font-semibold tabular-nums tracking-tight leading-tight">
            {item.value}
          </div>
          {item.sub ? <div className="mt-1 text-[12px] text-ink-2">{item.sub}</div> : null}
        </div>
      ))}
    </div>
  );
}

export function Empty({ title, body }: { title: string; body: string }) {
  return (
    <div className="px-3.5 py-10 text-center text-[13px] text-ink-2">
      <strong className="block text-ink font-semibold mb-1">{title}</strong>
      {body}
    </div>
  );
}