sapiens-web2/client/src/components/MainContent.tsx

import { useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import type { MediaOutlet } from "@shared/schema";
import { useAuth } from "@/hooks/useAuth";
import Footer from "@/components/Footer";
import { useState } from "react";
import { ArrowUpDown } from "lucide-react";

const categories = [
  { id: "people", name: "People", key: "People" },
  { id: "topics", name: "Topics", key: "Topics" },
  { id: "companies", name: "Companies", key: "Companies" }
];

export default function MainContent() {
  const { user } = useAuth();
  const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");

  const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
    queryKey: ["/api/media-outlets"],
    queryFn: async () => {
      const res = await fetch("/api/media-outlets", {
        credentials: "include",
      });
      if (!res.ok) {
        throw new Error(`${res.status}: ${res.statusText}`);
      }
      return res.json();
    },
  });

  // Group outlets by category and sort
  const getOutletsByCategory = (category: string) => {
    const filtered = allOutlets.filter(outlet => 
      outlet.category.toLowerCase() === category.toLowerCase()
    );
    
    return filtered.sort((a, b) => {
      if (sortBy === "alphabetical") {
        return a.name.localeCompare(b.name);
      } else {
        // Sort by traffic score (descending - highest traffic first)
        return (b.trafficScore || 0) - (a.trafficScore || 0);
      }
    });
  };

  const renderOutletCard = (outlet: MediaOutlet) => (
    <Card 
      key={outlet.id} 
      className="hover:shadow-md transition-shadow cursor-pointer bg-white"
      data-testid={`card-outlet-${outlet.id}`}
    >
      <CardContent className="p-2">
        <div className="flex items-center space-x-2">
          <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
            {outlet.imageUrl ? (
              <img 
                src={outlet.imageUrl} 
                alt={outlet.name}
                className="w-full h-full object-cover"
                style={{objectPosition: 'center top'}}
              />
            ) : (
              <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
                <span className="text-gray-600 text-sm font-medium">
                  {outlet.name.charAt(0)}
                </span>
              </div>
            )}
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-medium text-gray-900 truncate">
              {outlet.name}
            </h3>
            <p className="text-sm text-gray-500 truncate">
              {outlet.description || "Media Outlet"}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-4">
        {/* Sorting Controls */}
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-2xl font-bold text-gray-900">언론매체</h1>
          <div className="flex items-center space-x-2">
            <ArrowUpDown className="h-4 w-4 text-gray-500" />
            <Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
              <SelectTrigger className="w-[180px]" data-testid="sort-select">
                <SelectValue placeholder="정렬 방식" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="alphabetical" data-testid="sort-alphabetical">ABC 순</SelectItem>
                <SelectItem value="traffic" data-testid="sort-traffic">트래픽 순</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {isLoading ? (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {categories.map((category) => (
              <div key={category.id}>
                <h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2>
                <div className="space-y-2">
                  {Array.from({ length: 8 }).map((_, i) => (
                    <Card key={i} className="animate-pulse">
                      <CardContent className="p-2">
                        <div className="flex items-center space-x-2">
                          <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
                          <div className="flex-1">
                            <div className="h-4 bg-gray-200 rounded mb-2"></div>
                            <div className="h-3 bg-gray-200 rounded w-2/3"></div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* People Section */}
            <div data-testid="section-people">
              <h2 className="text-xl font-bold text-gray-900 mb-2">
                People 
                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
              </h2>
              <div className="space-y-2">
                {getOutletsByCategory("People").map(renderOutletCard)}
              </div>
            </div>

            {/* Topics Section */}
            <div data-testid="section-topics">
              <h2 className="text-xl font-bold text-gray-900 mb-2">
                Topics 
                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
              </h2>
              <div className="space-y-2">
                {getOutletsByCategory("Topics").map(renderOutletCard)}
              </div>
            </div>

            {/* Companies Section */}
            <div data-testid="section-companies">
              <h2 className="text-xl font-bold text-gray-900 mb-2">
                Companies 
                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
              </h2>
              <div className="space-y-2">
                {getOutletsByCategory("Companies").map(renderOutletCard)}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <Footer />
    </div>
  );
}