import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Users } from "lucide-react";
import { getInitials } from "@/lib/utils";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";

interface ParticipantsTabProps {
  meeting: AdminMeetingDetail;
}

export function ParticipantsTab({ meeting }: ParticipantsTabProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <Users className="h-4 w-4 text-red-500" />
          Participant details
        </CardTitle>
      </CardHeader>
      <CardContent className="overflow-x-auto">
        {meeting.participants.length > 0 ? (
          <table className="w-full min-w-[760px] text-left text-sm">
            <thead className="border-b border-gray-200 text-xs uppercase text-gray-500 dark:border-gray-800 dark:text-gray-400">
              <tr>
                <th className="py-3 pr-4 font-semibold">Name</th>
                <th className="py-3 pr-4 font-semibold">Role</th>
                <th className="py-3 pr-4 font-semibold">Joined</th>
                <th className="py-3 pr-4 font-semibold">Left</th>
                <th className="py-3 pr-4 font-semibold">Talk time</th>
                <th className="py-3 font-semibold">Sentiment</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
              {meeting.participants.map((participant) => (
                <tr key={participant.email}>
                  <td className="py-3 pr-4">
                    <div className="flex items-center gap-2.5">
                      <Avatar className="h-8 w-8">
                        <AvatarFallback className="text-xs">{getInitials(participant.name)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-medium text-gray-900 dark:text-gray-100">{participant.name}</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">{participant.email}</p>
                      </div>
                    </div>
                  </td>
                  <td className="py-3 pr-4 capitalize">{participant.role}</td>
                  <td className="py-3 pr-4">{participant.join_time}</td>
                  <td className="py-3 pr-4">{participant.leave_time}</td>
                  <td className="py-3 pr-4">{participant.talk_time}</td>
                  <td className="py-3 capitalize">{participant.sentiment}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="text-sm text-gray-500 dark:text-gray-400 italic py-4 text-center">No participants recorded.</p>
        )}
      </CardContent>
    </Card>
  );
}