import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Edit, Plus, BarChart3, Gavel, MessageSquare } from "lucide-react";
import type { MediaOutlet } from "@shared/schema";

interface MediaOutletManagementProps {
  outlet: MediaOutlet;
  onBack: () => void;
}

export default function MediaOutletManagement({ outlet, onBack }: MediaOutletManagementProps) {
  const [activeTab, setActiveTab] = useState("overview");

  // TODO: Add queries for articles, predictions, auctions, comments related to this outlet
  const { data: articles = [] } = useQuery({
    queryKey: ["/api/articles", outlet.id],
    enabled: false, // Disabled for now as articles API is not implemented
  });

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 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-4">
              <Button 
                variant="ghost" 
                size="sm"
                onClick={onBack}
                data-testid="button-back"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                뒤로가기
              </Button>
              
              <div className="flex items-center space-x-3">
                {outlet.imageUrl ? (
                  <img 
                    src={outlet.imageUrl} 
                    alt={outlet.name}
                    className="w-10 h-10 rounded-full object-cover"
                  />
                ) : (
                  <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                    <span className="text-gray-600 font-medium">
                      {outlet.name.charAt(0)}
                    </span>
                  </div>
                )}
                <div>
                  <h1 className="text-xl font-bold text-gray-900">{outlet.name}</h1>
                  <p className="text-sm text-gray-500">{outlet.description || "Media Outlet"}</p>
                </div>
              </div>
            </div>
            
            <div className="flex items-center space-x-2">
              <span className="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 rounded-full">
                {outlet.category}
              </span>
              <Button 
                variant="outline" 
                size="sm"
                data-testid="button-edit-outlet"
              >
                <Edit className="h-4 w-4 mr-2" />
                편집
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-6 py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="overview" data-testid="tab-overview">개요</TabsTrigger>
            <TabsTrigger value="articles" data-testid="tab-articles">기사 관리</TabsTrigger>
            <TabsTrigger value="predictions" data-testid="tab-predictions">예측시장</TabsTrigger>
            <TabsTrigger value="auctions" data-testid="tab-auctions">경매</TabsTrigger>
            <TabsTrigger value="comments" data-testid="tab-comments">댓글</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-sm font-medium text-gray-500">총 기사 수</h3>
                      <p className="text-2xl font-bold">0</p>
                    </div>
                    <div className="text-blue-600">
                      <BarChart3 className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-sm font-medium text-gray-500">활성 예측시장</h3>
                      <p className="text-2xl font-bold">0</p>
                    </div>
                    <div className="text-green-600">
                      <BarChart3 className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-sm font-medium text-gray-500">진행중인 경매</h3>
                      <p className="text-2xl font-bold">0</p>
                    </div>
                    <div className="text-orange-600">
                      <Gavel className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-sm font-medium text-gray-500">총 댓글 수</h3>
                      <p className="text-2xl font-bold">0</p>
                    </div>
                    <div className="text-purple-600">
                      <MessageSquare className="h-6 w-6" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>언론매체 정보</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-gray-700">이름</label>
                    <Input value={outlet.name} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">설명</label>
                    <Input value={outlet.description || ""} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">카테고리</label>
                    <Input value={outlet.category} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">슬러그</label>
                    <Input value={outlet.slug} readOnly className="mt-1" />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>빠른 작업</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-create-article"
                  >
                    <Plus className="h-4 w-4 mr-2" />
                    새 기사 작성
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-create-prediction"
                  >
                    <BarChart3 className="h-4 w-4 mr-2" />
                    예측시장 생성
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-start-auction"
                  >
                    <Gavel className="h-4 w-4 mr-2" />
                    경매 시작
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-moderate-comments"
                  >
                    <MessageSquare className="h-4 w-4 mr-2" />
                    댓글 관리
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="articles" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>기사 관리</CardTitle>
                  <Button data-testid="button-new-article">
                    <Plus className="h-4 w-4 mr-2" />
                    새 기사 작성
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">아직 기사가 없습니다</div>
                  <div className="text-gray-500 text-sm">첫 번째 기사를 작성해보세요</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="predictions" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>예측시장 관리</CardTitle>
                  <Button data-testid="button-new-prediction">
                    <Plus className="h-4 w-4 mr-2" />
                    새 예측시장 생성
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">활성 예측시장이 없습니다</div>
                  <div className="text-gray-500 text-sm">새로운 예측시장을 생성해보세요</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="auctions" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>경매 관리</CardTitle>
                  <Button data-testid="button-new-auction">
                    <Plus className="h-4 w-4 mr-2" />
                    새 경매 시작
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">진행중인 경매가 없습니다</div>
                  <div className="text-gray-500 text-sm">새로운 경매를 시작해보세요</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="comments" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>댓글 관리</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">관리할 댓글이 없습니다</div>
                  <div className="text-gray-500 text-sm">댓글이 등록되면 여기서 관리할 수 있습니다</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}