import React from "react";
import {
  Box,
  Table,
  Link,
  Flex,
  IconButton,
  Text,
  Spinner,
  Badge,
  VStack,
} from "@chakra-ui/react";
import { LuLink } from "react-icons/lu";
import type { components } from "../../../reflector-api";
import {
  useRoomActiveMeetings,
  useRoomUpcomingMeetings,
} from "../../../lib/apiHooks";

type Room = components["schemas"]["Room"];
type Meeting = components["schemas"]["Meeting"];
type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
import { RoomActionsMenu } from "./RoomActionsMenu";

interface RoomTableProps {
  rooms: Room[];
  linkCopied: string;
  onCopyUrl: (roomName: string) => void;
  onEdit: (roomId: string, roomData: any) => void;
  onDelete: (roomId: string) => void;
  loading?: boolean;
}

const getRoomModeDisplay = (mode: string): string => {
  switch (mode) {
    case "normal":
      return "2-4 people";
    case "group":
      return "2-200 people";
    default:
      return mode;
  }
};

const getRecordingDisplay = (type: string, trigger: string): string => {
  if (type === "none") return "-";
  if (type === "local") return "Local";
  if (type === "cloud") {
    switch (trigger) {
      case "none":
        return "Cloud (None)";
      case "prompt":
        return "Cloud (Prompt)";
      case "automatic-2nd-participant":
        return "Cloud (Auto)";
      default:
        return `Cloud (${trigger})`;
    }
  }
  return type;
};

const getZulipDisplay = (
  autoPost: boolean,
  stream: string,
  topic: string,
): string => {
  if (!autoPost) return "-";
  if (stream && topic) return `${stream} > ${topic}`;
  if (stream) return stream;
  return "Enabled";
};

function MeetingStatus({ roomName }: { roomName: string }) {
  const activeMeetingsQuery = useRoomActiveMeetings(roomName);
  const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);

  const activeMeetings = activeMeetingsQuery.data || [];
  const upcomingMeetings = upcomingMeetingsQuery.data || [];

  if (activeMeetingsQuery.isLoading || upcomingMeetingsQuery.isLoading) {
    return <Spinner size="sm" />;
  }

  if (activeMeetings.length > 0) {
    const meeting = activeMeetings[0];
    const title = (meeting.calendar_metadata as any)?.title || "Active Meeting";
    return (
      <VStack gap={1} alignItems="start">
        <Badge colorScheme="green" size="sm">
          Active
        </Badge>
        <Text fontSize="xs" color="gray.600" lineHeight={1}>
          {title}
        </Text>
        <Text fontSize="xs" color="gray.500" lineHeight={1}>
          {meeting.num_clients} participants
        </Text>
      </VStack>
    );
  }

  if (upcomingMeetings.length > 0) {
    const event = upcomingMeetings[0];
    const startTime = new Date(event.start_time);
    const now = new Date();
    const diffMinutes = Math.floor(
      (startTime.getTime() - now.getTime()) / 60000,
    );

    return (
      <VStack gap={1} alignItems="start">
        <Badge colorScheme="orange" size="sm">
          {diffMinutes < 60 ? `In ${diffMinutes}m` : "Upcoming"}
        </Badge>
        <Text fontSize="xs" color="gray.600" lineHeight={1}>
          {event.title || "Scheduled Meeting"}
        </Text>
        <Text fontSize="xs" color="gray.500" lineHeight={1}>
          {startTime.toLocaleTimeString("en-US", {
            hour: "2-digit",
            minute: "2-digit",
            month: "short",
            day: "numeric",
          })}
        </Text>
      </VStack>
    );
  }

  return (
    <Text fontSize="xs" color="gray.500">
      No meetings
    </Text>
  );
}

export function RoomTable({
  rooms,
  linkCopied,
  onCopyUrl,
  onEdit,
  onDelete,
  loading,
}: RoomTableProps) {
  return (
    <Box display={{ base: "none", lg: "block" }} position="relative">
      {loading && (
        <Flex
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          align="center"
          justify="center"
        >
          <Spinner size="xl" color="gray.700" />
        </Flex>
      )}
      <Box
        opacity={loading ? 0.9 : 1}
        pointerEvents={loading ? "none" : "auto"}
        transition="opacity 0.2s ease-in-out"
      >
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader width="250px" fontWeight="600">
                Room Name
              </Table.ColumnHeader>
              <Table.ColumnHeader width="200px" fontWeight="600">
                Current Meeting
              </Table.ColumnHeader>
              <Table.ColumnHeader width="200px" fontWeight="600">
                Zulip
              </Table.ColumnHeader>
              <Table.ColumnHeader width="120px" fontWeight="600">
                Room Size
              </Table.ColumnHeader>
              <Table.ColumnHeader width="150px" fontWeight="600">
                Recording
              </Table.ColumnHeader>
              <Table.ColumnHeader
                width="100px"
                fontWeight="600"
              ></Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {rooms.map((room) => (
              <Table.Row key={room.id}>
                <Table.Cell>
                  <Link href={`/${room.name}`}>{room.name}</Link>
                </Table.Cell>
                <Table.Cell>
                  <MeetingStatus roomName={room.name} />
                </Table.Cell>
                <Table.Cell>
                  {getZulipDisplay(
                    room.zulip_auto_post,
                    room.zulip_stream,
                    room.zulip_topic,
                  )}
                </Table.Cell>
                <Table.Cell>{getRoomModeDisplay(room.room_mode)}</Table.Cell>
                <Table.Cell>
                  {getRecordingDisplay(
                    room.recording_type,
                    room.recording_trigger,
                  )}
                </Table.Cell>
                <Table.Cell>
                  <Flex alignItems="center" gap={2}>
                    {linkCopied === room.name ? (
                      <Text color="green.500" fontSize="sm">
                        Copied!
                      </Text>
                    ) : (
                      <IconButton
                        aria-label="Copy URL"
                        onClick={() => onCopyUrl(room.name)}
                        size="sm"
                        variant="ghost"
                      >
                        <LuLink />
                      </IconButton>
                    )}
                    <RoomActionsMenu
                      roomId={room.id}
                      roomData={room}
                      onEdit={onEdit}
                      onDelete={onDelete}
                    />
                  </Flex>
                </Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table.Root>
      </Box>
    </Box>
  );
}