sapiens-web3/client/src/components/ProfileModal.tsx

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import type { MediaOutlet } from "@shared/schema";

interface ProfileModalProps {
  outlet: MediaOutlet;
  isOpen: boolean;
  onClose: () => void;
}

export default function ProfileModal({ outlet, isOpen, onClose }: ProfileModalProps) {
  const getProfileContent = () => {
    // Sample profile content - in a real app this would come from the database
    const profiles: Record<string, any> = {
      "alex-karp": {
        summary: [
          "Co-founder and CEO of Palantir Technologies, a leading data analytics company",
          "Known for his outspoken views on artificial intelligence and data privacy",
          "Advocate for Western democratic values in technology and business practices"
        ],
        background: "Alexander Karp is an American billionaire businessman who co-founded Palantir Technologies in 2003. He earned a PhD in philosophy from Stanford University and a JD from Stanford Law School. Before Palantir, he worked as an investor and consultant.",
        highlights: [
          "Co-founded Palantir Technologies (2003)",
          "Led company through IPO in 2020",
          "Built partnerships with government agencies and enterprises",
          "Advocate for responsible AI development"
        ],
        achievements: [
          "Built Palantir into a multi-billion dollar company",
          "Recognized leader in big data and AI ethics",
          "Frequent speaker on technology and society"
        ]
      }
    };

    return profiles[outlet.slug] || {
      summary: [
        `Leading figure in the ${outlet.category} category`,
        `Influential voice in their respective field`,
        `Key contributor to industry developments`
      ],
      background: `${outlet.name} is a prominent entity in the ${outlet.category} space. ${outlet.description}`,
      highlights: [
        "Industry leadership",
        "Innovative contributions",
        "Market influence",
        "Thought leadership"
      ],
      achievements: [
        "Recognized expertise in their field",
        "Significant market impact",
        "Influential industry voice"
      ]
    };
  };

  const profile = getProfileContent();

  const getProfileImage = () => {
    if (outlet.imageUrl) return outlet.imageUrl;
    
    // Default professional images
    if (outlet.category === "people") {
      return "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&w=120&h=120&fit=crop&crop=face";
    }
    return null;
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto" data-testid="modal-profile">
        <DialogHeader>
          <DialogTitle>Profile Information</DialogTitle>
        </DialogHeader>
        
        <div className="p-6">
          <div className="text-center mb-6">
            {getProfileImage() ? (
              <img 
                src={getProfileImage()!} 
                alt={`${outlet.name} Profile`} 
                className="w-24 h-24 rounded-full mx-auto mb-4 object-cover cursor-pointer hover:scale-105 transition-transform"
                onClick={() => window.open(getProfileImage()!, '_blank')}
                data-testid="img-profile-large"
              />
            ) : (
              <div className="w-24 h-24 bg-primary/20 rounded-full mx-auto mb-4 flex items-center justify-center">
                <span className="text-primary font-bold text-2xl">
                  {outlet.name.charAt(0)}
                </span>
              </div>
            )}
            <h3 className="text-xl font-bold">{outlet.name}</h3>
            <p className="text-muted-foreground">{outlet.description}</p>
          </div>
          
          <div className="bg-muted rounded-lg p-4 mb-6">
            <h4 className="font-semibold mb-2">3-Line Summary</h4>
            <ul className="text-sm space-y-1">
              {profile.summary.map((line: string, index: number) => (
                <li key={index}>• {line}</li>
              ))}
            </ul>
          </div>
          
          <div className="space-y-4">
            <div>
              <h4 className="font-semibold mb-2">Background</h4>
              <p className="text-sm text-muted-foreground">
                {profile.background}
              </p>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2">Key Highlights</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                {profile.highlights.map((highlight: string, index: number) => (
                  <li key={index}>• {highlight}</li>
                ))}
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold mb-2">Achievements</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                {profile.achievements.map((achievement: string, index: number) => (
                  <li key={index}>• {achievement}</li>
                ))}
              </ul>
            </div>
          </div>

          <div className="mt-6 flex justify-center">
            <Button onClick={onClose} data-testid="button-close-profile">
              Close
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}