"use client";
import * as React from "react";
import { cn } from "../lib/utils";
import { Button } from "../components/button";

export function AppPage({
  title,
  description,
  eyebrow,
  actions,
  children,
  width = "wide",
  className,
}: {
  title: string;
  description?: React.ReactNode;
  eyebrow?: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
  width?: "wide" | "reading";
  className?: string;
}) {
  return (
    <main className={cn("coline-page", className)} data-width={width}>
      <header className="coline-page-header">
        <div className="coline-page-heading">
          {eyebrow && <div className="coline-eyebrow">{eyebrow}</div>}
          <h1>{title}</h1>
          {description && <p className="coline-page-description">{description}</p>}
        </div>
        {actions && <div className="coline-page-actions">{actions}</div>}
      </header>
      {children}
    </main>
  );
}
export function PageToolbar({
  children,
  label = "View controls",
  className,
}: {
  children: React.ReactNode;
  label?: string;
  className?: string;
}) {
  return (
    <div className={cn("coline-toolbar", className)} role="group" aria-label={label}>
      {children}
    </div>
  );
}
export function EmptyState({
  title,
  description,
  action,
  icon,
}: {
  title: string;
  description?: React.ReactNode;
  action?: React.ReactNode;
  icon?: React.ReactNode;
}) {
  return (
    <section className="coline-empty">
      {icon && (
        <div className="coline-empty-icon" aria-hidden="true">
          {icon}
        </div>
      )}
      <h2>{title}</h2>
      {description && <p>{description}</p>}
      {action && <div>{action}</div>}
    </section>
  );
}
export function AppErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <section className="coline-error" role="alert">
      <div>
        <h2>Something went wrong</h2>
        <p>{message}</p>
      </div>
      {onRetry && (
        <Button variant="outline" onClick={onRetry}>
          Try again
        </Button>
      )}
    </section>
  );
}
export function AppLoadingState({
  label = "Loading",
  rows = 5,
}: {
  label?: string;
  rows?: number;
}) {
  return (
    <div className="coline-loading" role="status" aria-label={label}>
      {Array.from({ length: Math.max(1, Math.min(rows, 12)) }, (_, i) => (
        <div key={i} style={{ width: `${92 - (i % 3) * 14}%` }} />
      ))}
      <span className="coline-sr-only">{label}</span>
    </div>
  );
}
export function StatusBadge({
  children,
  tone = "neutral",
}: {
  children: React.ReactNode;
  tone?: "neutral" | "info" | "success" | "warning" | "danger";
}) {
  return (
    <span className="coline-status" data-tone={tone}>
      <span aria-hidden="true" />
      {children}
    </span>
  );
}
export function SplitView({
  list,
  detail,
  label = "Details",
}: {
  list: React.ReactNode;
  detail?: React.ReactNode;
  label?: string;
}) {
  return (
    <div className="coline-split" data-open={Boolean(detail)}>
      <section className="coline-split-list">{list}</section>
      {detail && (
        <aside className="coline-split-detail" aria-label={label}>
          {detail}
        </aside>
      )}
    </div>
  );
}
export function DetailPanel({
  title,
  subtitle,
  onClose,
  children,
  actions,
}: {
  title: string;
  subtitle?: React.ReactNode;
  onClose?: () => void;
  children: React.ReactNode;
  actions?: React.ReactNode;
}) {
  return (
    <section className="coline-detail">
      <header>
        <div>
          {subtitle && <div className="coline-eyebrow">{subtitle}</div>}
          <h2>{title}</h2>
        </div>
        {onClose && (
          <Button variant="ghost" size="sm" onClick={onClose} aria-label="Close details">
            Close
          </Button>
        )}
      </header>
      <div className="coline-detail-body">{children}</div>
      {actions && <footer>{actions}</footer>}
    </section>
  );
}
export interface RecordColumn<T> {
  key: string;
  label: string;
  render: (record: T) => React.ReactNode;
  secondary?: boolean;
  align?: "start" | "end";
}
export function RecordTable<T>({
  records,
  columns,
  rowKey,
  onOpen,
  label = "Records",
  empty,
}: {
  records: readonly T[];
  columns: readonly RecordColumn<T>[];
  rowKey: (record: T) => string;
  onOpen?: (record: T) => void;
  label?: string;
  empty?: React.ReactNode;
}) {
  if (!records.length)
    return (
      <>{empty ?? <EmptyState title="No results" description="Try changing your filters." />}</>
    );
  return (
    <div className="coline-table-scroll">
      <table className="coline-record-table" aria-label={label}>
        <thead>
          <tr>
            {columns.map((column) => (
              <th
                key={column.key}
                scope="col"
                data-secondary={column.secondary || undefined}
                data-align={column.align}
              >
                {column.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {records.map((record) => (
            <tr key={rowKey(record)}>
              {columns.map((column, i) => (
                <td
                  key={column.key}
                  data-secondary={column.secondary || undefined}
                  data-align={column.align}
                >
                  {i === 0 && onOpen ? (
                    <button
                      type="button"
                      className="coline-row-open"
                      onClick={() => onOpen(record)}
                    >
                      {column.render(record)}
                    </button>
                  ) : (
                    column.render(record)
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
export function Board({
  children,
  label = "Board",
}: {
  children: React.ReactNode;
  label?: string;
}) {
  return (
    <div className="coline-board" role="region" aria-label={label} tabIndex={0}>
      {children}
    </div>
  );
}
export function BoardColumn({
  title,
  count,
  children,
  action,
}: {
  title: string;
  count?: number;
  children: React.ReactNode;
  action?: React.ReactNode;
}) {
  return (
    <section className="coline-board-column">
      <header>
        <h2>{title}</h2>
        {count !== undefined && <span className="coline-count">{count}</span>}
        {action}
      </header>
      <div className="coline-board-items">{children}</div>
    </section>
  );
}
export function BoardCard({
  title,
  children,
  footer,
  onOpen,
}: {
  title: string;
  children?: React.ReactNode;
  footer?: React.ReactNode;
  onOpen?: () => void;
}) {
  return (
    <article className="coline-board-card">
      <h3>
        {onOpen ? (
          <button type="button" className="coline-row-open" onClick={onOpen}>
            {title}
          </button>
        ) : (
          title
        )}
      </h3>
      {children && <div className="coline-board-card-body">{children}</div>}
      {footer && <footer>{footer}</footer>}
    </article>
  );
}
export function SettingsSection({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  const id = React.useId();
  return (
    <section className="coline-settings-section" aria-labelledby={id}>
      <div>
        <h2 id={id}>{title}</h2>
        {description && <p>{description}</p>}
      </div>
      <div className="coline-settings-fields">{children}</div>
    </section>
  );
}