import { useAuth } from '@/hooks/useAuth';
import { Navigate } from 'react-router-dom';
import { ROUTES } from '@/lib/types';

export function DeveloperPage() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to={ROUTES.LOGIN} replace />;
  }

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Developer Dashboard</h1>

      <div className="p-6 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 space-y-4">
        <h2 className="font-semibold text-slate-900 dark:text-white">OIDC Client Setup</h2>
        <p className="text-sm text-slate-500 dark:text-slate-400">
          Register your application to use nKode as an identity provider. Configure redirect URIs, scopes, and authentication flows.
        </p>

        <div className="space-y-3">
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
              Application Name
            </label>
            <input
              type="text"
              placeholder="My App"
              className="w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700
                bg-white dark:bg-slate-900 text-slate-900 dark:text-white
                placeholder:text-slate-400 dark:placeholder:text-slate-500"
              disabled
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
              Redirect URI
            </label>
            <input
              type="text"
              placeholder="https://myapp.com/callback"
              className="w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700
                bg-white dark:bg-slate-900 text-slate-900 dark:text-white
                placeholder:text-slate-400 dark:placeholder:text-slate-500"
              disabled
            />
          </div>
        </div>

        <p className="text-xs text-slate-400 dark:text-slate-500 italic">
          Client registration coming soon. This will generate client_id and client_secret for OAuth2/OIDC integration.
        </p>
      </div>
    </div>
  );
}