'use client';
import { KeyRound, LogOut, RefreshCw } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { type ReactNode, useState } from 'react';
import { Container } from '@/components/ui/section';
import { ADMIN_MODULES, setAdminToken, useAdminToken } from '@/lib/admin';
import { cn } from '@/lib/cn';

/** Token gate + module navigation. The token never leaves localStorage except as the `X-CA-Admin-Token` header. */
export function AdminShell({ children, title, onRefresh, refreshing }: { children: ReactNode; title: string; onRefresh?: () => void; refreshing?: boolean }) {
  const token = useAdminToken();
  const pathname = usePathname();
  const [draft, setDraft] = useState('');
  if (token === undefined) return <Container className="py-10 text-sm text-ink-3">Loading…</Container>;
  if (!token)
    return (
      <Container className="py-12 md:py-20">
        <p className="eyebrow">Admin</p>
        <h1 className="display mt-2 text-3xl">Operator console</h1>
        <p className="mt-3 max-w-lg text-sm text-ink-2">Enter the admin token (`CA_ADMIN_TOKEN`). It is stored in this browser only and sent as <span className="mono">X-CA-Admin-Token</span> to same-origin API calls.</p>
        <form
          className="mt-5 flex max-w-md gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            if (draft.trim()) setAdminToken(draft.trim());
          }}
        >
          <label htmlFor="admin-token" className="sr-only">
            Admin token
          </label>
          <input id="admin-token" type="password" value={draft} onChange={(e) => setDraft(e.target.value)} className="field flex-1" placeholder="admin token" autoComplete="off" data-admin-token />
          <button type="submit" className="btn btn-primary">
            <KeyRound className="size-4" aria-hidden /> Enter
          </button>
        </form>
      </Container>
    );
  return (
    <Container wide className="py-4 md:py-6">
      <div className="flex flex-col gap-4 lg:flex-row">
        <nav aria-label="Admin modules" className="no-scrollbar -mx-4 flex gap-1 overflow-x-auto px-4 lg:mx-0 lg:w-48 lg:shrink-0 lg:flex-col lg:px-0">
          {ADMIN_MODULES.map((m) => {
            const href = `/admin/${m.id}`;
            const on = pathname === href || (m.id === 'overview' && pathname === '/admin');
            return (
              <Link key={m.id} href={href} className={cn('flex h-9 shrink-0 items-center rounded-sm px-2.5 text-[13px] whitespace-nowrap', on ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2 hover:text-ink')} title={m.hint}>
                {m.label}
              </Link>
            );
          })}
          <button type="button" onClick={() => setAdminToken(null)} className="mt-auto flex h-9 shrink-0 items-center gap-1.5 rounded-sm px-2.5 text-[13px] text-ink-3 hover:text-danger">
            <LogOut className="size-3.5" aria-hidden /> Sign out
          </button>
        </nav>
        <div className="min-w-0 flex-1">
          <div className="mb-3 flex items-center justify-between gap-3">
            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
            {onRefresh && (
              <button type="button" onClick={onRefresh} className="btn btn-sm" disabled={refreshing}>
                <RefreshCw className={cn('size-3.5', refreshing && 'animate-spin')} aria-hidden /> Refresh
              </button>
            )}
          </div>
          {children}
        </div>
      </div>
    </Container>
  );
}

export function AdminError({ error }: { error: string | null }) {
  if (!error) return null;
  return (
    <p className="mb-3 border border-danger/40 bg-danger-soft px-3 py-2 text-sm text-danger" role="alert">
      {error}
      {/401|403/.test(error) ? ' — the token was rejected. Sign out and enter it again.' : ''}
    </p>
  );
}

export function AdminTable({ head, children, className }: { head: ReactNode; children: ReactNode; className?: string }) {
  return (
    <div className={cn('table-scroll', className)}>
      <table className="data-table compact">
        <thead>{head}</thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
}

export function KpiRow({ items }: { items: { label: string; value: ReactNode; hint?: ReactNode; tone?: 'positive' | 'warning' | 'danger' }[] }) {
  return (
    <div className="grid grid-cols-2 gap-x-6 border-y border-rule sm:grid-cols-3 lg:grid-cols-6 [&>*]:border-b [&>*]:border-rule lg:[&>*]:border-b-0">
      {items.map((i) => (
        <div key={i.label} className="min-w-0 py-3">
          <p className="eyebrow">{i.label}</p>
          <p className={cn('tnum mt-1 text-[22px] font-semibold leading-none tracking-tight', i.tone === 'positive' && 'text-positive', i.tone === 'warning' && 'text-warning', i.tone === 'danger' && 'text-danger')}>{i.value}</p>
          {i.hint && <p className="mt-1 text-[11px] text-ink-3">{i.hint}</p>}
        </div>
      ))}
    </div>
  );
}