sapiens-web3/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-6 py-4">
          <div className="flex items-center justify-between">
            <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>
            
            <div className="flex items-center space-x-4">
              <nav className="hidden md:flex space-x-6">
                <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors" data-testid="link-home">Home</Link>
                <Link href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors" data-testid="link-auctions">Auctions</Link>
                <Link href="/auction-guide" className="text-foreground font-medium" data-testid="link-auction-guide">Auction Guide</Link>
              </nav>
              
              <a href="/api/login">
                <Button data-testid="button-login">Login</Button>
              </a>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-8">
        {/* Header Section */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-4" data-testid="text-guide-title">SAPIENS 언론매체 경매 시스템 완전 가이드</h1>
          <p className="text-xl text-muted-foreground">
            네이버 광고 경매 방식을 적용한 혁신적인 미디어 관리 권한 경매 플랫폼
          </p>
        </div>

        {/* Overview Card */}
        <Card className="mb-8" data-testid="section-overview">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Lightbulb className="h-5 w-5 text-primary" />
              <span>경매 시스템 개요</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold text-lg mb-3">🎯 핵심 원리</h3>
                <ul className="space-y-2 text-sm">
                  <li>• <strong>비크리 경매 방식</strong>: 노벨경제학상 수상 이론 적용</li>
                  <li>• <strong>하이브리드 스코어링</strong>: 입찰가 × 품질점수 조합</li>
                  <li>• <strong>공정한 가격 결정</strong>: 2순위 입찰가 기반 과금</li>
                  <li>• <strong>품질 중심 평가</strong>: 단순 가격 경쟁 방지</li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold text-lg mb-3">📊 경매 대상</h3>
                <ul className="space-y-2 text-sm">
                  <li>• <strong>People (24명)</strong>: 주요 인물 언론매체 관리권</li>
                  <li>• <strong>Topics (20개)</strong>: 핵심 주제 콘텐츠 관리권</li>
                  <li>• <strong>Companies (27개)</strong>: 기업 미디어 관리권</li>
                  <li>• <strong>독점적 편집권</strong>: 콘텐츠 우선순위 결정권</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Core Mechanism */}
        <Card className="mb-8" data-testid="section-mechanism">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Settings className="h-5 w-5 text-chart-1" />
              <span>1. 기본 경매 메커니즘</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="bg-primary/5 rounded-lg p-6">
                <h3 className="font-semibold text-lg mb-4 flex items-center">
                  <Award className="h-5 w-5 text-primary mr-2" />
                  비크리 경매 방식 (Vickrey Auction)
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="text-center">
                    <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold text-lg mx-auto mb-2">1</div>
                    <h4 className="font-medium mb-2">최고 입찰자 낙찰</h4>
                    <p className="text-sm text-muted-foreground">가장 높은 종합 점수를 받은 입찰자가 낙찰</p>
                  </div>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-chart-2 rounded-full flex items-center justify-center text-white font-bold text-lg mx-auto mb-2">2</div>
                    <h4 className="font-medium mb-2">2순위 가격 지불</h4>
                    <p className="text-sm text-muted-foreground">실제로는 2순위 입찰가만 지불</p>
                  </div>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-chart-3 rounded-full flex items-center justify-center text-white font-bold text-lg mx-auto mb-2">3</div>
                    <h4 className="font-medium mb-2">공정한 가격 형성</h4>
                    <p className="text-sm text-muted-foreground">과도한 입찰 방지 및 효율성 증대</p>
                  </div>
                </div>
              </div>

              <div className="bg-chart-1/5 rounded-lg p-6">
                <h4 className="font-semibold mb-3">📝 실제 예시</h4>
                <div className="space-y-2 text-sm">
                  <p><strong>A 입찰자:</strong> $1,000 × 85점 = 85,000점 (1위 낙찰)</p>
                  <p><strong>B 입찰자:</strong> $800 × 90점 = 72,000점 (2위)</p>
                  <p><strong>C 입찰자:</strong> $1,200 × 60점 = 72,000점 (3위)</p>
                  <p className="pt-2 font-medium text-primary">
                    → A가 낙찰되지만 실제 지불 금액은 B의 입찰가인 $800 수준
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Ranking System */}
        <Card className="mb-8" data-testid="section-ranking">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <TrendingUp className="h-5 w-5 text-chart-2" />
              <span>2. 순위 결정 시스템</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-6">
                <h3 className="text-2xl font-bold mb-4">최종 순위 공식</h3>
                <div className="text-3xl font-bold text-primary mb-2">
                  순위 점수 = 입찰가 × (품질점수 ÷ 100)
                </div>
                <p className="text-muted-foreground">네이버 광고 경매와 동일한 가중치 방식 적용</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold text-lg mb-3 flex items-center">
                    <DollarSign className="h-5 w-5 text-primary mr-2" />
                    입찰가 (Bid Amount)
                  </h4>
                  <ul className="space-y-2 text-sm">
                    <li>• 최소 입찰가: $100</li>
                    <li>• 최대 입찰가: $100,000</li>
                    <li>• 현재 최고가보다 높아야 함</li>
                    <li>• 관리 기간: 기본 30일</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold text-lg mb-3 flex items-center">
                    <Star className="h-5 w-5 text-chart-2 mr-2" />
                    품질점수 (Quality Score)
                  </h4>
                  <ul className="space-y-2 text-sm">
                    <li>• 점수 범위: 1-100점</li>
                    <li>• 콘텐츠 품질 평가</li>
                    <li>• 사용자 참여도 분석</li>
                    <li>• 편집 기준 준수도</li>
                  </ul>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Quality Score System */}
        <Card className="mb-8" data-testid="section-quality">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Award className="h-5 w-5 text-chart-3" />
              <span>3. 품질점수 시스템</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="border-destructive/20">
                  <CardContent className="p-4 text-center">
                    <Badge variant="destructive" className="mb-2">1-40점</Badge>
                    <h4 className="font-semibold mb-2">낮은 품질</h4>
                    <ul className="text-xs space-y-1">
                      <li>• 기본적인 편집 기준 미달</li>
                      <li>• 낮은 사용자 참여도</li>
                      <li>• 콘텐츠 일관성 부족</li>
                    </ul>
                  </CardContent>
                </Card>
                <Card className="border-chart-4/20">
                  <CardContent className="p-4 text-center">
                    <Badge variant="secondary" className="mb-2">41-70점</Badge>
                    <h4 className="font-semibold mb-2">보통 품질</h4>
                    <ul className="text-xs space-y-1">
                      <li>• 표준 편집 기준 충족</li>
                      <li>• 안정적인 콘텐츠 품질</li>
                      <li>• 적절한 사용자 반응</li>
                    </ul>
                  </CardContent>
                </Card>
                <Card className="border-chart-2/20">
                  <CardContent className="p-4 text-center">
                    <Badge variant="default" className="mb-2">71-100점</Badge>
                    <h4 className="font-semibold mb-2">높은 품질</h4>
                    <ul className="text-xs space-y-1">
                      <li>• 우수한 편집 기준</li>
                      <li>• 높은 사용자 참여도</li>
                      <li>• 혁신적인 콘텐츠</li>
                    </ul>
                  </CardContent>
                </Card>
              </div>

              <div className="bg-chart-2/5 rounded-lg p-6">
                <h4 className="font-semibold mb-3 flex items-center">
                  <Calculator className="h-5 w-5 text-chart-2 mr-2" />
                  품질점수 혜택
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div>
                    <h5 className="font-medium mb-2">📈 순위 향상</h5>
                    <p className="text-muted-foreground">동일 입찰가 중 높은 품질점수 우선 선정</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">💰 비용 절약</h5>
                    <p className="text-muted-foreground">낮은 입찰가로도 높은 순위 획득 가능</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">🎯 효과 증대</h5>
                    <p className="text-muted-foreground">더 많은 노출과 사용자 참여 기회</p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Auction Types */}
        <Card className="mb-8" data-testid="section-types">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <List className="h-5 w-5 text-chart-4" />
              <span>4. 경매 유형별 특징</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="border-primary/20">
                <CardContent className="p-4">
                  <h4 className="font-semibold text-lg mb-3 flex items-center">
                    <Users className="h-5 w-5 text-primary mr-2" />
                    People (인물)
                  </h4>
                  <ul className="space-y-2 text-sm">
                    <li>• <strong>24명의 주요 인물</strong></li>
                    <li>• 개인 브랜딩 관리</li>
                    <li>• 발언 및 활동 콘텐츠</li>
                    <li>• 프로필 정보 편집권</li>
                    <li>• 최소 입찰: $500</li>
                  </ul>
                </CardContent>
              </Card>
              <Card className="border-chart-1/20">
                <CardContent className="p-4">
                  <h4 className="font-semibold text-lg mb-3 flex items-center">
                    <Hash className="h-5 w-5 text-chart-1 mr-2" />
                    Topics (주제)
                  </h4>
                  <ul className="space-y-2 text-sm">
                    <li>• <strong>20개 핵심 주제</strong></li>
                    <li>• 트렌드 분석 관리</li>
                    <li>• 주제별 콘텐츠 큐레이션</li>
                    <li>• 예측시장 연동</li>
                    <li>• 최소 입찰: $300</li>
                  </ul>
                </CardContent>
              </Card>
              <Card className="border-chart-2/20">
                <CardContent className="p-4">
                  <h4 className="font-semibold text-lg mb-3 flex items-center">
                    <Building className="h-5 w-5 text-chart-2 mr-2" />
                    Companies (기업)
                  </h4>
                  <ul className="space-y-2 text-sm">
                    <li>• <strong>27개 주요 기업</strong></li>
                    <li>• 기업 뉴스 관리</li>
                    <li>• 재무 정보 업데이트</li>
                    <li>• 기업 평판 관리</li>
                    <li>• 최소 입찰: $1,000</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </CardContent>
        </Card>

        {/* Strategic Bidding */}
        <Card className="mb-8" data-testid="section-strategy">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Target className="h-5 w-5 text-chart-5" />
              <span>5. 전략적 입찰 가이드</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold text-lg mb-3 text-primary">💡 효과적인 입찰 전략</h4>
                  <ul className="space-y-2 text-sm">
                    <li>• <strong>품질점수 우선 개선</strong>: 입찰가보다 ROI가 높음</li>
                    <li>• <strong>경쟁 환경 분석</strong>: 유사한 카테고리 경매 분석</li>
                    <li>• <strong>점진적 입찰</strong>: 한 번에 높은 금액보다 단계적 증액</li>
                    <li>• <strong>시간대 고려</strong>: 마감 임박 시 경쟁 심화</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold text-lg mb-3 text-destructive">⚠️ 피해야 할 실수</h4>
                  <ul className="space-y-2 text-sm">
                    <li>• <strong>품질점수 무시</strong>: 입찰가만으로는 승리 불가</li>
                    <li>• <strong>과도한 경쟁</strong>: 감정적 입찰로 인한 손실</li>
                    <li>• <strong>단기적 사고</strong>: 관리 기간 대비 수익성 미고려</li>
                    <li>• <strong>마감 직전 입찰</strong>: 충분한 검토 시간 부족</li>
                  </ul>
                </div>
              </div>

              <div className="bg-accent/10 rounded-lg p-6">
                <h4 className="font-semibold mb-3 flex items-center">
                  <Lightbulb className="h-5 w-5 text-accent mr-2" />
                  성공적인 경매 참여 팁
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div>
                    <h5 className="font-medium mb-2">1단계: 준비</h5>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• 목표 언론매체 선정</li>
                      <li>• 예산 계획 수립</li>
                      <li>• 품질점수 자가 평가</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">2단계: 분석</h5>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• 과거 경매 결과 분석</li>
                      <li>• 경쟁자 입찰 패턴</li>
                      <li>• 시장 가치 평가</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">3단계: 실행</h5>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• 계획된 입찰 실행</li>
                      <li>• 실시간 모니터링</li>
                      <li>• 적시 조정 및 대응</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Technical Implementation */}
        <Card className="mb-8" data-testid="section-technical">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Brain className="h-5 w-5 text-primary" />
              <span>6. 기술적 구현</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="bg-primary/5 rounded-lg p-6">
                <h4 className="font-semibold mb-3">🔧 시스템 아키텍처</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <h5 className="font-medium mb-2">실시간 입찰 처리</h5>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• PostgreSQL 기반 트랜잭션 관리</li>
                      <li>• 동시성 제어 및 무결성 보장</li>
                      <li>• 실시간 순위 업데이트</li>
                    </ul>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">보안 및 검증</h5>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• 사용자 인증 및 권한 관리</li>
                      <li>• 입찰 데이터 암호화</li>
                      <li>• 부정 입찰 방지 시스템</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div className="bg-chart-2/5 rounded-lg p-6">
                <h4 className="font-semibold mb-3">📊 데이터 분석</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div>
                    <h5 className="font-medium mb-2">입찰 패턴 분석</h5>
                    <p className="text-muted-foreground">사용자별 입찰 히스토리 및 성공률 추적</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">시장 가격 예측</h5>
                    <p className="text-muted-foreground">머신러닝 기반 적정 입찰가 제안</p>
                  </div>
                  <div>
                    <h5 className="font-medium mb-2">성과 측정</h5>
                    <p className="text-muted-foreground">관리 권한 획득 후 ROI 분석</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-8 text-center">
            <h3 className="text-2xl font-bold mb-4">지금 경매에 참여하세요!</h3>
            <p className="text-lg text-muted-foreground mb-6">
              혁신적인 미디어 관리 경험을 시작하고 최고의 언론매체 권한을 획득하세요
            </p>
            <div className="flex justify-center space-x-4">
              <Link href="/auctions">
                <Button size="lg" data-testid="button-view-auctions">
                  <Gavel className="mr-2 h-4 w-4" />
                  활성 경매 보기
                </Button>
              </Link>
              <Link href="/">
                <Button variant="outline" size="lg" data-testid="button-back-home">
                  <Home className="mr-2 h-4 w-4" />
                  홈으로 돌아가기
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}