import { PreviewLink } from "@/components/layout/preview-context";
import type { ReactNode } from "react";
export function PageHeader({
  title,
  parent,
  children,
  currentPage,
}: {
  title: string;
  parent?: { label: string; href: string };
  children?: ReactNode;
  currentPage?: string;
}) {
  return (
    <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
      <h1 className="text-xl font-semibold">{title}</h1>
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <PreviewLink href="/">Home</PreviewLink>
        <span>›</span>
        {parent && (
          <>
            <PreviewLink href={parent.href}>{parent.label}</PreviewLink>
            <span>›</span>
          </>
        )}
        <span className="text-foreground">{currentPage ?? title}</span>
        {children}
      </div>
    </div>
  );
}
export function Panel({
  title,
  description,
  children,
  className = "",
}: {
  title?: string;
  description?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section className={`panel ${className}`}>
      {title && (
        <div className="border-b px-5 py-4">
          <h2 className="font-semibold">{title}</h2>
          {description && (
            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
          )}
        </div>
      )}
      {children}
    </section>
  );
}
export function StatusBadge({ children }: { children: ReactNode }) {
  const s = String(children).toLowerCase();
  const tone = [
    "active",
    "online",
    "available",
    "approved",
    "paid",
    "success",
    "published",
    "completed",
  ].includes(s)
    ? "text-success bg-success/10"
    : ["failed", "rejected", "inactive", "offline", "faulted"].includes(s)
      ? "text-destructive bg-destructive/10"
      : "text-warning bg-warning/10";
  return (
    <span
      className={`inline-flex whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium ${tone}`}
    >
      {children}
    </span>
  );
}
export function Metric({
  label,
  value,
  note,
}: {
  label: string;
  value: ReactNode;
  note?: string;
}) {
  return (
    <div className="panel p-5">
      <p className="text-sm text-muted-foreground">{label}</p>
      <p className="mt-3 text-2xl font-semibold">{value}</p>
      {note && <p className="mt-2 text-xs text-muted-foreground">{note}</p>}
    </div>
  );
}
export function DetailList({ items }: { items: Record<string, ReactNode> }) {
  return (
    <dl className="grid gap-5 p-5 sm:grid-cols-2">
      {Object.entries(items).map(([label, value]) => (
        <div key={label}>
          <dt className="text-xs text-muted-foreground">{label}</dt>
          <dd className="mt-1 break-words font-medium">{value ?? "—"}</dd>
        </div>
      ))}
    </dl>
  );
}
export function PreviewNotice({
  children = "Preview only. Changes stay in this browser session; no external operation is performed.",
}: {
  children?: ReactNode;
}) {
  return (
    <p
      className="rounded-lg border border-info/20 bg-info/5 px-4 py-3 text-sm text-info"
      role="status"
    >
      {children}
    </p>
  );
}