Sankofa/portal/src/components/auth/PortalSignInCard.tsx

'use client';

import { signIn } from 'next-auth/react';
import { useCallback, useState, type ReactNode } from 'react';

import { CloudflareTurnstile } from '@/components/security/CloudflareTurnstile';

const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY;

export interface PortalSignInCardProps {
  badge?: string;
  title: string;
  subtitle: string;
  callbackUrl?: string;
  /** Extra hint under the sign-in button (e.g. dev IdP note) */
  footer?: ReactNode;
}

export function PortalSignInCard({
  badge = 'Sankofa Phoenix',
  title,
  subtitle,
  callbackUrl = '/',
  footer,
}: PortalSignInCardProps) {
  const [turnstileToken, setTurnstileToken] = useState<string | null>(() =>
    TURNSTILE_SITE_KEY ? null : ''
  );

  const onTurnstileToken = useCallback((token: string | null) => {
    setTurnstileToken(token);
  }, []);

  const canSignIn = !TURNSTILE_SITE_KEY || Boolean(turnstileToken);

  return (
    <div className="w-full max-w-md rounded-2xl border border-gray-800 bg-gray-900/80 p-8 shadow-xl shadow-black/40 backdrop-blur-sm">
      <p className="mb-1 text-center text-sm font-medium uppercase tracking-wide text-orange-400">{badge}</p>
      <h1 className="mb-2 text-center text-2xl font-bold text-white">{title}</h1>
      <p className="mb-8 text-center text-gray-400">{subtitle}</p>

      {TURNSTILE_SITE_KEY ? (
        <div className="mb-6">
          <p className="mb-2 text-center text-sm text-gray-500">Verification</p>
          <CloudflareTurnstile siteKey={TURNSTILE_SITE_KEY} onToken={onTurnstileToken} />
        </div>
      ) : null}

      <button
        type="button"
        disabled={!canSignIn}
        onClick={() => signIn(undefined, { callbackUrl })}
        className="w-full rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-6 py-3 font-semibold text-gray-950 shadow-lg transition hover:from-orange-400 hover:to-amber-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
      >
        Sign In
      </button>

      {footer}
    </div>
  );
}