"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { doesSessionExist } from "supertokens-web-js/recipe/session";

export default function HomePage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // Check if user is already logged in
    doesSessionExist().then((exists) => {
      setIsLoggedIn(exists);
      setIsLoading(false);
      
      // If logged in, redirect to projects
      if (exists) {
        router.push("/marks-account/projects");
      }
    }).catch(() => {
      setIsLoading(false);
    });
  }, [router]);

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="text-center">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto mb-4" />
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <div className="w-full max-w-2xl space-y-6">
        {/* Logo */}
        <div className="flex justify-center">
          <img 
            src="/vibn-black-circle-logo.png" 
            alt="Vib'n" 
            className="h-24 w-24"
          />
        </div>

        {/* Welcome Card */}
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold text-center">
              Welcome to Vib'n
            </CardTitle>
            <CardDescription className="text-center text-lg">
              Your AI-powered development platform
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="text-center space-y-4">
              <p className="text-muted-foreground">
                Track, manage, and deploy your AI-coded projects with ease.
              </p>
              
              <div className="grid gap-4 md:grid-cols-3">
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">🚀</div>
                    <h3 className="font-semibold mb-1">Fast Deployment</h3>
                    <p className="text-xs text-muted-foreground">
                      Deploy to Coolify with one click
                    </p>
                  </CardContent>
                </Card>
                
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">🤖</div>
                    <h3 className="font-semibold mb-1">AI-Powered</h3>
                    <p className="text-xs text-muted-foreground">
                      Track AI coding sessions
                    </p>
                  </CardContent>
                </Card>

                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">📊</div>
                    <h3 className="font-semibold mb-1">Analytics</h3>
                    <p className="text-xs text-muted-foreground">
                      Monitor project progress
                    </p>
                  </CardContent>
                </Card>
              </div>

              <div className="pt-6 flex gap-4 justify-center">
                <Button size="lg" asChild>
                  <Link href="/auth">
                    Get Started
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <a href={process.env.NEXT_PUBLIC_PROXY_URL || "#"} target="_blank" rel="noopener noreferrer">
                    API Docs
                  </a>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Features */}
        <div className="text-center text-sm text-muted-foreground">
          <p>✅ Self-hosted • ✅ Open source • ✅ Powered by Coolify</p>
        </div>
      </div>
    </div>
  );
}