sapiens-web2/client/src/pages/AuctionGuide.tsx

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-background">
      {/* Header */}
      <header className="bg-card border-b border-border sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 py-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold">
                S
              </div>
              <span className="text-xl font-bold tracking-tight">SAPIENS</span>
            </div>
            
            <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-4">
        {/* Header Section */}
        <div className="mb-4">
          <h1 className="text-3xl font-bold mb-2" data-testid="text-guide-title">SAPIENS Media Outlet Auction System Complete Guide</h1>
          <p className="text-lg text-muted-foreground">
            Innovative media management rights auction platform based on advertising bidding methods
          </p>
        </div>

        {/* Overview Card */}
        <Card className="mb-4" data-testid="section-overview">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <Lightbulb className="h-4 w-4 text-primary" />
              <span>Auction System Overview</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 className="font-semibold mb-2">🎯 Core Principles</h3>
                <ul className="space-y-1 text-sm">
                  <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-2">📊 Auction Targets</h3>
                <ul className="space-y-1 text-sm">
                  <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-4" data-testid="section-mechanism">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <Settings className="h-4 w-4 text-chart-1" />
              <span>1. Basic Auction Mechanism</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-4">
              <div className="bg-primary/5 rounded-lg p-4">
                <h3 className="font-semibold mb-3 flex items-center">
                  <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-3">
                  <div className="text-center">
                    <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold mx-auto mb-2">1</div>
                    <h4 className="font-medium mb-1 text-sm">Highest Bidder Wins</h4>
                    <p className="text-xs text-muted-foreground">Bidder with highest total score wins</p>
                  </div>
                  <div className="text-center">
                    <div className="w-10 h-10 bg-chart-2 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">2</div>
                    <h4 className="font-medium mb-1 text-sm">Pay Second Price</h4>
                    <p className="text-xs text-muted-foreground">Actually only pay second-place bid</p>
                  </div>
                  <div className="text-center">
                    <div className="w-10 h-10 bg-chart-3 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">3</div>
                    <h4 className="font-medium mb-1 text-sm">Fair Price Formation</h4>
                    <p className="text-xs text-muted-foreground">Prevents excessive bidding and increases efficiency</p>
                  </div>
                </div>
              </div>

              <div className="bg-chart-1/5 rounded-lg p-4">
                <h4 className="font-semibold mb-2 text-sm">📝 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-4" data-testid="section-ranking">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <TrendingUp className="h-4 w-4 text-chart-2" />
              <span>2. Ranking System</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-4">
              <div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-4">
                <h3 className="text-xl font-bold mb-2">Final Ranking Formula</h3>
                <div className="text-2xl font-bold text-primary mb-1">
                  Ranking Score = Bid Amount × (Quality Score ÷ 100)
                </div>
                <p className="text-sm text-muted-foreground">Same weighting system as advertising auctions</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h4 className="font-semibold mb-2 flex items-center">
                    <DollarSign className="h-4 w-4 text-primary mr-2" />
                    Bid Amount
                  </h4>
                  <ul className="space-y-1 text-sm">
                    <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-2 flex items-center">
                    <Star className="h-4 w-4 text-chart-2 mr-2" />
                    Quality Score
                  </h4>
                  <ul className="space-y-1 text-sm">
                    <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-4" data-testid="section-quality">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <Award className="h-4 w-4 text-chart-3" />
              <span>3. Quality Score System</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                <Card className="border-destructive/20">
                  <CardContent className="p-3 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-chart-4/20">
                  <CardContent className="p-3 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-chart-2/20">
                  <CardContent className="p-3 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-chart-2/5 rounded-lg p-4">
                <h4 className="font-semibold mb-2 flex items-center">
                  <Calculator className="h-4 w-4 text-chart-2 mr-2" />
                  Quality Score Benefits
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                  <div>
                    <h5 className="font-medium mb-1">📈 Ranking Improvement</h5>
                    <p className="text-xs text-muted-foreground">Higher quality scores prioritized among same bids</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-1">💰 Cost Savings</h5>
                    <p className="text-xs text-muted-foreground">Achieve high rankings with lower bids</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-1">🎯 Increased Effectiveness</h5>
                    <p className="text-xs text-muted-foreground">More exposure and user engagement opportunities</p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Auction Types */}
        <Card className="mb-4" data-testid="section-types">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <List className="h-4 w-4 text-chart-4" />
              <span>4. Auction Types</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Card className="border-primary/20">
                <CardContent className="p-3">
                  <h4 className="font-semibold mb-2 flex items-center">
                    <Users className="h-4 w-4 text-primary mr-2" />
                    People
                  </h4>
                  <ul className="space-y-1 text-sm">
                    <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-chart-1/20">
                <CardContent className="p-3">
                  <h4 className="font-semibold mb-2 flex items-center">
                    <Hash className="h-4 w-4 text-chart-1 mr-2" />
                    Topics
                  </h4>
                  <ul className="space-y-1 text-sm">
                    <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-chart-2/20">
                <CardContent className="p-3">
                  <h4 className="font-semibold mb-2 flex items-center">
                    <Building className="h-4 w-4 text-chart-2 mr-2" />
                    Companies
                  </h4>
                  <ul className="space-y-1 text-sm">
                    <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-4" data-testid="section-strategy">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <Target className="h-4 w-4 text-chart-5" />
              <span>5. Strategic Bidding Guide</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h4 className="font-semibold mb-2 text-primary">💡 Effective Bidding Strategies</h4>
                  <ul className="space-y-1 text-sm">
                    <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-2 text-destructive">⚠️ Mistakes to Avoid</h4>
                  <ul className="space-y-1 text-sm">
                    <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-accent/10 rounded-lg p-4">
                <h4 className="font-semibold mb-2 flex items-center">
                  <Lightbulb className="h-4 w-4 text-accent mr-2" />
                  Successful Auction Participation Tips
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                  <div>
                    <h5 className="font-medium mb-1">Phase 1: Preparation</h5>
                    <ul className="space-y-0.5 text-xs text-muted-foreground">
                      <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-1">Phase 2: Analysis</h5>
                    <ul className="space-y-0.5 text-xs text-muted-foreground">
                      <li>• Analyze past auction results</li>
                      <li>• Competitor bidding patterns</li>
                      <li>• Market value assessment</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-1">Phase 3: Execution</h5>
                    <ul className="space-y-0.5 text-xs text-muted-foreground">
                      <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-4" data-testid="section-technical">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center space-x-2 text-lg">
              <Brain className="h-4 w-4 text-primary" />
              <span>6. Technical Implementation</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-4">
              <div className="bg-primary/5 rounded-lg p-4">
                <h4 className="font-semibold mb-2">🔧 System Architecture</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                  <div>
                    <h5 className="font-medium mb-1">Real-time Bid Processing</h5>
                    <ul className="space-y-0.5 text-xs text-muted-foreground">
                      <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-1">Security and Verification</h5>
                    <ul className="space-y-0.5 text-xs text-muted-foreground">
                      <li>• User authentication and authorization</li>
                      <li>• Bid data encryption</li>
                      <li>• Fraud prevention system</li>
                    </ul>
                  </div>
                </div>
              </div>

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

        {/* Call to Action */}
        <Card className="bg-gradient-to-r from-primary/10 to-chart-2/10">
          <CardContent className="p-6 text-center">
            <h3 className="text-2xl font-bold mb-2">Join the Auction Now!</h3>
            <p className="text-muted-foreground mb-4">
              Start your innovative media management experience and acquire the best media outlet rights
            </p>
            <div className="flex justify-center space-x-3">
              <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>
  );
}