'use client';

import { useEffect, Suspense } from 'react';
import { signOut, useSession } from 'next-auth/react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

function LoginContent() {
  const { status } = useSession();
  const router = useRouter();
  const searchParams = useSearchParams();
  const hasError = searchParams.get('error') || searchParams.get('callbackUrl');

  useEffect(() => {
    if (status === 'authenticated') {
      router.push('/dashboard');
    }
  }, [status, router]);

  const handleSignIn = async () => {
    const csrfResponse = await fetch('/api/auth/csrf');
    const csrfPayload = await csrfResponse.json() as { csrfToken?: string };

    if (!csrfPayload.csrfToken) {
      window.location.href = '/api/auth/signin?callbackUrl=%2Fdashboard';
      return;
    }

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/api/auth/signin/keycloak';

    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = 'csrfToken';
    csrfInput.value = csrfPayload.csrfToken;
    form.appendChild(csrfInput);

    const callbackInput = document.createElement('input');
    callbackInput.type = 'hidden';
    callbackInput.name = 'callbackUrl';
    callbackInput.value = `${window.location.origin}/dashboard`;
    form.appendChild(callbackInput);

    document.body.appendChild(form);
    form.submit();
  };

  const handleSwitchAccount = () => {
    const keycloakLogoutUrl = `${process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER || 'http://localhost:8080/realms/workclub'}/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(window.location.origin + '/login')}`;
    signOut({ redirect: false }).then(() => {
      window.location.href = keycloakLogoutUrl;
    });
  };

  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle className="text-2xl text-center">WorkClub Manager</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Button onClick={handleSignIn} className="w-full">
          Sign in with Keycloak
        </Button>
        <Button variant="outline" onClick={handleSwitchAccount} className="w-full">
          Use different credentials
        </Button>
      </CardContent>
      {hasError && (
        <CardFooter>
          <p className="text-sm text-muted-foreground text-center w-full">
            Having trouble? Try &quot;Use different credentials&quot; to clear your session.
          </p>
        </CardFooter>
      )}
    </Card>
  );
}

export default function LoginPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50">
      <Suspense fallback={<Card className="w-96 p-6 text-center">Loading...</Card>}>
        <LoginContent />
      </Suspense>
    </div>
  );
}