import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import ProfileModal from "./ProfileModal";
import type { MediaOutlet } from "@shared/schema";

interface MediaOutletCardProps {
  outlet: MediaOutlet;
  viewMode?: "grid" | "list";
}

export default function MediaOutletCard({ outlet, viewMode = "list" }: MediaOutletCardProps) {
  const [showProfile, setShowProfile] = useState(false);

  const handleCardClick = () => {
    window.location.href = `/media/${outlet.slug}`;
  };

  const handleInfoClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setShowProfile(true);
  };

  const getOutletImage = () => {
    if (outlet.imageUrl) {
      // Handle @assets/ paths
      if (outlet.imageUrl.startsWith('@assets/')) {
        // Convert @assets/ to a proper import path or static asset path
        return outlet.imageUrl.replace('@assets/', '/attached_assets/');
      }
      return outlet.imageUrl;
    }
    
    // Default images based on category
    if (outlet.category === "People") {
      return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face";
    } else if (outlet.category === "Companies") {
      return null; // Use initial letter
    }
    return null;
  };

  const getOutletIcon = () => {
    if (outlet.category === "Topics") {
      return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" :
             outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" :
             outlet.name.toLowerCase().includes("federal") ? "fas fa-university" :
             "fas fa-hashtag";
    }
    return "fas fa-building";
  };

  const getTagColor = () => {
    const tag = outlet.tags?.[0] || outlet.category;
    const colors = {
      "Tech Leader": "bg-blue-100 text-blue-800",
      "CEO": "bg-purple-100 text-purple-800", 
      "Crypto": "bg-yellow-100 text-yellow-800",
      "Politics": "bg-red-100 text-red-800",
      "AI": "bg-green-100 text-green-800",
      "Finance": "bg-indigo-100 text-indigo-800",
      "Blockchain": "bg-cyan-100 text-cyan-800",
      "Economy": "bg-orange-100 text-orange-800",
      "Football": "bg-emerald-100 text-emerald-800"
    };
    return colors[tag as keyof typeof colors] || "bg-gray-100 text-gray-800";
  };

  return (
    <>
      {/* Clean List Style like screenshots */}
      <div 
        className="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors" 
        onClick={handleCardClick}
        data-testid={`card-outlet-${outlet.slug}`}
      >
        <div className="flex items-center space-x-3">
          {/* Profile Image */}
          {getOutletImage() ? (
            <img 
              src={getOutletImage()!} 
              alt={outlet.name} 
              className="w-12 h-12 rounded-full object-cover flex-shrink-0"
              onError={(e) => {
                console.log('Image failed to load:', getOutletImage());
                const target = e.target as HTMLImageElement;
                target.style.display = 'none';
              }}
            />
          ) : (
            <div className={`w-12 h-12 ${outlet.category === 'Companies' ? 'bg-blue-500' : outlet.category === 'Topics' ? 'bg-green-500' : 'bg-purple-500'} rounded-full flex items-center justify-center flex-shrink-0`}>
              {outlet.category === 'Companies' ? (
                <span className="text-white font-bold text-lg">
                  {outlet.name.charAt(0)}
                </span>
              ) : (
                <i className={`${getOutletIcon()} text-white text-lg`}></i>
              )}
            </div>
          )}
          
          {/* Content */}
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-gray-900 dark:text-white text-base leading-tight">
              {outlet.name}
            </h3>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">
              {outlet.description}
            </p>
          </div>
          
          {/* Tag and Info */}
          <div className="flex items-center space-x-2 flex-shrink-0">
            <span className={`text-xs px-2 py-1 rounded-full font-medium ${getTagColor()}`}>
              {outlet.tags?.[0] || outlet.category}
            </span>
          </div>
        </div>
      </div>

      <ProfileModal 
        outlet={outlet}
        isOpen={showProfile}
        onClose={() => setShowProfile(false)}
      />
    </>
  );
}