import Link from "next/link";
import type { Route } from "next";
import { cn } from "@/lib/utils";

export function PageShell({
  children
}: {
  children: React.ReactNode;
}) {
  return <div className="mx-auto flex min-h-screen w-full max-w-md flex-col px-4 pb-24 pt-6">{children}</div>;
}

export function Panel({
  children,
  className
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return <section className={cn("rounded-xl border border-stone-200/80 bg-[var(--card)] p-2.5", className)}>{children}</section>;
}

export function SectionHeading({
  title,
  count,
  action
}: {
  title: string;
  count?: number;
  action?: React.ReactNode;
}) {
  return (
    <div className="mb-2 flex items-center justify-between gap-3">
      <div className="flex items-center gap-2">
        <h2 className="text-sm font-semibold tracking-tight text-stone-900">{title}</h2>
        {typeof count === "number" ? <CountBadge>{count}</CountBadge> : null}
      </div>
      {action}
    </div>
  );
}

export function SectionCard({
  title,
  action,
  children
}: {
  title: string;
  action?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-3xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-[0_12px_40px_rgba(15,23,42,0.05)]">
      <div className="mb-4 flex items-center justify-between gap-3">
        <h2 className="text-base font-semibold">{title}</h2>
        {action}
      </div>
      {children}
    </section>
  );
}

export function NavBar() {
  const items: Array<{ href: Route; label: string }> = [
    { href: "/today", label: "Today" },
    { href: "/payments", label: "Payments" },
    { href: "/people", label: "People" },
    { href: "/history", label: "History" }
  ];

  return (
    <nav className="fixed bottom-0 left-1/2 z-40 flex w-full max-w-md -translate-x-1/2 justify-between border-t border-stone-200/80 bg-[rgba(246,243,238,0.98)] px-4 py-1.5 backdrop-blur">
      {items.map((item) => (
        <Link key={item.href} href={item.href} className="py-1 text-[11px] font-medium text-[var(--muted)] transition-colors hover:text-stone-900">
          {item.label}
        </Link>
      ))}
    </nav>
  );
}

export function Badge({
  children,
  tone = "default"
}: {
  children: React.ReactNode;
  tone?: "default" | "success" | "warning" | "danger";
}) {
  return (
    <span
      className={cn(
        "inline-flex rounded-full px-3 py-1 text-xs font-medium",
        tone === "default" && "bg-stone-100 text-stone-700",
        tone === "success" && "bg-[var(--accent-soft)] text-teal-800",
        tone === "warning" && "bg-[var(--warning-soft)] text-amber-900",
        tone === "danger" && "bg-[var(--danger-soft)] text-red-700"
      )}
    >
      {children}
    </span>
  );
}

export function CountBadge({ children }: { children: React.ReactNode }) {
  return <span className="inline-flex min-w-6 items-center justify-center rounded-full bg-stone-100 px-2 py-0.5 text-[11px] font-medium text-stone-600">{children}</span>;
}

export function EmptyState({ text }: { text: string }) {
  return <p className="text-xs text-[var(--muted)]">{text}</p>;
}

export function Field({
  label,
  children
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <label className="flex flex-col gap-2 text-sm font-medium">
      <span>{label}</span>
      {children}
    </label>
  );
}

export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      {...props}
      className={cn(
        "rounded-2xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none ring-0",
        props.className
      )}
    />
  );
}

export function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <select
      {...props}
      className={cn(
        "rounded-2xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none ring-0",
        props.className
      )}
    />
  );
}

export function PrimaryButton({
  children,
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={cn(
        "rounded-2xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white",
        className
      )}
    >
      {children}
    </button>
  );
}

export function SecondaryButton({
  children,
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={cn(
        "rounded-2xl border border-[var(--border)] bg-white px-4 py-3 text-sm font-semibold",
        className
      )}
    >
      {children}
    </button>
  );
}

export function TinyButton({
  children,
  className,
  tone = "default",
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
  tone?: "default" | "danger";
}) {
  return (
    <button
      {...props}
      className={cn(
        "inline-flex h-8 items-center justify-center rounded-lg border px-2.5 text-xs font-medium transition active:scale-[0.98]",
        tone === "default" && "border-[var(--border)] bg-white text-stone-700",
        tone === "danger" && "border-stone-200 bg-stone-50 text-stone-600",
        className
      )}
    >
      {children}
    </button>
  );
}

export function TextButton({
  children,
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...props}
      className={cn("text-xs font-medium text-[var(--muted)] transition hover:text-stone-900 active:opacity-70", className)}
    >
      {children}
    </button>
  );
}