import type { ReactNode } from "react";
import type { Health } from "@/lib/discord";

// Shared pieces for the Discord admin page (design-canvas/discord-system-mockup.html,
// "DRB admin" view): panels with a title row, dense tables, status dots.

const DOT: Record<Health, string> = {
  ok: "bg-green-500",
  warn: "bg-sev-moderate",
  bad: "bg-sev-major",
  off: "bg-ink-muted",
};

export function Status({ health, children }: { health: Health; children: ReactNode }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap text-ink">
      <i className={`inline-block w-2 h-2 rounded-full ${DOT[health]}`} aria-hidden />
      {children}
    </span>
  );
}

export function Panel({
  title,
  description,
  action,
  note,
  children,
}: {
  title: string;
  description?: ReactNode;
  action?: ReactNode;
  note?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="bg-surface border border-line rounded-xl overflow-hidden">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-3 border-b border-line">
        <h2 className="text-ink font-semibold text-sm">{title}</h2>
        {description && <span className="text-ink-muted text-xs">{description}</span>}
        {action && <div className="ml-auto flex gap-2">{action}</div>}
      </div>
      {children}
      {note && <div className="text-xs text-ink-muted px-4 py-2.5 bg-raised border-t border-line">{note}</div>}
    </section>
  );
}

export const TH = "text-left font-medium text-ink-muted text-xs px-4 py-2 border-b border-line whitespace-nowrap";
export const TD = "px-4 py-2.5 border-b border-line align-top text-sm text-ink";
export const DIM = "text-xs text-ink-muted";

export function Table({ head, children }: { head: string[]; children: ReactNode }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr>
            {head.map((h, i) => (
              <th key={i} className={TH}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody className="[&>tr:last-child>td]:border-b-0">{children}</tbody>
      </table>
    </div>
  );
}

export function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: ReactNode }) {
  return (
    <label className="block">
      <span className="text-xs text-ink-muted block mb-1">{label}</span>
      {children}
      {hint && <span className="text-xs text-ink-muted block mt-1">{hint}</span>}
    </label>
  );
}

export const INPUT =
  "w-full bg-page border border-line rounded-lg px-3 py-2 text-ink text-sm focus:outline-none focus:border-accent";

export function InviteLinks({ invite }: { invite: { name: string; invite_url: string | null }[] }) {
  if (!invite.length) return null;
  return (
    <span className="flex flex-wrap gap-2 mt-1">
      {invite.map((b) =>
        b.invite_url ? (
          <a key={b.name} href={b.invite_url} target="_blank" rel="noopener noreferrer" className="text-accent underline text-xs">
            Invite {b.name}
          </a>
        ) : (
          <span key={b.name} className="text-xs text-ink-muted">{b.name} (no invite link — refresh it under Radio bots)</span>
        ),
      )}
    </span>
  );
}