"use client";

import { useAuth } from "@/hooks/use-auth";
import { useEffect, useState } from "react";
import MoneyMindDashboard from "@/components/moneymind-dashboard";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { SetupChecklist } from "@/components/setup-checklist";
import {
  TrendingUp,
  TrendingDown,
  DollarSign,
  PiggyBank,
  Target,
  CreditCard,
  Plus,
  Eye,
  ArrowUpRight,
  ArrowDownRight,
} from "lucide-react";

export default function Home() {
  const { user, isAuthenticated, isLoading: authLoading, login } = useAuth();
  // Bypass diagnostics check to always show dashboard when authenticated
  const isAuthReady = true;
  const loading = false;
  const [showSetup, setShowSetup] = useState(false);

  useEffect(() => {
    if (user && isAuthReady) {
      setShowSetup(false);
    }
  }, [user, isAuthReady]);

  if (authLoading || loading) {
    return (
      <div className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[...Array(4)].map((_, i) => (
              <Card key={i}>
                <CardHeader className="pb-2">
                  <div className="h-4 bg-gray-200 rounded animate-pulse" />
                </CardHeader>
                <CardContent>
                  <div className="h-8 bg-gray-200 rounded animate-pulse" />
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    // Show landing page for non-authenticated users
    return (
      <main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <div className="space-y-4">
            <div className="flex items-center justify-center gap-3 mb-2">
              <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10">
                <PiggyBank className="h-7 w-7 text-primary" />
              </div>
              <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent">
                MoneyMind
              </h1>
            </div>
            <h2 className="text-2xl font-semibold text-muted-foreground">
              Personal Finance Management Made Simple
            </h2>
            <p className="text-xl text-muted-foreground">
              Transform your financial data into actionable insights with AI-powered analytics
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4" />
                  Smart Tracking
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Automatically categorize transactions and track spending patterns
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="h-4 w-4" />
                  Advanced Analytics
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Visual dashboards with trends, forecasts, and financial insights
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Target className="h-4 w-4" />
                  Goal Planning
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Set and track financial goals with progress monitoring
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CreditCard className="h-4 w-4" />
                  Budget Management
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Create budgets and receive alerts for spending thresholds
                </p>
              </CardContent>
            </Card>
          </div>

          <div className="space-y-6 mt-12">
            {isAuthReady ? (
              <Button size="lg" onClick={login}>
                Get Started
              </Button>
            ) : (
              <SetupChecklist />
            )}
          </div>
        </div>
      </main>
    );
  }

  if (showSetup) {
    // Show setup page for users who need to configure their accounts
    return (
      <main className="flex-1 container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <div className="space-y-4">
            <h1 className="text-4xl font-bold tracking-tight">Welcome to MoneyMind</h1>
            <p className="text-xl text-muted-foreground">
              Let&apos;s get you set up to start tracking your finances
            </p>
          </div>

          <SetupChecklist />
        </div>
      </main>
    );
  }

  // Show the full MoneyMind dashboard for authenticated users with data
  return <MoneyMindDashboard />;
}