"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function HomePage() {
  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">
                Vib'n is now running on Coolify! 🎉
              </p>
              
              <div className="grid gap-4 md:grid-cols-2">
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <h3 className="font-semibold mb-2">✅ API Status</h3>
                    <p className="text-sm text-muted-foreground">
                      Connected and operational
                    </p>
                  </CardContent>
                </Card>
                
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <h3 className="font-semibold mb-2">✅ Database</h3>
                    <p className="text-sm text-muted-foreground">
                      PostgreSQL running
                    </p>
                  </CardContent>
                </Card>
              </div>

              <div className="pt-4">
                <p className="text-sm text-muted-foreground mb-4">
                  <strong>Note:</strong> Authentication is being migrated from Firebase to PostgreSQL.
                  <br />
                  This page will be updated with login functionality soon.
                </p>
              </div>

              <div className="flex gap-4 justify-center">
                <Button asChild>
                  <Link href="/marks-account/projects">
                    View Projects (Demo)
                  </Link>
                </Button>
                <Button variant="outline" asChild>
                  <a href={process.env.NEXT_PUBLIC_PROXY_URL || "#"} target="_blank" rel="noopener noreferrer">
                    API Docs
                  </a>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* System Status */}
        <Card className="bg-muted/20">
          <CardHeader>
            <CardTitle className="text-sm">System Information</CardTitle>
          </CardHeader>
          <CardContent className="text-xs space-y-1 font-mono text-muted-foreground">
            <div>Frontend: {process.env.NEXT_PUBLIC_APP_URL || 'localhost'}</div>
            <div>API: {process.env.NEXT_PUBLIC_PROXY_URL || 'Not configured'}</div>
            <div>Environment: {process.env.NODE_ENV}</div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}