import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link } from "wouter";
import { 
  Lightbulb, 
  Settings, 
  TrendingUp, 
  Award, 
  List, 
  Brain, 
  Gavel, 
  Home, 
  Calculator,
  Users,
  Hash,
  Building,
  DollarSign,
  Star,
  Target,
  BookOpen
} from "lucide-react";

export default function AuctionGuide() {

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/">
              <img 
                src="/attached_assets/logo_black_1759181850935.png" 
                alt="SAPIENS" 
                className="h-5 w-auto cursor-pointer"
                data-testid="logo-sapiens"
              />
            </Link>
            
            <div className="flex items-center space-x-3">
              <nav className="hidden md:flex space-x-4">
                <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors text-sm" data-testid="link-home">Home</Link>
                <Link href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors text-sm" data-testid="link-auctions">Auctions</Link>
                <Link href="/auction-guide" className="text-foreground font-medium text-sm" data-testid="link-auction-guide">Auction Guide</Link>
              </nav>
              
              <a href="/api/login">
                <Button size="sm" data-testid="button-login">Login</Button>
              </a>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 py-3">
        {/* Header Section */}
        <div className="mb-3">
          <h1 className="text-2xl font-bold mb-1" data-testid="text-guide-title">Media Outlet Auction System Guide</h1>
          <p className="text-sm text-gray-600">
            Innovative media management rights auction platform based on advertising bidding methods
          </p>
        </div>

        {/* Overview Card */}
        <Card className="mb-3" data-testid="section-overview">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Lightbulb className="h-4 w-4 text-primary" />
              <span>Auction System Overview</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <h3 className="font-semibold mb-1 text-sm">🎯 Core Principles</h3>
                <ul className="space-y-0.5 text-xs">
                  <li>• <strong>Vickrey Auction Method</strong>: Nobel Prize-winning theory applied</li>
                  <li>• <strong>Hybrid Scoring</strong>: Bid amount × quality score combination</li>
                  <li>• <strong>Fair Pricing</strong>: Second-price bid-based charging</li>
                  <li>• <strong>Quality-Centered Evaluation</strong>: Prevents simple price competition</li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold mb-1 text-sm">📊 Auction Targets</h3>
                <ul className="space-y-0.5 text-xs">
                  <li>• <strong>People (24)</strong>: Management rights for key figures' media outlets</li>
                  <li>• <strong>Topics (20)</strong>: Core topic content management rights</li>
                  <li>• <strong>Companies (27)</strong>: Corporate media management rights</li>
                  <li>• <strong>Exclusive Editorial Rights</strong>: Content priority decision rights</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Core Mechanism */}
        <Card className="mb-3" data-testid="section-mechanism">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Settings className="h-4 w-4 text-chart-1" />
              <span>1. Basic Auction Mechanism</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="space-y-2">
              <div className="bg-blue-50 rounded p-3">
                <h3 className="font-semibold mb-2 flex items-center text-sm">
                  <Award className="h-4 w-4 text-primary mr-2" />
                  Vickrey Auction Method
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                  <div className="text-center">
                    <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">1</div>
                    <h4 className="font-medium mb-0.5 text-xs">Highest Bidder Wins</h4>
                    <p className="text-xs text-gray-600">Bidder with highest total score wins</p>
                  </div>
                  <div className="text-center">
                    <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">2</div>
                    <h4 className="font-medium mb-0.5 text-xs">Pay Second Price</h4>
                    <p className="text-xs text-gray-600">Actually only pay second-place bid</p>
                  </div>
                  <div className="text-center">
                    <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">3</div>
                    <h4 className="font-medium mb-0.5 text-xs">Fair Price Formation</h4>
                    <p className="text-xs text-gray-600">Prevents excessive bidding and increases efficiency</p>
                  </div>
                </div>
              </div>

              <div className="bg-gray-100 rounded p-3">
                <h4 className="font-semibold mb-1 text-xs">📝 Real Example</h4>
                <div className="space-y-1 text-xs">
                  <p><strong>Bidder A:</strong> $1,000 × 85pts = 85,000pts (1st place winner)</p>
                  <p><strong>Bidder B:</strong> $800 × 90pts = 72,000pts (2nd place)</p>
                  <p><strong>Bidder C:</strong> $1,200 × 60pts = 72,000pts (3rd place)</p>
                  <p className="pt-1 font-medium text-primary">
                    → A wins but actually pays around B's bid of $800
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Ranking System */}
        <Card className="mb-3" data-testid="section-ranking">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <TrendingUp className="h-4 w-4 text-chart-2" />
              <span>2. Ranking System</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="space-y-2">
              <div className="text-center bg-gradient-to-r from-blue-50 to-green-50 rounded p-3">
                <h3 className="text-sm font-bold mb-1">Final Ranking Formula</h3>
                <div className="text-lg font-bold text-blue-600 mb-0.5">
                  Ranking Score = Bid Amount × (Quality Score ÷ 100)
                </div>
                <p className="text-xs text-gray-600">Same weighting system as advertising auctions</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <h4 className="font-semibold mb-1 flex items-center text-sm">
                    <DollarSign className="h-3 w-3 text-blue-600 mr-1" />
                    Bid Amount
                  </h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• Minimum bid: $100</li>
                    <li>• Maximum bid: $100,000</li>
                    <li>• Must be higher than current top bid</li>
                    <li>• Management period: Default 30 days</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-1 flex items-center text-sm">
                    <Star className="h-3 w-3 text-green-600 mr-1" />
                    Quality Score
                  </h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• Score range: 1-100 points</li>
                    <li>• Content quality evaluation</li>
                    <li>• User engagement analysis</li>
                    <li>• Editorial standards compliance</li>
                  </ul>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Quality Score System */}
        <Card className="mb-3" data-testid="section-quality">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Award className="h-4 w-4 text-chart-3" />
              <span>3. Quality Score System</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="space-y-2">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                <Card className="border-red-200">
                  <CardContent className="p-2 text-center">
                    <Badge variant="destructive" className="mb-1 text-xs">1-40 pts</Badge>
                    <h4 className="font-semibold mb-1 text-sm">Low Quality</h4>
                    <ul className="text-xs space-y-0.5">
                      <li>• Below basic editorial standards</li>
                      <li>• Low user engagement</li>
                      <li>• Lack of content consistency</li>
                    </ul>
                  </CardContent>
                </Card>
                <Card className="border-gray-200">
                  <CardContent className="p-2 text-center">
                    <Badge variant="secondary" className="mb-1 text-xs">41-70 pts</Badge>
                    <h4 className="font-semibold mb-1 text-sm">Average Quality</h4>
                    <ul className="text-xs space-y-0.5">
                      <li>• Meets standard editorial criteria</li>
                      <li>• Stable content quality</li>
                      <li>• Appropriate user response</li>
                    </ul>
                  </CardContent>
                </Card>
                <Card className="border-green-200">
                  <CardContent className="p-2 text-center">
                    <Badge variant="default" className="mb-1 text-xs">71-100 pts</Badge>
                    <h4 className="font-semibold mb-1 text-sm">High Quality</h4>
                    <ul className="text-xs space-y-0.5">
                      <li>• Excellent editorial standards</li>
                      <li>• High user engagement</li>
                      <li>• Innovative content</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>

              <div className="bg-green-50 rounded p-3">
                <h4 className="font-semibold mb-1 flex items-center text-sm">
                  <Calculator className="h-3 w-3 text-green-600 mr-1" />
                  Quality Score Benefits
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">📈 Ranking Improvement</h5>
                    <p className="text-xs text-gray-600">Higher quality scores prioritized among same bids</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">💰 Cost Savings</h5>
                    <p className="text-xs text-gray-600">Achieve high rankings with lower bids</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">🎯 Increased Effectiveness</h5>
                    <p className="text-xs text-gray-600">More exposure and user engagement opportunities</p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Auction Types */}
        <Card className="mb-3" data-testid="section-types">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <List className="h-4 w-4 text-chart-4" />
              <span>4. Auction Types</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <Card className="border-blue-200">
                <CardContent className="p-2">
                  <h4 className="font-semibold mb-1 flex items-center text-sm">
                    <Users className="h-3 w-3 text-blue-600 mr-1" />
                    People
                  </h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• <strong>24 key figures</strong></li>
                    <li>• Personal branding management</li>
                    <li>• Statements and activity content</li>
                    <li>• Profile information editing rights</li>
                    <li>• Minimum bid: $500</li>
                  </ul>
                </CardContent>
              </Card>
              <Card className="border-green-200">
                <CardContent className="p-2">
                  <h4 className="font-semibold mb-1 flex items-center text-sm">
                    <Hash className="h-3 w-3 text-green-600 mr-1" />
                    Topics
                  </h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• <strong>20 core topics</strong></li>
                    <li>• Trend analysis management</li>
                    <li>• Topic-specific content curation</li>
                    <li>• Prediction market integration</li>
                    <li>• Minimum bid: $300</li>
                  </ul>
                </CardContent>
              </Card>
              <Card className="border-purple-200">
                <CardContent className="p-2">
                  <h4 className="font-semibold mb-1 flex items-center text-sm">
                    <Building className="h-3 w-3 text-purple-600 mr-1" />
                    Companies
                  </h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• <strong>27 major companies</strong></li>
                    <li>• Corporate news management</li>
                    <li>• Financial information updates</li>
                    <li>• Corporate reputation management</li>
                    <li>• Minimum bid: $1,000</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </CardContent>
        </Card>

        {/* Strategic Bidding */}
        <Card className="mb-3" data-testid="section-strategy">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Target className="h-4 w-4 text-chart-5" />
              <span>5. Strategic Bidding Guide</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="space-y-2">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <h4 className="font-semibold mb-1 text-blue-600 text-sm">💡 Effective Bidding Strategies</h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• <strong>Improve Quality Score First</strong>: Higher ROI than bid amount</li>
                    <li>• <strong>Analyze Competition</strong>: Study similar category auctions</li>
                    <li>• <strong>Gradual Bidding</strong>: Step-by-step increases over large amounts</li>
                    <li>• <strong>Consider Timing</strong>: Competition intensifies near deadlines</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-1 text-red-600 text-sm">⚠️ Mistakes to Avoid</h4>
                  <ul className="space-y-0.5 text-xs">
                    <li>• <strong>Ignoring Quality Score</strong>: Cannot win with bid amount alone</li>
                    <li>• <strong>Excessive Competition</strong>: Losses from emotional bidding</li>
                    <li>• <strong>Short-term Thinking</strong>: Not considering profitability vs management period</li>
                    <li>• <strong>Last-minute Bidding</strong>: Insufficient review time</li>
                  </ul>
                </div>
              </div>

              <div className="bg-blue-50 rounded p-3">
                <h4 className="font-semibold mb-1 flex items-center text-sm">
                  <Lightbulb className="h-3 w-3 text-blue-600 mr-1" />
                  Successful Auction Participation Tips
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Phase 1: Preparation</h5>
                    <ul className="space-y-0.5 text-xs text-gray-600">
                      <li>• Select target media outlets</li>
                      <li>• Establish budget plan</li>
                      <li>• Self-assess quality score</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Phase 2: Analysis</h5>
                    <ul className="space-y-0.5 text-xs text-gray-600">
                      <li>• Analyze past auction results</li>
                      <li>• Competitor bidding patterns</li>
                      <li>• Market value assessment</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Phase 3: Execution</h5>
                    <ul className="space-y-0.5 text-xs text-gray-600">
                      <li>• Execute planned bids</li>
                      <li>• Real-time monitoring</li>
                      <li>• Timely adjustments and responses</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Technical Implementation */}
        <Card className="mb-3" data-testid="section-technical">
          <CardHeader className="pb-1 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Brain className="h-4 w-4 text-primary" />
              <span>6. Technical Implementation</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="space-y-2">
              <div className="bg-blue-50 rounded p-3">
                <h4 className="font-semibold mb-1 text-sm">🔧 System Architecture</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Real-time Bid Processing</h5>
                    <ul className="space-y-0.5 text-xs text-gray-600">
                      <li>• PostgreSQL-based transaction management</li>
                      <li>• Concurrency control and integrity assurance</li>
                      <li>• Real-time ranking updates</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Security and Verification</h5>
                    <ul className="space-y-0.5 text-xs text-gray-600">
                      <li>• User authentication and authorization</li>
                      <li>• Bid data encryption</li>
                      <li>• Fraud prevention system</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div className="bg-green-50 rounded p-3">
                <h4 className="font-semibold mb-1 text-sm">📊 Data Analysis</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Bidding Pattern Analysis</h5>
                    <p className="text-xs text-gray-600">Track user-specific bid history and success rates</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Market Price Prediction</h5>
                    <p className="text-xs text-gray-600">ML-based optimal bid suggestions</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-0.5 text-xs">Performance Measurement</h5>
                    <p className="text-xs text-gray-600">ROI analysis after acquiring management rights</p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Call to Action */}
        <Card className="bg-gradient-to-r from-blue-50 to-green-50">
          <CardContent className="p-4 text-center">
            <h3 className="text-lg font-bold mb-1">Join the Auction Now!</h3>
            <p className="text-gray-600 mb-3 text-sm">
              Start your innovative media management experience and acquire the best media outlet rights
            </p>
            <div className="flex justify-center gap-2">
              <Link href="/auctions">
                <Button data-testid="button-view-auctions">
                  <Gavel className="mr-2 h-4 w-4" />
                  View Active Auctions
                </Button>
              </Link>
              <Link href="/">
                <Button variant="outline" data-testid="button-back-home">
                  <Home className="mr-2 h-4 w-4" />
                  Back to Home
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}
