import * as React from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Skeleton, TableSkeleton } from "@/components/ui/skeleton";
import { formatDate, timeAgo } from "@/lib/format";
import { RANGES, rangeLabel, type Range } from "@/lib/queries/admin";

/** Dense table cell for numbers: right-aligned, tabular, mono. */
export function Num({ children, className, muted }: { children: React.ReactNode; className?: string; muted?: boolean }) {
  return <span className={cn("tabular font-mono text-[12.5px]", muted && "text-fg-subtle", className)}>{children}</span>;
}
export const numCell = "text-right tabular font-mono text-[12.5px] whitespace-nowrap";
export const monoCell = "font-mono text-[12.5px] whitespace-nowrap";

export function Mono({ children, className, title }: { children: React.ReactNode; className?: string; title?: string }) {
  return (
    <span className={cn("font-mono text-[12.5px]", className)} title={title}>
      {children}
    </span>
  );
}

/** Upstream provider name. Admin-only by construction: this component only lives in components/admin. */
export function ProviderBadge({ id, className }: { id: string | null | undefined; className?: string }) {
  if (!id) return <span className="text-fg-subtle">—</span>;
  return (
    <Badge variant="outline" className={cn("font-mono lowercase", className)}>
      {id}
    </Badge>
  );
}

export function NetworkBadge({ network }: { network: string | null | undefined }) {
  if (!network) return <span className="text-fg-subtle">—</span>;
  return <Badge variant={network === "residential" ? "accent" : network === "mobile" ? "info" : "default"}>{network}</Badge>;
}

/** Single-plan platform: `unlimited` is the only valid value; anything else is a legacy row not yet migrated. */
export function PlanBadge({ plan }: { plan: string }) {
  const v = plan === "unlimited" ? "solid" : "outline";
  return (
    <Badge variant={v} className="capitalize" title={plan === "unlimited" ? undefined : "Legacy plan value (treated as unlimited)"}>
      {plan}
    </Badge>
  );
}

export function BoolBadge({ value, yes = "yes", no = "no", invert }: { value: boolean; yes?: string; no?: string; invert?: boolean }) {
  const good = invert ? !value : value;
  return (
    <Badge variant={good ? "success" : "outline"} dot>
      {value ? yes : no}
    </Badge>
  );
}

export function DateCell({ value, relative = true }: { value: Date | string | null | undefined; relative?: boolean }) {
  if (!value) return <span className="text-fg-subtle">—</span>;
  return (
    <time dateTime={new Date(value).toISOString()} title={formatDate(value)} className="whitespace-nowrap text-[12.5px] text-fg-muted">
      {relative ? timeAgo(value) : formatDate(value)}
    </time>
  );
}

export function Panel({ title, description, right, children, className, bodyClassName, flush }: { title?: React.ReactNode; description?: React.ReactNode; right?: React.ReactNode; children: React.ReactNode; className?: string; bodyClassName?: string; flush?: boolean }) {
  return (
    <section className={cn("rounded-lg border border-border bg-bg-elevated shadow-xs", className)}>
      {title ? (
        <header className="flex flex-wrap items-start justify-between gap-2 border-b border-border px-4 py-2.5">
          <div className="min-w-0">
            <h2 className="text-[13px] font-semibold tracking-tight">{title}</h2>
            {description ? <p className="mt-0.5 text-[12px] text-fg-muted leading-relaxed">{description}</p> : null}
          </div>
          {right ? <div className="flex shrink-0 items-center gap-2">{right}</div> : null}
        </header>
      ) : null}
      <div className={cn(!flush && "p-4", bodyClassName)}>{children}</div>
    </section>
  );
}

/** Two-column key/value grid for detail pages. */
export function KV({ items, cols = 2, className }: { items: Array<{ label: React.ReactNode; value: React.ReactNode; mono?: boolean; span?: boolean }>; cols?: 1 | 2 | 3; className?: string }) {
  return (
    <dl className={cn("grid gap-x-6 gap-y-3 text-[13px]", cols === 2 && "sm:grid-cols-2", cols === 3 && "sm:grid-cols-2 lg:grid-cols-3", className)}>
      {items.map((it, i) => (
        <div key={i} className={cn("min-w-0", it.span && "sm:col-span-full")}>
          <dt className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">{it.label}</dt>
          <dd className={cn("mt-0.5 break-words text-fg", it.mono && "font-mono text-[12.5px]")}>{it.value ?? <span className="text-fg-subtle">—</span>}</dd>
        </div>
      ))}
    </dl>
  );
}

