import React, { useState } from "react";
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material";
import styles from "@/styles/modules/userManagement.module.css";
import {
  PlatformMatch,
  matchTypeLabel,
  shortMatchTypeLabel,
} from "@/utils/platformReview";

type Props = {
  matches?: PlatformMatch[] | null;
  /** Same chips + dialog; banner adds a bit more spacing */
  variant?: "table" | "banner";
};

const FlaggedMatchesCell = ({ matches, variant = "table" }: Props) => {
  const list = matches?.filter(Boolean) ?? [];
  const [activeMatch, setActiveMatch] = useState<PlatformMatch | null>(null);

  if (!list.length) {
    return (
      <span className={styles.flaggedMatchesEmpty}>
        {variant === "table" ? "—" : "Matching platform-suspension flag"}
      </span>
    );
  }

  const closeDialog = () => setActiveMatch(null);

  return (
    <>
      <div
        className={`${styles.flaggedChips} ${
          variant === "banner" ? styles.flaggedChipsBanner : ""
        }`}
      >
        {list.map((match, idx) => (
          <button
            key={`${match.type}-${match.value}-${idx}`}
            type="button"
            className={styles.flaggedChip}
            onClick={(e) => {
              e.stopPropagation();
              setActiveMatch(match);
            }}
            title={`View ${matchTypeLabel(match.type)} details`}
          >
            {shortMatchTypeLabel(match.type)}
          </button>
        ))}
      </div>

      <Dialog
        open={Boolean(activeMatch)}
        onClose={closeDialog}
        maxWidth="sm"
        fullWidth
        onClick={(e) => e.stopPropagation()}
      >
        <DialogTitle className={styles.flaggedDialogTitle}>
          {matchTypeLabel(activeMatch?.type)}
        </DialogTitle>
        <DialogContent className={styles.flaggedDialogContent}>
          <div className={styles.flaggedDialogField}>
            <span className={styles.flaggedDialogLabel}>Value</span>
            <code className={styles.flaggedDialogValue}>
              {activeMatch?.value || "—"}
            </code>
          </div>
          {activeMatch?.sourceEmail ? (
            <div className={styles.flaggedDialogField}>
              <span className={styles.flaggedDialogLabel}>Matched from</span>
              <span className={styles.flaggedDialogText}>
                {activeMatch.sourceEmail}
              </span>
            </div>
          ) : null}
          {activeMatch?.sourceUserId ? (
            <div className={styles.flaggedDialogField}>
              <span className={styles.flaggedDialogLabel}>Source user ID</span>
              <code className={styles.flaggedDialogValue}>
                {activeMatch.sourceUserId}
              </code>
            </div>
          ) : null}
        </DialogContent>
        <DialogActions>
          <Button onClick={closeDialog} variant="contained" color="primary">
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default FlaggedMatchesCell;