"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { IconAlertTriangle, IconX } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { staggerDelay, transitions } from "../lib/motion";
import { Button } from "../components/button";

/**
 * Page-level patterns for workspace apps: the frame, toolbars, the
 * loading/empty/error trio, list + detail, boards, and settings. They
 * carry Coline's spacing and type so apps look native without styling.
 */

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;
}) {
  const reduceMotion = useReducedMotion();
  return (
    <main
      className={cn(
        "mx-auto w-full min-w-0 px-4 pt-5 pb-10 text-sm text-foreground sm:px-6 sm:pt-6",
        width === "reading" ? "max-w-[880px]" : "max-w-[1440px]",
        className,
      )}
      data-width={width}
    >
      <motion.header
        initial={reduceMotion ? false : { opacity: 0, y: 6 }}
        animate={{ opacity: 1, y: 0 }}
        transition={transitions.enter}
        className="flex flex-wrap items-start justify-between gap-x-6 gap-y-3 pb-6"
      >
        <div className="min-w-0">
          {eyebrow ? <div className="mb-1.5 text-xs text-muted-foreground">{eyebrow}</div> : null}
          <h1 className="text-2xl font-semibold tracking-tight text-balance break-words">{title}</h1>
          {description ? <p className="mt-1.5 max-w-[64ch] text-sm text-muted-foreground">{description}</p> : null}
        </div>
        {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 max-sm:w-full">{actions}</div> : null}
      </motion.header>
      {children}
    </main>
  );
}

export function PageToolbar({
  children,
  label = "View controls",
  className,
}: {
  children: React.ReactNode;
  label?: string;
  className?: string;
}) {
  return (
    <div
      className={cn("mb-3 flex flex-wrap items-center gap-2 [&_[data-slot=input-group]]:max-w-80", className)}
      role="group"
      aria-label={label}
    >
      {children}
    </div>
  );
}

export function EmptyState({
  title,
  description,
  action,
  icon,
  className,
}: {
  title: string;
  description?: React.ReactNode;
  action?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}) {
  const reduceMotion = useReducedMotion();
  return (
    <motion.section
      initial={reduceMotion ? false : { opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={transitions.enter}
      className={cn("flex flex-col items-center gap-2 px-6 py-16 text-center", className)}
    >
      {icon ? (
        <motion.div
          aria-hidden="true"
          initial={reduceMotion ? false : { scale: 0.85, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ ...transitions.spring, delay: 0.05 }}
          className="mb-2 flex size-11 items-center justify-center rounded-2xl bg-muted text-muted-foreground [&_svg]:size-5"
        >
          {icon}
        </motion.div>
      ) : null}
      <h2 className="text-[15px] font-semibold text-foreground">{title}</h2>
      {description ? <p className="max-w-[40ch] text-sm text-muted-foreground">{description}</p> : null}
      {action ? <div className="mt-3">{action}</div> : null}
    </motion.section>
  );
}

export function AppErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <motion.section
      role="alert"
      initial={{ opacity: 0, y: 6 }}
      animate={{ opacity: 1, y: 0 }}
      transition={transitions.enter}
      className="flex flex-col items-start gap-4 rounded-2xl border border-risk/25 bg-risk/[0.05] p-4 sm:flex-row sm:items-center"
    >
      <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-risk/10 text-risk-fg">
        <IconAlertTriangle className="size-4.5" />
      </span>
      <div className="min-w-0 flex-1">
        <h2 className="text-sm font-semibold text-foreground">Something went wrong</h2>
        <p className="mt-0.5 text-sm break-words text-muted-foreground">{message}</p>
      </div>
      {onRetry ? (
        <Button variant="outline" onClick={onRetry}>
          Try again
        </Button>
      ) : null}
    </motion.section>
  );
}

export function AppLoadingState({ label = "Loading", rows = 5 }: { label?: string; rows?: number }) {
  return (
    <div className="flex flex-col gap-3 py-4" role="status" aria-label={label}>
      {Array.from({ length: Math.max(1, Math.min(rows, 12)) }, (_, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1, transition: { delay: staggerDelay(index, 0.05) } }}
          className="flex items-center gap-3"
        >
          <div className="size-8 shrink-0 animate-pulse rounded-lg bg-muted" />
          <div className="flex flex-1 flex-col gap-1.5">
            <div className="h-3 animate-pulse rounded-full bg-muted" style={{ width: `${72 - (index % 3) * 14}%` }} />
            <div className="h-2.5 animate-pulse rounded-full bg-muted/70" style={{ width: `${44 - (index % 2) * 10}%` }} />
          </div>
        </motion.div>
      ))}
      <span className="sr-only">{label}</span>
    </div>
  );
}

