import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/react";
import { FaUndo } from "react-icons/fa";

import Button from "@/components/common/button";

type SurveyPreviewModalProps = {
  isOpen: boolean;
  sandboxPreviewData: any;
  onClose: () => void;
  onClickReset: () => void;
};

function SurveyPreviewModal({
  isOpen,
  sandboxPreviewData,
  onClose,
  onClickReset,
}: SurveyPreviewModalProps) {
  const tableData = Object.entries(sandboxPreviewData).map(
    ([question, answer], index) => ({
      key: index.toString(),
      question,
      answer,
    })
  );

  const renderAnswer = (answer: any) => {
    if (Array.isArray(answer)) {
      return (
        <ul className="list-disc list-inside">
          {answer.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
        </ul>
      );
    }

    if (answer === null || answer === undefined) {
      return <span className="italic text-gray-400">No answer provided</span>;
    }

    return answer;
  };

  return (
    <Modal
      isKeyboardDismissDisabled
      backdrop="blur"
      className="p-4"
      isDismissable={false}
      isOpen={isOpen}
      scrollBehavior="inside"
      size="4xl"
      onClose={onClose}
    >
      <ModalContent>
        <ModalHeader>
          <h4 className="inline-flex font-inter items-center font-black text-xl tracking-tight">
            Survey output preview
          </h4>
        </ModalHeader>
        <ModalBody>
          <Table
            isStriped
            aria-label="Survey response preview"
            classNames={{
              td: "text-sm",
              th: "text-xs font-bold text-black dark:text-white",
              wrapper: "shadow-none p-0 pt-2",
            }}
          >
            <TableHeader>
              <TableColumn className="font-inter font-semibold">
                Question
              </TableColumn>
              <TableColumn className="font-inter font-semibold">
                Answer
              </TableColumn>
            </TableHeader>
            <TableBody>
              {tableData.map((row) => (
                <TableRow key={row.key}>
                  <TableCell className="font-inter font-medium align-top">
                    {row.question}
                  </TableCell>
                  <TableCell className="font-noto">
                    {renderAnswer(row.answer)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </ModalBody>
        <ModalFooter className="w-full flex flex-row space-x-4">
          <Button
            fullWidth
            customVariant="primary"
            startContent={<FaUndo />}
            onClick={onClickReset}
          >
            Reset survey
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default SurveyPreviewModal;