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">
              <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" />
                Edit
              </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">Overview</TabsTrigger>
            <TabsTrigger value="articles" data-testid="tab-articles">Articles</TabsTrigger>
            <TabsTrigger value="predictions" data-testid="tab-predictions">Prediction Markets</TabsTrigger>
            <TabsTrigger value="auctions" data-testid="tab-auctions">Auctions</TabsTrigger>
            <TabsTrigger value="comments" data-testid="tab-comments">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">Total Articles</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">Active Prediction Markets</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">Active Auctions</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">Total Comments</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>Media Outlet Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-gray-700">Name</label>
                    <Input value={outlet.name} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">Description</label>
                    <Input value={outlet.description || ""} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">Category</label>
                    <Input value={outlet.category} readOnly className="mt-1" />
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-700">Slug</label>
                    <Input value={outlet.slug} readOnly className="mt-1" />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Quick Actions</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" />
                    Create New Article
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-create-prediction"
                  >
                    <BarChart3 className="h-4 w-4 mr-2" />
                    Create Prediction Market
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-start-auction"
                  >
                    <Gavel className="h-4 w-4 mr-2" />
                    Start Auction
                  </Button>
                  <Button 
                    className="w-full justify-start" 
                    variant="outline"
                    data-testid="button-moderate-comments"
                  >
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Manage Comments
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="articles" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Article Management</CardTitle>
                  <Button data-testid="button-new-article">
                    <Plus className="h-4 w-4 mr-2" />
                    Create New Article
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">No articles yet</div>
                  <div className="text-gray-500 text-sm">Create your first article</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="predictions" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Prediction Market Management</CardTitle>
                  <Button data-testid="button-new-prediction">
                    <Plus className="h-4 w-4 mr-2" />
                    Create New Market
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">No active prediction markets</div>
                  <div className="text-gray-500 text-sm">Create a new prediction market</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="auctions" className="mt-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Auction Management</CardTitle>
                  <Button data-testid="button-new-auction">
                    <Plus className="h-4 w-4 mr-2" />
                    Start New Auction
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">No active auctions</div>
                  <div className="text-gray-500 text-sm">Start a new auction</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="comments" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Comment Management</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-12">
                  <div className="text-gray-400 text-lg mb-2">No comments to manage</div>
                  <div className="text-gray-500 text-sm">Comments will appear here when posted</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}