const STATUS_TONE = {
  neutral: "bg-muted text-muted-foreground",
  info: "bg-action/10 text-action",
  success: "bg-positive/10 text-positive-fg",
  warning: "bg-attention/12 text-attention-fg",
  danger: "bg-risk/10 text-risk-fg",
} as const;

export function StatusBadge({
  children,
  tone = "neutral",
}: {
  children: React.ReactNode;
  tone?: keyof typeof STATUS_TONE;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors duration-200",
        STATUS_TONE[tone],
      )}
      data-tone={tone}
    >
      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
      {children}
    </span>
  );
}

export function SplitView({
  list,
  detail,
  label = "Details",
}: {
  list: React.ReactNode;
  detail?: React.ReactNode;
  label?: string;
}) {
  const reduceMotion = useReducedMotion();
  return (
    <div className="flex min-h-[420px] flex-col gap-4 md:flex-row md:gap-0">
      <section className="min-w-0 flex-1">{list}</section>
      <AnimatePresence initial={false}>
        {detail ? (
          <motion.aside
            key="detail"
            aria-label={label}
            initial={reduceMotion ? false : { opacity: 0, x: 16 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 16 }}
            transition={transitions.enter}
            className="min-w-0 border-border/70 max-md:border-t md:ml-4 md:w-[min(420px,38%)] md:shrink-0 md:border-l"
          >
            {detail}
          </motion.aside>
        ) : null}
      </AnimatePresence>
    </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="px-1 py-5 md:px-5">
      <header className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          {subtitle ? <div className="mb-1 text-xs text-muted-foreground">{subtitle}</div> : null}
          <h2 className="text-lg font-semibold tracking-tight break-words">{title}</h2>
        </div>
        {onClose ? (
          <Button variant="ghost" size="icon-sm" onClick={onClose} aria-label="Close details">
            <IconX />
          </Button>
        ) : null}
      </header>
      <div className="pt-5">{children}</div>
      {actions ? <footer className="mt-6 flex flex-wrap gap-2">{actions}</footer> : null}
    </section>
  );
}

export interface RecordColumn<T> {
  key: string;
  label: string;
  render: (record: T) => React.ReactNode;
  secondary?: boolean;
  align?: "start" | "end";
}

