import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAuth } from "@/hooks/useAuth";
import CategoryTabs from "@/components/CategoryTabs";
import MediaOutletCard from "@/components/MediaOutletCard";
import AuctionCard from "@/components/AuctionCard";
import type { MediaOutlet, Auction } from "@shared/schema";

export default function Home() {
  const { user } = useAuth();
  const [selectedCategory, setSelectedCategory] = useState("people");

  const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
    queryKey: ["/api/media-outlets", selectedCategory],
  });

  const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
    queryKey: ["/api/auctions"],
  });

  const handleLogout = () => {
    window.location.href = "/api/logout";
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-card border-b border-border sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-8">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
                  S
                </div>
                <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
              </div>
              
              <nav className="hidden md:flex space-x-6">
                <a href="/" className="text-foreground hover:text-primary transition-colors">Home</a>
                <a href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors">Auctions</a>
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
                {(user?.role === 'admin' || user?.role === 'superadmin') && (
                  <a href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
                    Dashboard
                  </a>
                )}
              </nav>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Input 
                  type="text" 
                  placeholder="Search media outlets, topics..." 
                  className="w-64"
                  data-testid="input-search"
                />
                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
              </div>
              
              <div className="flex items-center space-x-2">
                <span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={handleLogout}
                  data-testid="button-logout"
                >
                  Logout
                </Button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* Hero Section */}
        <div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
          <div className="max-w-3xl">
            <h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
            <p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
            <div className="flex space-x-4">
              <Button className="bg-white text-primary hover:bg-opacity-90" data-testid="button-explore">
                Explore Media Outlets
              </Button>
              <Button 
                variant="outline" 
                className="border-white text-white hover:bg-white hover:text-primary"
                data-testid="button-auctions"
              >
                <a href="/auctions">View Active Auctions</a>
              </Button>
            </div>
          </div>
        </div>

        {/* Category Tabs */}
        <CategoryTabs 
          selectedCategory={selectedCategory}
          onCategoryChange={setSelectedCategory}
        />

        {/* Media Outlets Grid */}
        <div className="mb-12">
          {outletsLoading ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {Array.from({ length: 8 }).map((_, i) => (
                <div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
                  <div className="h-12 bg-muted rounded mb-4"></div>
                  <div className="h-4 bg-muted rounded mb-2"></div>
                  <div className="h-4 bg-muted rounded w-2/3"></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {mediaOutlets.map((outlet) => (
                <MediaOutletCard key={outlet.id} outlet={outlet} />
              ))}
            </div>
          )}
        </div>

        {/* Current Auctions Section */}
        <div className="mt-12">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
            <Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
              <a href="/auctions">View All Auctions</a>
            </Button>
          </div>
          
          {auctionsLoading ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {Array.from({ length: 2 }).map((_, i) => (
                <div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
                  <div className="h-6 bg-muted rounded mb-4"></div>
                  <div className="space-y-3">
                    <div className="h-4 bg-muted rounded"></div>
                    <div className="h-4 bg-muted rounded"></div>
                    <div className="h-4 bg-muted rounded"></div>
                  </div>
                  <div className="h-10 bg-muted rounded mt-4"></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {auctions.slice(0, 2).map((auction) => (
                <AuctionCard key={auction.id} auction={auction} />
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}