import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { format } from "date-fns";
import { MessageSquare, Users } from "lucide-react";

export default function ConversationList({ conversations, selectedId, onSelect }) {
  const getTypeColor = (type) => {
    const colors = {
      "client-vendor": "bg-purple-100 text-purple-700",
      "staff-client": "bg-blue-100 text-blue-700",
      "staff-admin": "bg-slate-100 text-slate-700",
      "vendor-admin": "bg-amber-100 text-amber-700",
      "client-admin": "bg-green-100 text-green-700",
      "group-staff": "bg-indigo-100 text-indigo-700",
      "group-event-staff": "bg-pink-100 text-pink-700"
    };
    return colors[type] || "bg-slate-100 text-slate-700";
  };

  if (conversations.length === 0) {
    return (
      <div className="text-center py-12">
        <MessageSquare className="w-12 h-12 mx-auto text-slate-300 mb-3" />
        <p className="text-slate-500">No conversations yet</p>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {conversations.map((conversation) => {
        const isSelected = conversation.id === selectedId;
        const otherParticipant = conversation.participants?.[1] || conversation.participants?.[0] || {};
        const isGroup = conversation.is_group;
        
        return (
          <Card
            key={conversation.id}
            className={`cursor-pointer transition-all hover:shadow-md ${
              isSelected ? 'border-[#0A39DF] border-2 bg-blue-50' : 'border-slate-200'
            }`}
            onClick={() => onSelect(conversation)}
          >
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                {isGroup ? (
                  <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
                    <Users className="w-5 h-5 text-white" />
                  </div>
                ) : (
                  <Avatar className="w-10 h-10">
                    <AvatarFallback className="bg-[#0A39DF] text-white font-bold">
                      {otherParticipant.name?.charAt(0) || '?'}
                    </AvatarFallback>
                  </Avatar>
                )}
                
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between mb-1">
                    <div className="flex-1 min-w-0">
                      <h4 className="font-semibold text-slate-900 truncate">
                        {isGroup ? conversation.group_name : conversation.subject || otherParticipant.name || "Conversation"}
                      </h4>
                      <div className="flex items-center gap-2 mt-1 flex-wrap">
                        {isGroup && (
                          <Badge variant="outline" className="text-xs bg-purple-50 text-purple-700 border-purple-200">
                            <Users className="w-3 h-3 mr-1" />
                            {conversation.participants?.length || 0} members
                          </Badge>
                        )}
                        <Badge variant="outline" className={`text-xs ${getTypeColor(conversation.conversation_type)}`}>
                          {conversation.conversation_type?.replace('-', ' → ').replace('group-', '')}
                        </Badge>
                        {conversation.related_type && (
                          <Badge variant="outline" className="text-xs">
                            {conversation.related_type}
                          </Badge>
                        )}
                      </div>
                    </div>
                    
                    {conversation.unread_count > 0 && (
                      <Badge className="bg-red-500 text-white ml-2">
                        {conversation.unread_count}
                      </Badge>
                    )}
                  </div>
                  
                  <p className="text-sm text-slate-600 truncate mt-2">
                    {conversation.last_message || "No messages yet"}
                  </p>
                  
                  {conversation.last_message_at && (
                    <p className="text-xs text-slate-400 mt-1">
                      {format(new Date(conversation.last_message_at), "MMM d, h:mm a")}
                    </p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}