/**
 * A light list-style table. For sorting, selection, keyboard navigation,
 * and large data, use `DataGrid`.
 */
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;
}) {
  const reduceMotion = useReducedMotion();
  if (!records.length) return <>{empty ?? <EmptyState title="No results" description="Try changing your filters." />}</>;
  return (
    <div className="w-full overflow-x-auto">
      <table className="w-full border-separate border-spacing-y-0.5 text-left text-[13px]" aria-label={label}>
        <thead>
          <tr>
            {columns.map((column) => (
              <th
                key={column.key}
                scope="col"
                className={cn(
                  "px-3.5 py-2.5 text-xs font-medium whitespace-nowrap text-muted-foreground",
                  column.align === "end" && "text-right",
                  column.secondary && "max-sm:hidden",
                )}
              >
                {column.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          <AnimatePresence initial={false}>
            {records.map((record, index) => (
              <motion.tr
                key={rowKey(record)}
                layout={reduceMotion ? false : "position"}
                initial={reduceMotion ? false : { opacity: 0, y: 4 }}
                animate={{ opacity: 1, y: 0, transition: { ...transitions.enter, delay: staggerDelay(index) } }}
                exit={{ opacity: 0 }}
                className={cn("group", onOpen && "cursor-pointer")}
                onClick={onOpen ? () => onOpen(record) : undefined}
              >
                {columns.map((column, columnIndex) => (
                  <td
                    key={column.key}
                    className={cn(
                      "px-3.5 py-3 align-middle transition-colors duration-150 first:rounded-l-xl last:rounded-r-xl group-hover:bg-muted/50",
                      column.align === "end" && "text-right tabular-nums",
                      column.secondary && "max-sm:hidden",
                    )}
                  >
                    {columnIndex === 0 && onOpen ? (
                      <button
                        type="button"
                        className="rounded-sm text-left font-medium break-words outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                        onClick={(event) => {
                          event.stopPropagation();
                          onOpen(record);
                        }}
                      >
                        {column.render(record)}
                      </button>
                    ) : (
                      column.render(record)
                    )}
                  </td>
                ))}
              </motion.tr>
            ))}
          </AnimatePresence>
        </tbody>
      </table>
    </div>
  );
}

/**
 * Static board layout. For drag and drop between columns, use
 * `KanbanBoard`.
 */
export function Board({ children, label = "Board" }: { children: React.ReactNode; label?: string }) {
  return (
    <div
      className="flex items-start gap-3 overflow-x-auto px-px pt-1 pb-4 outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
      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="flex min-w-0 flex-[1_0_260px] flex-col rounded-2xl bg-muted/40 p-2">
      <header className="flex items-center gap-2 px-1.5 pt-1 pb-2.5">
        <h2 className="truncate text-sm font-medium">{title}</h2>
        {count !== undefined ? (
          <span className="rounded-md bg-background/70 px-1.5 text-xs font-medium tabular-nums text-muted-foreground">{count}</span>
        ) : null}
        {action ? <div className="ml-auto">{action}</div> : null}
      </header>
      <div className="flex flex-col gap-2">{children}</div>
    </section>
  );
}

export function BoardCard({
  title,
  children,
  footer,
  onOpen,
}: {
  title: string;
  children?: React.ReactNode;
  footer?: React.ReactNode;
  onOpen?: () => void;
}) {
  return (
    <motion.article
      layout="position"
      initial={{ opacity: 0, y: 4 }}
      animate={{ opacity: 1, y: 0 }}
      transition={transitions.enter}
      className="group rounded-xl border border-border/60 bg-card p-3 shadow-xs transition-[border-color,box-shadow,translate] duration-150 hover:-translate-y-px hover:border-border hover:shadow-sm"
    >
      <h3 className="text-[13px] font-medium">
        {onOpen ? (
          <button
            type="button"
            className="rounded-sm text-left break-words outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
            onClick={onOpen}
          >
            {title}
          </button>
        ) : (
          title
        )}
      </h3>
      {children ? <div className="mt-1.5 text-xs text-muted-foreground">{children}</div> : null}
      {footer ? (
        <footer className="mt-3 flex items-center justify-between gap-2 text-xs text-muted-foreground">{footer}</footer>
      ) : null}
    </motion.article>
  );
}

export function SettingsSection({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  const id = React.useId();
  return (
    <section
      className="grid gap-4 border-t border-border/70 py-6 first:border-t-0 md:grid-cols-[minmax(160px,1fr)_minmax(0,1.7fr)] md:gap-10"
      aria-labelledby={id}
    >
      <div>
        <h2 id={id} className="text-sm font-semibold">
          {title}
        </h2>
        {description ? <p className="mt-1 max-w-[32ch] text-xs text-muted-foreground">{description}</p> : null}
      </div>
      <div className="grid gap-4">{children}</div>
    </section>
  );
}