import { ShieldHalf, LogIn, ExternalLink } from "lucide-react";
import { useAuth } from "react-oidc-context";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";

function LoginPage() {
  const auth = useAuth();

  const handleSSOLogin = () => {
    // OIDC client-side authentication flow started here
    auth.signinRedirect();
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
      <div className="w-full max-w-md space-y-8">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-[0_20px_50px_rgba(54,211,153,0.3)]">
            <ShieldHalf size={32} />
          </div>
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tight">Baron SSO</h1>
            <p className="text-sm text-muted-foreground uppercase tracking-[0.2em]">
              Developer Control Plane
            </p>
          </div>
        </div>

        <Card className="border-primary/20 bg-card/50 backdrop-blur-xl shadow-2xl">
          <CardHeader className="space-y-1">
            <CardTitle className="text-2xl flex items-center gap-2">
              <LogIn size={20} className="text-primary" />
              개발자 포털 로그인
            </CardTitle>
            <CardDescription>
              Baron 통합 인증(SSO)을 통해 개발자 포털에 접속합니다.
            </CardDescription>
          </CardHeader>
          <CardContent className="pt-4 pb-8 space-y-3">
            <Button
              onClick={handleSSOLogin}
              className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
              disabled={auth.isLoading}
            >
              {auth.isLoading ? (
                <>
                  <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  로그인 진행 중...
                </>
              ) : (
                <>
                  <ShieldHalf size={22} />
                  SSO 계정으로 로그인
                  <ExternalLink size={16} className="opacity-50" />
                </>
              )}
            </Button>

            <p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
              개발자 포털 세션은 브라우저 정책에 따라 유지됩니다.
              <br />
              민감한 작업 시 재인증을 요구할 수 있습니다.
            </p>
          </CardContent>
        </Card>

        <div className="flex justify-center gap-4">
          <div className="h-1 w-1 rounded-full bg-primary/30" />
          <div className="h-1 w-1 rounded-full bg-primary/30" />
          <div className="h-1 w-1 rounded-full bg-primary/30" />
        </div>

        <p className="px-8 text-center text-sm text-muted-foreground">
          인증 정보가 없거나 로그인이 되지 않는 경우
          <br />
          시스템 관리자에게 문의하세요.
        </p>
      </div>
    </div>
  );
}

export default LoginPage;