import * as React from 'react';
import { ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Shared page furniture for the Admin product.
 *
 * Admin pages are dense and numerous, so the header, the section labels and the
 * vertical rhythm are defined once here. That is what makes seven independently
 * built pages read as one product rather than seven takes on a dashboard.
 */

/**
 * AdminPage — the standard page frame: title, subtitle, right-aligned controls,
 * then stacked sections.
 *
 * Controls live in the page rather than in the global chrome, which is why the
 * Admin header only needs one 56px bar.
 */
interface AdminPageProps {
  title?: string;
  subtitle?: string;
  meta?: any;
  actions?: any;
  tabs?: any;
  children: React.ReactNode;
  className?: string;
}

export function AdminPage({ title, subtitle, meta, actions, tabs, children, className }: AdminPageProps) {
  return (
    <div className={cn('space-y-6', className)}>
      <header className="flex flex-wrap items-center justify-between gap-4 border-b border-border/50 pb-4">
        <div className="min-w-0 space-y-1">
          {/* Wraps rather than compresses. The row carries three things of very
              different lengths — the page name, its count and the status pill —
              and on a 390px screen holding them on one line meant the count
              breaking mid-phrase and the pill splitting into "Live / System".
              Nothing wraps at any width where all three fit, so every desktop
              layout is untouched. */}
          <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1.5">
            <h1 className="font-heading text-title-lg font-bold tracking-tight text-ink-1 sm:text-2xl">{title}</h1>
            {/* A count of whatever the page is a list of, stated beside its
                name rather than only inside the list. */}
            {meta && <span className="whitespace-nowrap text-body-sm tabular-nums text-ink-4">{meta}</span>}
            <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-semibold text-blue-600 dark:bg-blue-950/60 dark:text-blue-400 border border-blue-200/60 dark:border-blue-800/40">
              <span className="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" />
              Live System
            </span>
          </div>
          {subtitle && <p className="text-body-sm text-ink-3 font-normal">{subtitle}</p>}
        </div>
        {actions && <div className="flex flex-wrap items-center gap-2.5">{actions}</div>}
      </header>

      {tabs}

      {children}
    </div>
  );
}

/**
 * SectionTitle — the label above a region.
 *
 * Sentence-case and small rather than a heavy all-caps overline: on a page with
 * four or five sections, loud labels compete with the data they introduce.
 */
interface SectionTitleProps {
  id?: any;
  title?: string;
  meta?: any;
  action?: any;
  className?: string;
}

export function SectionTitle({ id, title, meta, action, className }: SectionTitleProps) {
  return (
    <div className={cn('flex flex-wrap items-baseline justify-between gap-2', className)}>
      {/* The count wraps under the section name rather than competing with it
          for a 390px line. On any width where both fit — every desktop and
          tablet layout — nothing wraps and the row is the row it always was. */}
      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
        <h2 id={id} className="font-heading text-body font-semibold text-ink-1">{title}</h2>
        {meta && <span className="text-caption text-ink-4">{meta}</span>}
      </div>

      {action && (
        <button
          type="button"
          onClick={action.onClick}
          className="inline-flex items-center gap-0.5 rounded text-caption font-medium text-krow-blue transition-colors hover:underline
                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50"
        >
          {action.label}
          <ChevronRight className="h-3 w-3" aria-hidden="true" />
        </button>
      )}
    </div>
  );
}

/**
 * Toolbar — the controls row above a table or list.
 *
 * Search takes the remaining space, filters keep their natural width, and the
 * primary action is pushed to the end, so every management page has the same
 * control geometry.
 */
interface ToolbarProps {
  search?: any;
  filters?: any;
  actions?: any;
  meta?: any;
  className?: string;
}

export function Toolbar({ search = null, filters = null, actions = null, meta = null, className = '' }: ToolbarProps) {
  return (
    <div className={cn('space-y-2', className)}>
      <div className="flex flex-col gap-2 lg:flex-row lg:items-center">
        {search && <div className="min-w-0 lg:max-w-xs lg:flex-1">{search}</div>}
        {filters && <div className="flex flex-wrap items-center gap-2">{filters}</div>}
        {actions && <div className="flex items-center gap-2 lg:ml-auto">{actions}</div>}
      </div>
      {meta && <p className="text-caption text-ink-4">{meta}</p>}
    </div>
  );
}