"use client";

import { useState } from "react";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import type { CreateMeetingSummaryRequestItem } from "./create-meeting-summary-data";
import { MeetingRequestListItem } from "./meeting-request-list-item";

type Props = {
  title?: string;
  items: CreateMeetingSummaryRequestItem[];
  onConfirm?: (items: CreateMeetingSummaryRequestItem[]) => void;
  onClose?: () => void;
};

export function AllMeetingRequestsPanel({
  title = "All Meeting Requests",
  items,
  onConfirm,
  onClose,
}: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  const toggleItem = (id: number) => {
    setSelectedIds((current) =>
      current.includes(id)
        ? current.filter((item) => item !== id)
        : [...current, id],
    );
  };

  const handleConfirm = () => {
    const selectedItems = items.filter((item) => selectedIds.includes(item.id));
    onConfirm?.(selectedItems);
    onClose?.();
  };

  return (
    <Box
      sx={{
        width: "100%",
        height: "100%",
        minHeight: 0,
        bgcolor: isDark ? "#101828" : "#ffffff",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          flexShrink: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 1.5,
          px: "22px",
          pt: "22px",
          pb: "18px",
        }}
      >
        <Typography
          sx={{
            fontSize: 18,
            fontWeight: 500,
            color: isDark ? "#f3f4f6" : "#000000",
            letterSpacing: "-0.36px",
            lineHeight: 1,
          }}
        >
          {title}
        </Typography>

        <Button
          variant="contained"
          disabled={selectedIds.length === 0}
          onClick={handleConfirm}
          sx={{
            minHeight: 35,
            px: 1.5,
            borderRadius: "6px",
            bgcolor: "#1a64a8",
            color: "#edf8fd",
            boxShadow: "none",
            textTransform: "none",
            fontSize: 13,
            fontWeight: 500,
            lineHeight: 1,
            flexShrink: 0,
            "&:hover": {
              bgcolor: "#155489",
              boxShadow: "none",
            },
            "&.Mui-disabled": {
              bgcolor: alpha("#1a64a8", 0.4),
              color: alpha("#edf8fd", 0.7),
            },
          }}
        >
          Add now
        </Button>
      </Box>

      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          borderTop: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "#e9eaeb"}`,
          overflowY: "auto",
        }}
      >
        {items.map((item) => (
          <MeetingRequestListItem
            key={item.id}
            item={item}
            selected={selectedIds.includes(item.id)}
            onToggle={() => toggleItem(item.id)}
          />
        ))}
      </Box>
    </Box>
  );
}