import { cn } from '@/lib/cn';

/** Standard page header inside the shell. */
export function PageHeader({
  eyebrow,
  title,
  text,
  actions,
}: {
  eyebrow?: string;
  title: string;
  text?: React.ReactNode;
  actions?: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
      <div className="min-w-0">
        {eyebrow && <p className="eyebrow text-subtle">{eyebrow}</p>}
        <h1 className="mt-3 text-[28px] leading-tight font-semibold tracking-[-0.02em] text-ink sm:text-[32px]">{title}</h1>
        {text && <p className="mt-2 max-w-xl text-[15px] text-muted">{text}</p>}
      </div>
      {actions && <div className="flex shrink-0 flex-wrap items-center gap-3">{actions}</div>}
    </div>
  );
}

/** Content width + padding for shell pages. */
export function ShellPage({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn('mx-auto w-full max-w-[1120px] px-4 py-8 sm:px-8 sm:py-10', className)}>{children}</div>;
}

export interface Stat {
  label: string;
  value: React.ReactNode;
  hint?: React.ReactNode;
}

/** A row of headline numbers. */
export function StatGrid({ stats, className }: { stats: Stat[]; className?: string }) {
  return (
    <dl
      className={cn(
        'grid grid-cols-2 gap-px overflow-hidden rounded-card bg-line shadow-card ring-1 ring-line',
        stats.length >= 4 ? 'lg:grid-cols-4' : 'sm:grid-cols-3',
        className,
      )}
    >
      {stats.map((s) => (
        <div key={s.label} className="bg-surface p-5">
          <dt className="text-[13px] text-muted">{s.label}</dt>
          <dd className="mt-2 truncate text-[22px] font-semibold tracking-tight text-ink tabular-nums sm:text-[26px]">{s.value}</dd>
          {s.hint && <p className="mt-1 text-xs text-subtle">{s.hint}</p>}
        </div>
      ))}
    </dl>
  );
}

/** A titled white card, optionally with a link or action at the top right. */
export function Panel({
  title,
  action,
  className,
  bodyClassName,
  children,
}: {
  title?: string;
  action?: React.ReactNode;
  className?: string;
  bodyClassName?: string;
  children: React.ReactNode;
}) {
  return (
    <section className={cn('overflow-hidden rounded-card bg-surface shadow-card ring-1 ring-line/70', className)}>
      {(title || action) && (
        <div className="flex items-center justify-between gap-4 border-b border-line px-5 py-4">
          {title && <h2 className="text-[15px] font-semibold text-ink">{title}</h2>}
          {action}
        </div>
      )}
      <div className={bodyClassName}>{children}</div>
    </section>
  );
}

/** Centered message for an empty list. */
export function EmptyState({ title, text, children }: { title?: string; text: string; children?: React.ReactNode }) {
  return (
    <div className="px-6 py-14 text-center">
      {title && <p className="text-lg font-semibold text-ink">{title}</p>}
      <p className={cn('mx-auto max-w-sm text-sm leading-relaxed text-muted', title && 'mt-2')}>{text}</p>
      {children && <div className="mt-6 flex justify-center">{children}</div>}
    </div>
  );
}

/** Previous / next links for a paged list. */
export function Pager({
  page,
  pages,
  href,
  labels,
}: {
  page: number;
  pages: number;
  href: (page: number) => string;
  labels: { prev: string; next: string; page: (n: number, total: number) => string };
}) {
  if (pages <= 1) return null;
  const link = 'rounded-full px-4 py-2 text-[13px] font-medium ring-1 ring-line transition-colors hover:bg-surface';
  return (
    <nav className="mt-6 flex items-center justify-between gap-4 text-[13px] text-muted">
      {page > 1 ? (
        <a href={href(page - 1)} className={link}>
          {labels.prev}
        </a>
      ) : (
        <span />
      )}
      <span className="tabular-nums">{labels.page(page, pages)}</span>
      {page < pages ? (
        <a href={href(page + 1)} className={link}>
          {labels.next}
        </a>
      ) : (
        <span />
      )}
    </nav>
  );
}