/** Range selector (24h / 7d / 30d) rendered as links; preserves other query params. */
export function RangeTabs({ current, basePath, params }: { current: Range; basePath: string; params?: Record<string, string | undefined> }) {
  return (
    <div className="inline-flex h-8 items-center gap-0.5 rounded-md bg-bg-muted p-1 text-fg-muted" role="tablist" aria-label="Time range">
      {RANGES.map((r) => {
        const sp = new URLSearchParams();
        for (const [k, v] of Object.entries(params ?? {})) if (v) sp.set(k, v);
        sp.set("range", r);
        const active = r === current;
        return (
          <Link
            key={r}
            href={`${basePath}?${sp.toString()}`}
            role="tab"
            aria-selected={active}
            title={rangeLabel(r)}
            className={cn("inline-flex h-6 items-center rounded-[5px] px-2.5 text-[12.5px] font-medium transition-colors", active ? "bg-bg text-fg shadow-xs" : "hover:text-fg")}
          >
            {r}
          </Link>
        );
      })}
    </div>
  );
}

export function Pagination({ page, pages, total, basePath, params, pageSize }: { page: number; pages: number; total: number; basePath: string; params?: Record<string, string | undefined>; pageSize: number }) {
  const href = (p: number) => {
    const sp = new URLSearchParams();
    for (const [k, v] of Object.entries(params ?? {})) if (v) sp.set(k, v);
    if (p > 1) sp.set("page", String(p));
    const q = sp.toString();
    return q ? `${basePath}?${q}` : basePath;
  };
  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
  const to = Math.min(total, page * pageSize);
  return (
    <div className="flex items-center justify-between gap-3 border-t border-border px-4 py-2 text-[12.5px] text-fg-muted">
      <span className="tabular">
        {from.toLocaleString()}–{to.toLocaleString()} of {total.toLocaleString()}
      </span>
      <div className="flex items-center gap-1">
        <Button asChild variant="outline" size="xs" disabled={page <= 1} aria-disabled={page <= 1} className={cn(page <= 1 && "pointer-events-none opacity-50")}>
          <Link href={href(Math.max(1, page - 1))} aria-label="Previous page">
            <ChevronLeft className="size-3.5" />
          </Link>
        </Button>
        <span className="px-2 tabular">
          {page} / {pages}
        </span>
        <Button asChild variant="outline" size="xs" className={cn(page >= pages && "pointer-events-none opacity-50")}>
          <Link href={href(Math.min(pages, page + 1))} aria-label="Next page" aria-disabled={page >= pages}>
            <ChevronRight className="size-3.5" />
          </Link>
        </Button>
      </div>
    </div>
  );
}

/** Plain GET search form — no client JS needed. Extra hidden params are preserved. */
export function SearchForm({ action, q, placeholder, hidden, children }: { action: string; q?: string; placeholder?: string; hidden?: Record<string, string | undefined>; children?: React.ReactNode }) {
  return (
    <form action={action} method="get" className="flex flex-wrap items-center gap-2" role="search">
      {Object.entries(hidden ?? {}).map(([k, v]) => (v ? <input key={k} type="hidden" name={k} value={v} /> : null))}
      <div className="relative">
        <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-fg-subtle" aria-hidden />
        <Input name="q" defaultValue={q} placeholder={placeholder ?? "Search…"} className="h-8 w-[260px] pl-8 text-[13px]" aria-label="Search" />
      </div>
      {children}
      <Button type="submit" variant="outline" size="sm">
        Search
      </Button>
      {q ? (
        <Button asChild variant="ghost" size="sm">
          <Link href={action}>Clear</Link>
        </Button>
      ) : null}
    </form>
  );
}

export function MarginText({ value, pct }: { value: number; pct: number | null }) {
  const neg = value < 0;
  return (
    <span className={cn("tabular font-mono text-[12.5px]", neg ? "text-danger" : "text-success")}>
      {neg ? "−" : ""}${Math.abs(value).toFixed(value !== 0 && Math.abs(value) < 0.01 ? 4 : 2)}
      {pct !== null ? <span className="ml-1 text-fg-subtle">({pct.toFixed(1)}%)</span> : null}
    </span>
  );
}

export function AdminLoading({ stats = 4, rows = 8 }: { stats?: number; rows?: number }) {
  return (
    <div className="space-y-6" aria-busy="true" aria-live="polite">
      <div className="space-y-2">
        <Skeleton className="h-6 w-48" />
        <Skeleton className="h-3.5 w-80" />
      </div>
      {stats ? (
        <div className="grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: stats }).map((_, i) => (
            <div key={i} className="space-y-2 bg-bg-elevated px-5 py-4">
              <Skeleton className="h-3 w-20" />
              <Skeleton className="h-6 w-28" />
            </div>
          ))}
        </div>
      ) : null}
      <div className="rounded-lg border border-border bg-bg-elevated">
        <TableSkeleton rows={rows} cols={6} />
      </div>
    </div>
  );
}