import React, { useState } 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 [showVideo, setShowVideo] = useState(false);

  // Debug: Log auth state when modal renders
  console.log("🔍 AuthModal render - authState:", {
    isLoading: authState.isLoading,
    isAuthenticated: authState.isAuthenticated,
    error: authState.error,
    buttonDisabled: authState.isLoading,
  });

  const handleLogin = async () => {
    console.log("🖱️ Login button clicked!");
    try {
      console.log("🔄 Calling login()...");
      await login();
      console.log("✅ login() completed");
      // 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 256 256"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M230.721 172.7C230.183 170.673 229.313 168.75 228.146 167.008C228.396 166.091 228.587 165.159 228.714 164.217C229.543 158.241 227.471 152.77 223.567 148.537C221.452 146.225 219.185 144.698 216.784 143.761C218.36 137.018 219.157 130.117 219.161 123.193C219.161 120.03 218.982 116.932 218.682 113.88C218.526 112.356 218.337 110.836 218.115 109.32C217.428 104.847 216.408 100.431 215.064 96.11C214.183 93.2707 213.164 90.476 212.01 87.736C210.281 83.6782 208.262 79.75 205.969 75.982C204.465 73.475 202.827 71.0508 201.062 68.72C200.197 67.543 199.296 66.3938 198.358 65.274C195.58 61.898 192.561 58.7277 189.325 55.788C188.25 54.7997 187.145 53.8453 186.01 52.926C184.893 51.9943 183.751 51.0927 182.586 50.222C180.241 48.4766 177.818 46.8392 175.324 45.315C161.543 36.945 145.382 32.145 128.109 32.145C77.817 32.145 37.057 72.907 37.057 123.196C37.055 130.208 37.867 137.196 39.477 144.02C37.317 144.958 35.247 146.42 33.327 148.535C29.424 152.766 27.351 158.217 28.18 164.193C28.306 165.142 28.495 166.082 28.747 167.006C27.5811 168.749 26.7117 170.673 26.174 172.7C24.974 177.261 25.369 181.374 26.894 184.978C25.236 189.688 25.65 194.704 27.809 199.065C29.379 202.25 31.626 204.714 34.396 206.916C37.689 209.534 41.811 211.758 46.783 213.892C52.715 216.422 59.956 218.799 63.249 219.671C71.755 221.873 79.911 223.269 88.177 223.337C99.954 223.446 110.096 220.677 117.357 213.59C120.924 214.027 124.515 214.246 128.109 214.244C131.906 214.236 135.699 213.997 139.467 213.529C146.711 220.661 156.892 223.455 168.712 223.343C176.977 223.277 185.133 221.881 193.617 219.676C196.932 218.804 204.17 216.427 210.105 213.897C215.077 211.76 219.199 209.536 222.514 206.922C225.263 204.719 227.508 202.256 229.079 199.071C231.26 194.709 231.652 189.693 230.017 184.983C231.527 181.379 231.92 177.257 230.721 172.7Z"
                            fill="currentColor"
                          />
                          <path
                            d="M152.047 102.567C153.229 102.985 154.108 104.257 154.944 105.468C156.074 107.104 157.126 108.627 158.74 107.769C160.644 106.756 162.205 105.202 163.225 103.302C164.246 101.402 164.681 99.2427 164.475 97.096C164.321 95.4908 163.813 93.9398 162.987 92.5548C162.161 91.1697 161.038 89.985 159.7 89.0862C158.361 88.1874 156.839 87.5968 155.245 87.3569C153.65 87.117 152.022 87.2339 150.478 87.699C148.934 88.1639 147.513 88.9653 146.316 90.0455C145.119 91.1257 144.176 92.4578 143.556 93.946C142.936 95.4342 142.653 97.0415 142.728 98.652C142.804 100.263 143.235 101.836 143.992 103.26C144.74 104.667 146.4 104.003 148.152 103.302C149.525 102.753 150.956 102.181 152.047 102.567ZM100.672 102.567C99.49 102.985 98.611 104.258 97.775 105.468C96.645 107.105 95.592 108.627 93.979 107.769C91.5845 106.501 89.7482 104.386 88.8278 101.838C87.9075 99.2895 87.9692 96.4896 89.0008 93.9841C90.0324 91.4786 91.9601 89.4471 94.408 88.2855C96.856 87.1239 99.6488 86.9156 102.242 87.701C104.307 88.3228 106.141 89.5427 107.513 91.2065C108.885 92.8704 109.732 94.9035 109.949 97.049C110.165 99.1945 109.74 101.356 108.728 103.26C107.979 104.667 106.319 104.003 104.567 103.303C103.193 102.753 101.764 102.181 100.672 102.567Z"
                            fill="currentColor"
                          />
                        </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 - Click to load to avoid iframe issues in HF Spaces */}
            <Card className="bg-background/50 backdrop-blur-sm border-border/50">
              <CardContent className="p-0">
                <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
                  {showVideo ? (
                    <iframe
                      src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p&autoplay=1"
                      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"
                    />
                  ) : (
                    <button
                      onClick={() => setShowVideo(true)}
                      className="w-full h-full flex flex-col items-center justify-center gap-4 hover:bg-muted/80 transition-colors cursor-pointer"
                    >
                      <div className="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center shadow-lg">
                        <Play className="w-8 h-8 text-white ml-1" />
                      </div>
                      <span className="text-sm text-muted-foreground">Click to play demo video</span>
                    </button>
                  )}
                </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>
  );
}