import { useRouter } from "next/navigation";
import { Clock, Eye } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { SimpleTooltip } from "@/components/ui/tooltip";
import {
  formatDate,
  cn,
  getMeetingStatusLabel,
  normalizeMeetingStatus,
  getInitials,
} from "@/lib/utils";
import { type AdminMeeting } from "@/lib/api/admin.api";
import { PLATFORM_CONFIG, STATUS_BADGE } from "./meetings-constants";

interface MeetingsTableProps {
  meetings: AdminMeeting[];
}

export function MeetingsTable({ meetings }: MeetingsTableProps) {
  const router = useRouter();

  return (
    <Table wrapperClassName="flex-1 min-h-0 h-full">
      <TableHeader className="sticky top-0 z-10 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-[0_1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)]">
        <TableRow>
          <TableHead className="font-semibold">Meeting Details</TableHead>
          <TableHead className="font-semibold">User</TableHead>
          <TableHead className="font-semibold">Platform</TableHead>
          <TableHead className="font-semibold">Call Date</TableHead>
          <TableHead className="font-semibold">Duration</TableHead>
          <TableHead className="font-semibold">Participants</TableHead>
          <TableHead className="font-semibold">Status</TableHead>
          <TableHead className="font-semibold text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {meetings.map((meeting) => {
          const platform = meeting.platform
            ? PLATFORM_CONFIG[meeting.platform]
            : null;
          const PlatformIcon = platform?.icon;
          const status = normalizeMeetingStatus(meeting.status);
          const badgeVariant = STATUS_BADGE[status] ?? "secondary";

          return (
            <TableRow
              key={meeting.meeting_id}
              className="cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/10"
              onClick={() =>
                router.push(`/admin/meetings/${meeting.meeting_id}`)
              }
            >
              <TableCell className="font-semibold max-w-[220px]">
                <div className="flex flex-col">
                  <span
                    className="text-gray-900 dark:text-gray-100 font-semibold truncate"
                    title={meeting.title}
                  >
                    {meeting.title || "Untitled meeting"}
                  </span>
                  {meeting.is_recurring && (
                    <span className="text-[10px] text-blue-500 dark:text-blue-400 font-medium mt-0.5">
                      Recurring
                    </span>
                  )}
                </div>
              </TableCell>
              <TableCell className="text-xs text-gray-500 dark:text-gray-400">
                <div className="flex flex-col">
                  <div className="flex items-center gap-1.5 flex-wrap">
                    <span className="font-semibold text-gray-900 dark:text-gray-100">
                      {meeting.user_name || "N/A"}
                    </span>
                    {meeting.is_guest && (
                      <Badge
                        variant="outline"
                        className="bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400 border border-amber-200/50 dark:border-amber-900/50 text-[10px] px-1.5 py-0 leading-none h-4 font-semibold shrink-0"
                      >
                        Guest
                      </Badge>
                    )}
                  </div>
                  <span className="text-[11px] text-gray-500 dark:text-gray-500 mt-0.5">
                    {meeting.user_email}
                  </span>
                </div>
              </TableCell>
              <TableCell>
                {platform && PlatformIcon ? (
                  <Badge
                    variant="secondary"
                    className={cn(
                      "inline-flex items-center gap-1 px-2.5 py-0.5 text-[10px] font-semibold rounded-full",
                      platform.bg,
                      platform.color,
                    )}
                  >
                    <PlatformIcon size={10} />
                    {platform.label}
                  </Badge>
                ) : (
                  <span className="text-gray-400">—</span>
                )}
              </TableCell>
              <TableCell className="text-xs text-gray-500 dark:text-gray-400">
                {formatDate(
                  meeting.scheduled_at || meeting.created_at || "",
                )}
              </TableCell>
              <TableCell className="text-xs text-gray-500 dark:text-gray-400">
                {meeting.recording_details &&
                meeting.recording_details.duration_seconds > 0 ? (
                  <span className="inline-flex items-center gap-1 font-medium">
                    <Clock className="h-3.5 w-3.5 text-gray-400" />
                    {meeting.recording_details.duration_formatted}
                  </span>
                ) : (
                  <span className="text-gray-400">—</span>
                )}
              </TableCell>
              <TableCell>
                {(() => {
                  const names = meeting.participants_details?.names ?? [];
                  const totalCount =
                    meeting.participants_details?.count ?? 0;

                  if (totalCount === 0) {
                    return <span className="text-gray-400">—</span>;
                  }

                  let displayNames = [...names];
                  if (displayNames.length === 0 && totalCount > 0) {
                    displayNames = Array.from({
                      length: Math.min(totalCount, 3),
                    }).map((_, i) => `Participant ${i + 1}`);
                  }

                  const visibleNames = displayNames.slice(0, 3);
                  const remainingCount = totalCount - visibleNames.length;

                  return (
                    <div className="flex -space-x-1.5 justify-start">
                      {visibleNames.map((name, i) => (
                        <SimpleTooltip key={i} content={name}>
                          <Avatar className="h-6 w-6 border-2 border-white dark:border-gray-900 shadow-sm shrink-0">
                            <AvatarFallback className="text-[9px] font-bold bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400 h-full w-full">
                              {getInitials(name)}
                            </AvatarFallback>
                          </Avatar>
                        </SimpleTooltip>
                      ))}
                      {remainingCount > 0 && (
                        <SimpleTooltip
                          content={`${remainingCount} more participant${remainingCount > 1 ? "s" : ""}`}
                        >
                          <Avatar className="h-6 w-6 border-2 border-white dark:border-gray-900 shadow-sm shrink-0">
                            <AvatarFallback className="text-[9px] font-bold bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 h-full w-full">
                              +{remainingCount}
                            </AvatarFallback>
                          </Avatar>
                        </SimpleTooltip>
                      )}
                    </div>
                  );
                })()}
              </TableCell>
              <TableCell>
                <Badge
                  variant={badgeVariant}
                  className="text-[10px] font-semibold"
                >
                  {getMeetingStatusLabel(meeting.status)}
                </Badge>
              </TableCell>
              <TableCell className="text-right">
                <div
                  className="flex items-center justify-end"
                  onClick={(e) => e.stopPropagation()}
                >
                  <SimpleTooltip content="View details">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() =>
                        router.push(
                          `/admin/meetings/${meeting.meeting_id}`,
                        )
                      }
                      className="h-8 w-8 p-0"
                    >
                      <Eye className="h-3.5 w-3.5" />
                      <span className="sr-only">Details</span>
                    </Button>
                  </SimpleTooltip>
                </div>
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}