"use client";

import { ReactNode, useState } from "react";
import { Accordion, AccordionItem, Chip, Selection } from "@nextui-org/react";
import { FaCheck, FaXmark } from "react-icons/fa6";

import {
  CriteriaGroup,
  Criteria,
} from "@/types/participant-list/provisional-types";
import CriteriaRowItem from "@/components/pages/client/participant-list/overview/partials/criteria-row-item";

type OverviewProps = {
  variant: "overview";
  groups: Criteria[];
};

type DetailProps = {
  variant: "detail";
  groups: CriteriaGroup[];
};

type CriteriaAccordionProps = (OverviewProps | DetailProps) & {
  // Rendered to the right of the expand/collapse toggle, e.g. a download button.
  topContent?: ReactNode;
};

const BADGE_STYLES: Record<
  CriteriaGroup["badge"],
  { base: string; label: string }
> = {
  met: {
    base: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400",
    label: "Met",
  },
  partial: {
    base: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400",
    label: "Partial",
  },
};

function CriteriaAccordion(props: CriteriaAccordionProps) {
  const allKeys = props.groups.map((group) => String(group.id));
  const [expandedKeys, setExpandedKeys] = useState<Selection>(
    new Set(allKeys.slice(0, 1)),
  );

  const allExpanded =
    expandedKeys === "all"
      ? true
      : allKeys.length > 0 && allKeys.every((key) => expandedKeys.has(key));

  const handleToggleAll = () => {
    setExpandedKeys(allExpanded ? new Set() : new Set(allKeys));
  };

  return (
    <div>
      <div className="flex items-center justify-end gap-4 pb-2">
        <button
          className="text-xs font-semibold text-gray-500 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white transition-colors"
          type="button"
          onClick={handleToggleAll}
        >
          {allExpanded ? "Collapse all" : "Expand all"}
        </button>
        {props.topContent}
      </div>
      <Accordion
        className="!px-0 !gap-3"
        selectedKeys={expandedKeys}
        selectionMode="multiple"
        variant="splitted"
        onSelectionChange={setExpandedKeys}
      >
        {props.variant === "overview"
          ? props.groups.map((group) => (
              <AccordionItem
                key={String(group.id)}
                aria-label={group.name}
                classNames={{
                  base: "bg-gray-100 dark:bg-neutral-800 shadow-none",
                  title: "text-sm font-semibold",
                  trigger: "py-3 px-4",
                  content: "px-4 pb-4 pt-0",
                }}
                title={
                  <div className="flex items-center gap-2">
                    {group.name}
                    {group.isRequired && (
                      <Chip
                        classNames={{
                          base: "bg-midnightBlue text-white text-[10px] h-5",
                        }}
                        size="sm"
                      >
                        Required
                      </Chip>
                    )}
                  </div>
                }
              >
                <div className="space-y-3">
                  {group.rows.map((row, index) => (
                    <CriteriaRowItem
                      key={`${group.id}-${index}-${row.label}`}
                      row={row}
                    />
                  ))}
                </div>
              </AccordionItem>
            ))
          : props.groups.map((group) => {
              const badgeStyle = BADGE_STYLES[group.badge];

              return (
                <AccordionItem
                  key={group.id}
                  aria-label={group.name}
                  classNames={{
                    base: "bg-gray-100 dark:bg-neutral-800 shadow-none",
                    title: "text-sm font-semibold",
                    trigger: "py-3 px-4",
                    content: "px-4 pb-4 pt-0",
                  }}
                  title={
                    <div className="flex items-center gap-2">
                      {group.name}
                      <Chip
                        classNames={{
                          base: `${badgeStyle.base} border-0 text-[10px] h-5`,
                          content: "px-1 font-semibold",
                        }}
                        size="sm"
                      >
                        {badgeStyle.label}
                      </Chip>
                    </div>
                  }
                >
                  <div className="space-y-3">
                    {group.rows.map((row, index) => (
                      <div
                        key={`${group.id}-${index}-${row.question}`}
                        className="flex items-start gap-3"
                      >
                        <div className="mt-0.5">
                          {row.met ? (
                            <FaCheck className="size-3.5 text-emerald-500" />
                          ) : (
                            <FaXmark className="size-3.5 text-red-500" />
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs text-gray-500 dark:text-neutral-400">
                            {row.question}
                          </p>
                          <p className="text-sm text-gray-900 dark:text-white mt-0.5">
                            {row.answer}
                          </p>
                          {row.notes?.map((note) => (
                            <p
                              key={note}
                              className="mt-2 rounded-md bg-sky-50 px-2 py-1.5 text-xs text-gray-700 dark:bg-sky-950/30 dark:text-neutral-300"
                            >
                              <span className="font-semibold">PFR note:</span>{" "}
                              {note}
                            </p>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </AccordionItem>
              );
            })}
      </Accordion>
    </div>
  );
}

export default CriteriaAccordion;