import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useAuth } from "@/contexts/AuthContext";
import {
  UserPlus,
  Settings,
  LayoutDashboard,
  BookOpen,
  Users,
  LifeBuoy,
  ArrowRight,
  CheckCircle,
} from "lucide-react";

export default function GetStarted() {
  const steps = [
    {
      title: "Create your account",
      description: "Sign up with email or GitHub/Google.",
      icon: UserPlus,
      points: [
        "Secure auth via Supabase",
        "Email verification",
        "OAuth supported",
      ],
      cta: { label: "Join AeThex", href: "/onboarding" },
      color: "from-aethex-500 to-neon-blue",
    },
    {
      title: "Complete onboarding",
      description: "Tell us what you build to personalize your experience.",
      icon: Settings,
      points: ["Profile basics", "Interests & skills", "Realm & level"],
      cta: { label: "Start Onboarding", href: "/onboarding" },
      color: "from-fuchsia-500 to-pink-500",
    },
    {
      title: "Explore your dashboard",
      description: "Manage profile, projects, applications, and rewards.",
      icon: LayoutDashboard,
      points: [
        "Profile & settings",
        "Community feed",
        "Achievements & rewards",
      ],
      cta: { label: "Open Dashboard", href: "/dashboard" },
      color: "from-emerald-500 to-teal-500",
    },
  ];

  const quickLinks = [
    {
      title: "Documentation",
      desc: "Guides and API reference",
      icon: BookOpen,
      href: "/docs",
      color: "from-cyan-500 to-sky-500",
    },
    {
      title: "Community",
      desc: "Share progress & find collaborators",
      icon: Users,
      href: "/community",
      color: "from-indigo-500 to-purple-500",
    },
    {
      title: "Support",
      desc: "We’re here to help",
      icon: LifeBuoy,
      href: "/support",
      color: "from-amber-500 to-orange-500",
    },
  ];

  const navigate = useNavigate();
  const { user, profileComplete, loading } = useAuth();

  useEffect(() => {
    if (loading) return;
    if (user && profileComplete) navigate("/dashboard", { replace: true });
    if (user && !profileComplete) navigate("/onboarding", { replace: true });
  }, [user, profileComplete, loading, navigate]);

  return (
    <Layout>
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-aethex-900/40 via-background to-neon-blue/10" />
        <div className="container mx-auto px-4 relative z-10 py-14 sm:py-20">
          <div className="max-w-5xl mx-auto text-center space-y-6">
            <h1 className="text-4xl lg:text-5xl font-extrabold tracking-tight">
              <span className="text-gradient">Get Started</span>
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Create your account, personalize your experience, and ship faster
              with AeThex.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button
                asChild
                className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
              >
                <Link to="/onboarding" className="flex items-center gap-2">
                  <CheckCircle className="h-5 w-5" /> Join AeThex
                </Link>
              </Button>
              <Button
                asChild
                variant="outline"
                className="border-aethex-400/50 hover:border-aethex-400"
              >
                <Link to="/dashboard">Explore Dashboard</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Guided Steps */}
      <section className="py-12 sm:py-16">
        <div className="container mx-auto px-4 max-w-6xl">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {steps.map((step, idx) => {
              const Icon = step.icon;
              return (
                <Card
                  key={idx}
                  className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
                >
                  <div
                    className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${step.color} opacity-0 group-hover:opacity-10 transition-opacity`}
                  />
                  <CardHeader className="space-y-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg font-semibold">
                        {step.title}
                      </CardTitle>
                      <div
                        className={`w-10 h-10 rounded-md bg-gradient-to-r ${step.color} grid place-items-center`}
                      >
                        <Icon className="h-5 w-5 text-white" />
                      </div>
                    </div>
                    <CardDescription>{step.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      {step.points.map((p) => (
                        <li key={p} className="flex items-center gap-2">
                          <span className="h-1.5 w-1.5 rounded-full bg-aethex-400/70" />{" "}
                          {p}
                        </li>
                      ))}
                    </ul>
                    <Button
                      asChild
                      className={`w-full bg-gradient-to-r ${step.color}`}
                    >
                      <Link
                        to={step.cta.href}
                        className="flex items-center justify-center gap-2"
                      >
                        {step.cta.label}
                        <ArrowRight className="h-4 w-4" />
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Quick Links */}
      <section className="py-8 sm:py-12">
        <div className="container mx-auto px-4 max-w-6xl">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-gradient-purple">
              Helpful Resources
            </h2>
            <p className="text-sm text-muted-foreground">
              Jump into docs, community, or support
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {quickLinks.map((q) => {
              const Icon = q.icon;
              return (
                <Card
                  key={q.title}
                  className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
                >
                  <div
                    className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${q.color} opacity-0 group-hover:opacity-10 transition-opacity`}
                  />
                  <CardContent className="p-6 space-y-3">
                    <div className="flex items-center gap-3">
                      <div
                        className={`w-10 h-10 rounded-md bg-gradient-to-r ${q.color} grid place-items-center`}
                      >
                        <Icon className="h-5 w-5 text-white" />
                      </div>
                      <div>
                        <h3 className="font-semibold">{q.title}</h3>
                        <p className="text-sm text-muted-foreground">
                          {q.desc}
                        </p>
                      </div>
                    </div>
                    <Button
                      asChild
                      variant="outline"
                      className="w-full border-border/60 hover:border-aethex-400/60"
                    >
                      <Link
                        to={q.href}
                        className="flex items-center justify-center gap-2"
                      >
                        Open
                        <ArrowRight className="h-4 w-4" />
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Footer CTA */}
      <section className="py-10 sm:py-14">
        <div className="container mx-auto px-4 max-w-4xl text-center space-y-5">
          <Badge
            variant="outline"
            className="border-aethex-400/40 text-aethex-300"
          >
            Next up
          </Badge>
          <h3 className="text-2xl font-bold">
            Create your account and start building
          </h3>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Button
              asChild
              className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue"
            >
              <Link to="/onboarding">Join AeThex</Link>
            </Button>
            <Button
              asChild
              variant="outline"
              className="border-aethex-400/50 hover:border-aethex-400"
            >
              <Link to="/dashboard">Explore Dashboard</Link>
            </Button>
          </div>
        </div>
      </section>
    </Layout>
  );
}