frontend/src/components/auth/AuthModal.tsx

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useAuth } from "@/context/AuthContext";
import { ExternalLink, FileText, Play } from "lucide-react";

interface AuthModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function AuthModal({ open, onOpenChange }: AuthModalProps) {
  const { login, authState } = useAuth();

  const handleLogin = async () => {
    try {
      await login();
      // Don't close modal here, it will close after successful auth
    } catch (error) {
      console.error("Login failed:", error);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl p-0 overflow-hidden">
        <div className="grid lg:grid-cols-2 gap-0 min-h-[600px]">
          {/* Left side - Authentication */}
          <div className="p-8 lg:p-12 flex flex-col justify-center bg-background">
            <div className="space-y-8">
              {/* Header */}
              <div className="space-y-4">
                <h1 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
                  AgentGraph
                </h1>
                <p className="text-xl text-muted-foreground leading-relaxed">
                  Trace-to-Graph Platform for Interactive Analysis and
                  Robustness Testing in Agentic AI Systems
                </p>
              </div>

              {/* Description */}
              <p className="text-lg text-muted-foreground leading-relaxed">
                Convert execution logs into interactive knowledge graphs with
                actionable insights for AI system analysis and robustness
                testing.
              </p>

              {/* Authentication Section */}
              <div className="space-y-6">
                <div className="space-y-4">
                  <h2 className="text-xl font-semibold">
                    Access Research Platform
                  </h2>

                  <Button
                    onClick={handleLogin}
                    disabled={authState.isLoading}
                    size="lg"
                    className="w-full h-12 text-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 transition-all duration-300"
                  >
                    {authState.isLoading ? (
                      <div className="flex items-center space-x-2">
                        <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                        <span>Connecting...</span>
                      </div>
                    ) : (
                      <div className="flex items-center space-x-2">
                        <svg
                          className="w-5 h-5"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                        >
                          <path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm5.568 8.16c-.169 1.858-.896 3.375-2.043 4.519-1.146 1.144-2.663 1.874-4.521 2.043-.151.014-.302.021-.454.021-.156 0-.31-.007-.463-.021-1.858-.169-3.375-.899-4.519-2.043C4.424 11.535 3.694 10.018 3.525 8.16c-.014-.151-.021-.302-.021-.454 0-.156.007-.31.021-.463.169-1.858.899-3.375 2.043-4.519C6.712 1.58 8.229.85 10.087.681c.151-.014.302-.021.454-.021.156 0 .31.007.463.021 1.858.169 3.375.899 4.519 2.043 1.144 1.144 1.874 2.661 2.043 4.519.014.151.021.302.021.454 0 .156-.007.31-.021.463z" />
                        </svg>
                        <span>Sign in with Hugging Face</span>
                        <ExternalLink className="w-4 h-4" />
                      </div>
                    )}
                  </Button>
                </div>

                {authState.error && (
                  <Card className="border-destructive/20 bg-destructive/5">
                    <CardContent className="p-4">
                      <p className="text-sm text-destructive">
                        {authState.error}
                      </p>
                    </CardContent>
                  </Card>
                )}

                <Card className="bg-muted/30">
                  <CardContent className="p-4">
                    <p className="text-sm text-muted-foreground">
                      Authentication required for responsible AI resource usage
                    </p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>

          {/* Right side - Demo Content */}
          <div className="bg-secondary/20 p-8 lg:p-12 space-y-6">
            {/* Demo Video */}
            <Card className="bg-background/50 backdrop-blur-sm border-border/50">
              <CardContent className="p-0">
                <div className="relative aspect-video rounded-lg overflow-hidden">
                  <iframe
                    src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p"
                    title="AgentGraph: Interactive Analysis Platform Demo"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                    className="w-full h-full"
                  />
                </div>
                <div className="p-4">
                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                    <Play className="w-4 h-4" />
                    <span>Interactive Demo</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Research Paper */}
            <Card className="bg-background/50 backdrop-blur-sm border-border/50">
              <CardContent className="p-6">
                <div className="flex items-start space-x-4">
                  <div className="flex-shrink-0">
                    <FileText className="w-8 h-8 text-primary" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold mb-2">
                      Research Paper
                    </h3>
                    <p className="text-sm text-muted-foreground mb-4">
                      AgentGraph: Trace-to-Graph Platform for Interactive
                      Analysis and Robustness Testing in Agentic AI Systems
                    </p>
                    <a
                      href="/static/papers/agentgraph_paper.pdf"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
                    >
                      <FileText className="w-4 h-4 mr-2" />
                      <span>Download PDF</span>
                      <ExternalLink className="w-4 h-4 ml-1" />
                    </a>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}