'use client';

import { useCallback, useEffect, useState, type ReactNode } from 'react';
import { AdminError, adminFetch } from '@/lib/admin-fetch';

/** Fetch an admin resource with loading/error state and a `reload()` handle. */
export function useAdmin<T>(path: string | null, params?: Record<string, string | number | undefined>) {
  const [result, setResult] = useState<{ key: string; data: T | null; err: string | null }>({ key: '', data: null, err: null });
  const [nonce, setNonce] = useState(0);
  const key = `${path}?${JSON.stringify(params ?? {})}#${nonce}`;
  useEffect(() => {
    if (!path) return;
    let alive = true;
    adminFetch<T>(path, { params: JSON.parse(key.slice(key.indexOf('?') + 1, key.lastIndexOf('#'))) as Record<string, string | number | undefined> })
      .then((d) => alive && setResult({ key, data: d, err: null }))
      .catch((e: unknown) => alive && setResult((r) => ({ key, data: r.data, err: e instanceof AdminError ? `${e.status} ${JSON.stringify(e.body ?? '')}` : String(e) })));
    return () => {
      alive = false;
    };
  }, [path, key]);
  const reload = useCallback(() => setNonce((n) => n + 1), []);
  const loading = result.key !== key;
  return { data: result.data, err: loading ? null : result.err, loading, reload };
}

export function AdminPage({ title, desc, right, children }: { title: string; desc?: string; right?: ReactNode; children: ReactNode }) {
  return (
    <div>
      <header className="mb-4 flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-[22px] font-medium tracking-tight">{title}</h1>
          {desc && <p className="mt-0.5 max-w-[760px] text-[12.5px] text-ink-2">{desc}</p>}
        </div>
        {right}
      </header>
      {children}
    </div>
  );
}

export function Panel({ title, right, children, className = '' }: { title?: string; right?: ReactNode; children: ReactNode; className?: string }) {
  return (
    <section className={`panel p-3 ${className}`}>
      {(title || right) && (
        <header className="mb-2 flex items-baseline justify-between gap-3">
          {title && <h2 className="label">{title}</h2>}
          {right && <div className="text-[11px] text-ink-2">{right}</div>}
        </header>
      )}
      {children}
    </section>
  );
}

export function ErrorNote({ err }: { err: string | null }) {
  if (!err) return null;
  return <p className="my-2 text-[12px] text-bad">Admin API error: {err}</p>;
}

export function Ok({ ok, label }: { ok: boolean; label?: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.1em]" style={{ color: ok ? 'var(--ok)' : 'var(--bad)' }}>
      <span className="size-1.5 rounded-full" style={{ background: ok ? 'var(--ok)' : 'var(--bad)' }} aria-hidden="true" />
      {label ?? (ok ? 'ok' : 'down')}
    </span>
  );
}

export const inputCls = 'h-8 rounded-[4px] border border-line bg-panel px-2 text-[12.5px] text-ink placeholder:text-ink-3';
export const btnCls = 'h-8 rounded-[4px] border border-line px-3 text-[12px] text-ink hover:border-line-2 disabled:opacity-40';
export const btnPrimary = 'h-8 rounded-[4px] bg-accent px-3 text-[12px] font-medium text-bg hover:opacity-90 disabled:opacity-40';
export const btnDanger = 'h-8 rounded-[4px] border border-bad/60 px-3 text-[12px] text-bad hover:bg-bad/10 disabled:opacity-40';

export function Field({ label, children }: { label: string; children: ReactNode }) {
  return (
    <label className="block min-w-0">
      <span className="label">{label}</span>
      <div className="mt-1">{children}</div>
    </label>
  );
}

export function Toast({ msg }: { msg: string | null }) {
  if (!msg) return null;
  return (
    <p role="status" className="my-2 text-[12px] text-ok">
      {msg}
    </p>
  );
}