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

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "wouter";
import { 
  Award, 
  TrendingUp, 
  List, 
  Target,
  Gavel,
  Home,
  BookOpen
} from "lucide-react";

export default function AuctionGuide() {
  const handleGoBack = () => {
    window.history.back();
  };

  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="px-6 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">
              <div className="relative">
                <Button 
                  variant="ghost" 
                  size="sm"
                  className="relative"
                  onClick={handleGoBack}
                  data-testid="button-auction-guide"
                >
                  <BookOpen className="h-4 w-4" />
                </Button>
                {/* Triangle indicator */}
                <div className="absolute left-1/2 -translate-x-1/2 top-full z-10">
                  <div 
                    className="w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-b-[10px] border-b-gray-50"
                    style={{ filter: 'drop-shadow(0 -1px 0px rgba(229, 231, 235, 1))' }}
                  />
                </div>
              </div>
              
              <a href="/api/login">
                <Button size="sm" data-testid="button-login">Login</Button>
              </a>
            </div>
          </div>
        </div>
      </header>

      <main className="px-6 py-6 w-full">
        {/* Header Section */}
        <div className="mb-4">
          <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">
            Advertising Bidding Method Based
          </p>
        </div>

        {/* 1. System Overview */}
        <Card className="mb-3" data-testid="section-overview">
          <CardHeader className="pb-2 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Award className="h-4 w-4 text-blue-600" />
              <span>1. System Overview and Core Principles</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <p className="text-xs text-gray-600 mb-2">
              This platform is an innovative system that applies the <strong>advertising bidding method</strong> to the auction of media management rights.
            </p>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 px-2 font-semibold">Core Principle</th>
                    <th className="text-left py-2 px-2 font-semibold">Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b">
                    <td className="py-2 px-2 font-medium">Vickrey Auction</td>
                    <td className="py-2 px-2">The winner is the bidder with the <strong>highest total score</strong>.</td>
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-2 font-medium">Second-Price Payment</td>
                    <td className="py-2 px-2">The winner actually pays the price of the <strong>second-place bid</strong>. (Prevents excessive bidding)</td>
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-2 font-medium">Hybrid Scoring</td>
                    <td className="py-2 px-2">The final ranking score is calculated by combining <strong>Bid Amount × Quality Score</strong>.</td>
                  </tr>
                  <tr>
                    <td className="py-2 px-2 font-medium">Quality-Centered</td>
                    <td className="py-2 px-2">Evaluation prioritizes content quality, preventing simple price competition.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

        {/* 2. Core Mechanism */}
        <Card className="mb-3" data-testid="section-mechanism">
          <CardHeader className="pb-2 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <TrendingUp className="h-4 w-4 text-green-600" />
              <span>2. Core Mechanism and Ranking Calculation</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3 space-y-3">
            {/* Formula */}
            <div className="bg-gradient-to-r from-blue-50 to-green-50 rounded p-3 text-center">
              <h3 className="text-xs font-semibold mb-1">Final Ranking Score Formula</h3>
              <div className="text-base font-bold text-blue-600">
                Ranking Score = Bid Amount × (Quality Score ÷ 100)
              </div>
            </div>

            {/* Bidding Terms */}
            <div>
              <h4 className="font-semibold text-sm mb-2">Bidding Terms</h4>
              <div className="overflow-x-auto">
                <table className="w-full text-xs border-collapse">
                  <thead>
                    <tr className="border-b bg-gray-50">
                      <th className="text-left py-2 px-2 font-semibold">Category</th>
                      <th className="text-left py-2 px-2 font-semibold">Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b">
                      <td className="py-2 px-2 font-medium">Bid Amount</td>
                      <td className="py-2 px-2">Minimum $100 to Maximum $100,000. Must be higher than the current top bid.</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-2 font-medium">Management Period</td>
                      <td className="py-2 px-2">Default 30 days</td>
                    </tr>
                    <tr>
                      <td className="py-2 px-2 font-medium">Win & Payment</td>
                      <td className="py-2 px-2">The 1st place score wins but pays the <strong>bid amount of the 2nd place score</strong>.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            {/* Quality Score */}
            <div>
              <h4 className="font-semibold text-sm mb-2">Quality Score (1-100 points)</h4>
              <div className="overflow-x-auto">
                <table className="w-full text-xs border-collapse">
                  <thead>
                    <tr className="border-b bg-gray-50">
                      <th className="text-left py-2 px-2 font-semibold">Score Range</th>
                      <th className="text-left py-2 px-2 font-semibold">Level</th>
                      <th className="text-left py-2 px-2 font-semibold">Key Evaluation Criteria</th>
                      <th className="text-left py-2 px-2 font-semibold">Quality Benefit</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b">
                      <td className="py-2 px-2 font-medium">71-100 pts</td>
                      <td className="py-2 px-2 text-green-600 font-semibold">High Quality</td>
                      <td className="py-2 px-2">Excellent editorial standards, high user engagement, innovative content</td>
                      <td className="py-2 px-2">Rank improvement, high rank with lower bids, increased exposure</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-2 font-medium">41-70 pts</td>
                      <td className="py-2 px-2 text-gray-600 font-semibold">Average Quality</td>
                      <td className="py-2 px-2">Meets standard criteria, stable content quality</td>
                      <td className="py-2 px-2">-</td>
                    </tr>
                    <tr>
                      <td className="py-2 px-2 font-medium">1-40 pts</td>
                      <td className="py-2 px-2 text-red-600 font-semibold">Low Quality</td>
                      <td className="py-2 px-2">Below basic standards, low engagement, lack of consistency</td>
                      <td className="py-2 px-2">-</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 3. Auction Target Types */}
        <Card className="mb-3" data-testid="section-types">
          <CardHeader className="pb-2 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <List className="h-4 w-4 text-purple-600" />
              <span>3. Auction Target Types</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <p className="text-xs text-gray-600 mb-2">
              Management rights for a total of <strong>71</strong> media outlets are up for auction.
            </p>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="border-b bg-gray-50">
                    <th className="text-left py-2 px-2 font-semibold">Type</th>
                    <th className="text-left py-2 px-2 font-semibold">Count</th>
                    <th className="text-left py-2 px-2 font-semibold">Description</th>
                    <th className="text-left py-2 px-2 font-semibold">Minimum Bid</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b">
                    <td className="py-2 px-2 font-medium text-blue-600">People</td>
                    <td className="py-2 px-2">24</td>
                    <td className="py-2 px-2">Personal branding, statements, profile editing rights for key figures.</td>
                    <td className="py-2 px-2 font-semibold">$500</td>
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-2 font-medium text-green-600">Topics</td>
                    <td className="py-2 px-2">20</td>
                    <td className="py-2 px-2">Trend analysis, content curation for core topics, prediction market integration.</td>
                    <td className="py-2 px-2 font-semibold">$300</td>
                  </tr>
                  <tr>
                    <td className="py-2 px-2 font-medium text-purple-600">Companies</td>
                    <td className="py-2 px-2">27</td>
                    <td className="py-2 px-2">Corporate news, financial updates, corporate reputation management.</td>
                    <td className="py-2 px-2 font-semibold">$1,000</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <p className="text-xs text-gray-600 mt-2">
              * The winner acquires <strong>Exclusive Editorial Rights</strong> to prioritize content decisions.
            </p>
          </CardContent>
        </Card>

        {/* 4. Strategic Bidding Guide */}
        <Card className="mb-3" data-testid="section-strategy">
          <CardHeader className="pb-2 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Target className="h-4 w-4 text-orange-600" />
              <span>4. Strategic Bidding Guide</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {/* Effective Tips */}
              <div>
                <h4 className="font-semibold text-sm mb-1 text-blue-600">💡 Effective Bidding Tips</h4>
                <ul className="space-y-1 text-xs">
                  <li>1. <strong>Prioritize Quality Score:</strong> Improving the quality score offers a higher Return on Investment (ROI) than increasing the bid amount alone.</li>
                  <li>2. <strong>Analyze Competition:</strong> Study past auction results and competitor bidding patterns in similar categories.</li>
                  <li>3. <strong>Gradual Bidding:</strong> Increase bids step-by-step rather than making large jumps close to the deadline.</li>
                  <li>4. <strong>Consider Timing:</strong> Competition often intensifies near the auction closing time.</li>
                </ul>
              </div>

              {/* Mistakes to Avoid */}
              <div>
                <h4 className="font-semibold text-sm mb-1 text-red-600">⚠️ Mistakes to Avoid</h4>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>Ignoring Quality Score:</strong> You cannot win with bid amount alone.</li>
                  <li>• <strong>Excessive Competition:</strong> Emotional bidding can lead to losses.</li>
                  <li>• <strong>Short-term Thinking:</strong> Don't neglect profitability relative to the management period.</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 5. Technical Implementation */}
        <Card className="mb-3" data-testid="section-technical">
          <CardHeader className="pb-2 pt-3 px-3">
            <CardTitle className="flex items-center gap-2 text-base font-semibold">
              <Award className="h-4 w-4 text-indigo-600" />
              <span>5. Technical Implementation (System Features)</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0 px-3 pb-3">
            <ul className="space-y-1 text-xs">
              <li>• <strong>Real-time Processing:</strong> Utilizes PostgreSQL for transaction management, ensuring concurrency control and real-time ranking updates.</li>
              <li>• <strong>Security:</strong> Features user authentication, bid data encryption, and a robust fraud prevention system.</li>
              <li>• <strong>Data Analysis:</strong> Machine Learning (ML) is used for <strong>optimal bid suggestions</strong>, and post-acquisition <strong>ROI analysis</strong> measures performance.</li>
            </ul>
          </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>
  );
}