import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { getLoginUrl } from "@/const";
import { Link } from "wouter";
import { ArrowRight, Zap, Code2, Brain, Cpu, Shield, TrendingUp } from "lucide-react";

export default function Home() {
  const { user, isAuthenticated } = useAuth();

  // Temporary bypass for login
  const isDirectAccess = true;

  if (isAuthenticated || isDirectAccess) {
    return (
      <div className="min-h-screen bg-black text-white">
        {/* Navigation */}
        <nav className="border-b border-green-500/20 bg-black/50 backdrop-blur-sm sticky top-0 z-40">
          <div className="container mx-auto px-4 py-4 flex justify-between items-center">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-green-400 to-cyan-400 flex items-center justify-center">
                <Zap className="text-black" size={20} />
              </div>
              <h1 className="text-xl font-bold bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
                Hacking Factory
              </h1>
            </div>
            <div className="flex gap-4">
              <Link href="/dashboard">
                <Button variant="ghost" className="text-green-400 hover:text-green-300">
                  Dashboard
                </Button>
              </Link>
              <Link href="/chat">
                <Button variant="ghost" className="text-cyan-400 hover:text-cyan-300">
                  AI Chat
                </Button>
              </Link>
            </div>
          </div>
        </nav>

        {/* Hero Section */}
        <section className="container mx-auto px-4 py-20">
          <div className="max-w-3xl mx-auto text-center mb-20">
            <h2 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
              AI-Powered Code Generation & Evaluation
            </h2>
            <p className="text-xl text-gray-400 mb-8">
              Generate, evaluate, and optimize code with advanced AI models. Support for multiple modes and content types.
            </p>
            <Link href="/dashboard">
              <Button className="bg-gradient-to-r from-green-500 to-cyan-500 text-black hover:from-green-600 hover:to-cyan-600 text-lg px-8 py-6">
                Get Started <ArrowRight className="ml-2" size={20} />
              </Button>
            </Link>
          </div>

          {/* Features Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-20">
            {[
              {
                icon: Code2,
                title: "Code Generation",
                description: "Generate production-ready code with Qwen AI",
                color: "from-green-400 to-emerald-500",
              },
              {
                icon: Brain,
                title: "AI Evaluation",
                description: "Evaluate code quality with DeepSeek analysis",
                color: "from-cyan-400 to-blue-500",
              },
              {
                icon: Cpu,
                title: "Iterative Loop",
                description: "Continuous improvement through AI feedback loops",
                color: "from-purple-400 to-pink-500",
              },
              {
                icon: Shield,
                title: "Security Focus",
                description: "Analyze code for security vulnerabilities",
                color: "from-orange-400 to-red-500",
              },
              {
                icon: TrendingUp,
                title: "Performance Metrics",
                description: "Track and optimize code performance",
                color: "from-yellow-400 to-orange-500",
              },
              {
                icon: Zap,
                title: "Real-time Processing",
                description: "Instant code generation and evaluation",
                color: "from-pink-400 to-rose-500",
              },
            ].map((feature, idx) => {
              const Icon = feature.icon;
              return (
                <Card key={idx} className="bg-gray-900/50 border-green-500/20 hover:border-green-500/50 transition-all">
                  <CardHeader>
                    <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${feature.color} p-2 mb-4`}>
                      <Icon className="text-black" size={24} />
                    </div>
                    <CardTitle className="text-green-400">{feature.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-400">{feature.description}</p>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* CTA Section */}
          <div className="bg-gradient-to-r from-green-500/10 to-cyan-500/10 border border-green-500/20 rounded-lg p-12 text-center">
            <h3 className="text-3xl font-bold text-white mb-4">Ready to Transform Your Code?</h3>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
              Start generating and evaluating code with AI today. Create your first project and see the power of intelligent code generation.
            </p>
            <Link href="/dashboard">
              <Button className="bg-gradient-to-r from-green-500 to-cyan-500 text-black hover:from-green-600 hover:to-cyan-600 px-8 py-6">
                Launch Dashboard <ArrowRight className="ml-2" size={20} />
              </Button>
            </Link>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-black text-white flex items-center justify-center">
      <div className="text-center max-w-2xl mx-auto px-4">
        <div className="w-20 h-20 rounded-lg bg-gradient-to-br from-green-400 to-cyan-400 flex items-center justify-center mx-auto mb-8">
          <Zap className="text-black" size={40} />
        </div>
        <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
          Hacking Factory
        </h1>
        <p className="text-xl text-gray-400 mb-8">
          AI-Powered Code Generation & Evaluation Platform
        </p>
        <a href={getLoginUrl()}>
          <Button className="bg-gradient-to-r from-green-500 to-cyan-500 text-black hover:from-green-600 hover:to-cyan-600 text-lg px-8 py-6">
            Sign In with Manus <ArrowRight className="ml-2" size={20} />
          </Button>
        </a>
      </div>
    </div>
  );
}