import { safeStringify } from "athena-auth-js";
import { Badge } from "../ui/badge";

type AuthResultPanelsProps = {
  currentTarget: string;
  emailVerified: boolean | null;
  email: string;
  lastResult: unknown;
  lastError: unknown;
};

export function AuthResultPanels({
  currentTarget,
  emailVerified,
  email,
  lastResult,
  lastError,
}: AuthResultPanelsProps) {
  return (
    <>
      <section className="grid gap-2 rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white to-slate-50 p-4 text-sm shadow-sm">
        <div className="flex items-center gap-2">
          <strong>Target server:</strong>
          <Badge variant="secondary">{currentTarget}</Badge>
        </div>
        <div className="flex items-center gap-2">
          <strong>Email verified:</strong>
          <Badge
            variant={
              emailVerified === null ? "secondary" : emailVerified ? "success" : "warning"
            }
          >
            {emailVerified === null ? "unknown" : emailVerified ? "true" : "false"}
          </Badge>
        </div>
        <div className="flex items-center gap-2">
          <strong>Current form email:</strong>
          <Badge variant="secondary">{email || "(empty)"}</Badge>
        </div>
      </section>
      {lastResult ? (
        <div className="grid gap-1">
          <strong className="text-sm">Last API response</strong>
          <pre className="overflow-x-auto rounded-xl border border-slate-200 p-3 text-xs">
            {safeStringify(lastResult)}
          </pre>
        </div>
      ) : null}
      {lastError ? (
        <div className="grid gap-1">
          <strong className="text-sm text-red-700">Last API error</strong>
          <pre className="overflow-x-auto rounded-xl border border-red-200 p-3 text-xs">
            {safeStringify(lastError)}
          </pre>
        </div>
      ) : null}
    </>
  );
}
