import { useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { queryClient } from "@/lib/queryClient";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";
import { isUnauthorizedError } from "@/lib/authUtils";
import AuctionCard from "@/components/AuctionCard";
import type { Auction, MediaOutlet } from "@shared/schema";
import { BookOpen } from "lucide-react";
import { Link } from "wouter";

export default function Auctions() {
  const { user, isAuthenticated } = useAuth();
  const { toast } = useToast();
  const [showBidModal, setShowBidModal] = useState(false);
  const [selectedAuction, setSelectedAuction] = useState<Auction | null>(null);
  const [bidForm, setBidForm] = useState({
    amount: "",
    qualityScore: ""
  });

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

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

  const bidMutation = useMutation({
    mutationFn: async (data: { auctionId: string; amount: string; qualityScore: number }) => {
      await apiRequest("POST", `/api/auctions/${data.auctionId}/bid`, {
        amount: data.amount,
        qualityScore: data.qualityScore
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/auctions"] });
      toast({
        title: "Success",
        description: "Your bid has been placed successfully.",
      });
      setShowBidModal(false);
      setBidForm({ amount: "", qualityScore: "" });
    },
    onError: (error: Error) => {
      if (isUnauthorizedError(error)) {
        toast({
          title: "Unauthorized",
          description: "You are logged out. Logging in again...",
          variant: "destructive",
        });
        setTimeout(() => {
          window.location.href = "/api/login";
        }, 500);
        return;
      }
      toast({
        title: "Error",
        description: "Failed to place bid. Please try again.",
        variant: "destructive"
      });
    }
  });

  const handleBidClick = (auction: Auction) => {
    if (!isAuthenticated) {
      toast({
        title: "Login Required",
        description: "Please log in to place a bid.",
        variant: "destructive"
      });
      setTimeout(() => {
        window.location.href = "/api/login";
      }, 1000);
      return;
    }
    setSelectedAuction(auction);
    setShowBidModal(true);
  };

  const handleBidSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedAuction) return;

    const amount = parseFloat(bidForm.amount);
    const qualityScore = parseInt(bidForm.qualityScore);
    const currentBid = parseFloat(selectedAuction.currentBid || "0");

    if (amount <= currentBid) {
      toast({
        title: "Invalid Bid",
        description: `Bid must be higher than current bid of $${currentBid}`,
        variant: "destructive"
      });
      return;
    }

    if (qualityScore < 1 || qualityScore > 100) {
      toast({
        title: "Invalid Quality Score",
        description: "Quality score must be between 1 and 100",
        variant: "destructive"
      });
      return;
    }

    bidMutation.mutate({
      auctionId: selectedAuction.id,
      amount: bidForm.amount,
      qualityScore
    });
  };

  const getMediaOutletName = (mediaOutletId: string) => {
    const outlet = mediaOutlets.find(o => o.id === mediaOutletId);
    return outlet?.name || "Unknown Outlet";
  };

  const formatPrice = (price: string) => {
    const num = parseFloat(price);
    return `$${num.toLocaleString()}`;
  };

  const getTimeRemaining = (endDate: string | Date) => {
    const end = new Date(endDate);
    const now = new Date();
    const diff = end.getTime() - now.getTime();
    
    if (diff <= 0) return "Ended";
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    
    if (days > 0) return `${days}d ${hours}h`;
    if (hours > 0) return `${hours}h ${minutes}m`;
    return `${minutes}m`;
  };

  const getStatusBadge = (auction: Auction) => {
    const timeRemaining = getTimeRemaining(auction.endDate);
    if (timeRemaining === "Ended") return { text: "Ended", variant: "secondary" as const };
    
    const end = new Date(auction.endDate);
    const now = new Date();
    const hoursLeft = (end.getTime() - now.getTime()) / (1000 * 60 * 60);
    
    if (hoursLeft <= 3) return { text: "Ending Soon", variant: "destructive" as const };
    return { text: "Active", variant: "default" as const };
  };

  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">
                <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors">Home</Link>
                <Link href="/auctions" className="text-foreground hover:text-primary transition-colors">Auctions</Link>
                <Link href="/auction-guide" className="text-muted-foreground hover:text-foreground transition-colors">Auction Guide</Link>
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
                {(user?.role === 'admin' || user?.role === 'superadmin') && (
                  <Link href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
                    Dashboard
                  </Link>
                )}
              </nav>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Input 
                  type="text" 
                  placeholder="Search auctions..." 
                  className="w-64"
                  data-testid="input-search"
                />
                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
              </div>
              
              {isAuthenticated ? (
                <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={() => window.location.href = "/api/logout"}
                  >
                    Logout
                  </Button>
                </div>
              ) : (
                <Button onClick={() => window.location.href = "/api/login"}>
                  Login
                </Button>
              )}
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* Page Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <h1 className="text-3xl font-bold">Media Outlet Auctions</h1>
            <Link href="/auction-guide">
              <Button variant="outline" data-testid="button-auction-guide">
                <BookOpen className="mr-2 h-4 w-4" />
                Complete Auction Guide
              </Button>
            </Link>
          </div>
          <p className="text-lg text-muted-foreground mb-6">
            Bid for exclusive editorial rights and content management privileges. 
            Based on competitive bidding similar to advertising platforms, combining bid amount with quality scores.
          </p>
          
          {/* Auction Explanation */}
          <Card className="mb-6">
            <CardContent className="p-6">
              <h3 className="text-lg font-semibold mb-3">How Auctions Work</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div>
                  <h4 className="font-medium text-primary mb-2">Bid Amount</h4>
                  <p className="text-muted-foreground">Your maximum willingness to pay for editorial control, similar to keyword bidding in advertising.</p>
                </div>
                <div>
                  <h4 className="font-medium text-chart-2 mb-2">Quality Score</h4>
                  <p className="text-muted-foreground">Platform assessment of your content quality, engagement history, and editorial standards.</p>
                </div>
                <div>
                  <h4 className="font-medium text-chart-1 mb-2">Final Ranking</h4>
                  <p className="text-muted-foreground">Combination of bid amount and quality score determines winning position and actual cost.</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Auctions Grid */}
        {auctionsLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <Card key={i}>
                <CardContent className="p-6 animate-pulse">
                  <div className="h-20 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>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : auctions.length === 0 ? (
          <Card>
            <CardContent className="p-12 text-center">
              <i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
              <h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
              <p className="text-muted-foreground">
                There are currently no active media outlet auctions. Check back later for new opportunities!
              </p>
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {auctions.map((auction) => {
              const status = getStatusBadge(auction);
              return (
                <Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
                  <CardContent className="p-6">
                    <div className="flex items-start justify-between mb-4">
                      <div>
                        <h3 className="font-semibold text-lg line-clamp-1">{auction.title}</h3>
                        <p className="text-sm text-muted-foreground mb-1">
                          {getMediaOutletName(auction.mediaOutletId)}
                        </p>
                        <p className="text-sm text-muted-foreground line-clamp-2">{auction.description}</p>
                      </div>
                      <Badge variant={status.variant}>{status.text}</Badge>
                    </div>
                    
                    <div className="space-y-3 mb-4">
                      <div className="flex justify-between">
                        <span className="text-sm text-muted-foreground">Current Bid:</span>
                        <span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-muted-foreground">Quality Score:</span>
                        <span className="font-semibold text-chart-2">{auction.qualityScore || 0}/100</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-muted-foreground">Duration:</span>
                        <span className="font-semibold">{auction.duration || 30} days</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-muted-foreground">Time Remaining:</span>
                        <span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
                          {getTimeRemaining(auction.endDate)}
                        </span>
                      </div>
                    </div>
                    
                    <Button 
                      className="w-full" 
                      onClick={() => handleBidClick(auction)}
                      disabled={getTimeRemaining(auction.endDate) === "Ended"}
                      data-testid={`button-bid-${auction.id}`}
                    >
                      {getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
                    </Button>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </main>

      {/* Bid Modal */}
      <Dialog open={showBidModal} onOpenChange={setShowBidModal}>
        <DialogContent data-testid="modal-bid">
          <DialogHeader>
            <DialogTitle>Place Bid</DialogTitle>
          </DialogHeader>
          
          {selectedAuction && (
            <div className="space-y-4">
              <div className="bg-muted rounded-lg p-4">
                <h4 className="font-semibold mb-2">{selectedAuction.title}</h4>
                <p className="text-sm text-muted-foreground mb-3">{selectedAuction.description}</p>
                <div className="flex justify-between text-sm">
                  <span>Current Bid:</span>
                  <span className="font-semibold">{formatPrice(selectedAuction.currentBid || "0")}</span>
                </div>
              </div>
              
              <form onSubmit={handleBidSubmit} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Bid Amount ($)</label>
                  <Input
                    type="number"
                    step="0.01"
                    min={parseFloat(selectedAuction.currentBid || "0") + 1}
                    value={bidForm.amount}
                    onChange={(e) => setBidForm(prev => ({ ...prev, amount: e.target.value }))}
                    placeholder={`Minimum: $${(parseFloat(selectedAuction.currentBid || "0") + 1).toFixed(2)}`}
                    required
                    data-testid="input-bid-amount"
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    Must be higher than current bid
                  </p>
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-2">Quality Score (1-100)</label>
                  <Input
                    type="number"
                    min="1"
                    max="100"
                    value={bidForm.qualityScore}
                    onChange={(e) => setBidForm(prev => ({ ...prev, qualityScore: e.target.value }))}
                    placeholder="Your self-assessed quality score"
                    required
                    data-testid="input-quality-score"
                  />
                  <p className="text-xs text-muted-foreground mt-1">
                    Based on your content quality, engagement, and editorial standards
                  </p>
                </div>
                
                <div className="bg-accent/50 rounded-lg p-3 text-sm">
                  <h5 className="font-medium mb-1">Bidding Formula</h5>
                  <p className="text-muted-foreground">
                    Your ranking = (Bid Amount × Quality Score) / 100. Higher scores win at lower costs.
                  </p>
                </div>
                
                <div className="flex space-x-2">
                  <Button 
                    type="submit" 
                    disabled={bidMutation.isPending}
                    data-testid="button-submit-bid"
                  >
                    {bidMutation.isPending ? "Placing Bid..." : "Place Bid"}
                  </Button>
                  <Button 
                    type="button" 
                    variant="outline" 
                    onClick={() => setShowBidModal(false)}
                    data-testid="button-cancel-bid"
                  >
                    Cancel
                  </Button>
                </div>
              </form>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}
