"use client";

import type {
  Dispatch,
  SetStateAction,
} from "react";

import {
  Alert,
  Box,
  Button,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  Paper,
} from "@mui/material";

import {
  getTranslationModuleLabel,
} from "../constants/translation-modules";

import type {
  TranslationPageGroup,
} from "../hook/use-translation-page-groups";

import type {
  Translation,
} from "../types/translation-types";

type PageDeleteProps = {
  target: TranslationPageGroup | null;
  deleting: boolean;
  locale: "en" | "km";
  appFontFamily: string;
  pageText: {
    deletePageTitle: string;
    deletePageConfirm: string;
    deletingPage: string;
    deletePage: string;
  };
  cancelLabel: string;
  setTarget: Dispatch<
    SetStateAction<TranslationPageGroup | null>
  >;
  onDelete: () => void;
};

export function TranslationManagementDeletePageDialog({
  target,
  deleting,
  locale,
  appFontFamily,
  pageText,
  cancelLabel,
  setTarget,
  onDelete,
}: PageDeleteProps) {
  return (
    <Dialog
      open={Boolean(target)}
      onClose={
        deleting
          ? undefined
          : () => setTarget(null)
      }
      fullWidth
      maxWidth="xs"
      slotProps={{
        paper: {
          sx: {
            borderRadius: 3,
            fontFamily:
              appFontFamily,
          },
        },
      }}
    >
      <DialogTitle
        sx={{
          fontWeight: 800,
          color: "error.main",
          fontFamily:
            appFontFamily,
        }}
      >
        {pageText.deletePageTitle}
      </DialogTitle>

      <Divider />

      <DialogContent>
        <Box
          component="p"
          sx={{
            mt: 0,
            mb: 2,
            lineHeight: 1.7,
          }}
        >
          {pageText.deletePageConfirm}
        </Box>

        {target ? (
          <Paper
            variant="outlined"
            sx={{
              p: 2,
              borderRadius: 2,
            }}
          >
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                flexWrap: "wrap",
                gap: 1,
              }}
            >
              <Chip
                size="small"
                label={getTranslationModuleLabel(
                  target.module,
                )}
                color="primary"
                variant="outlined"
              />

              <Chip
                size="small"
                label={target.page}
                variant="outlined"
              />

              <Chip
                size="small"
                label={`${target.labelCount} Labels`}
                variant="outlined"
              />
            </Box>
          </Paper>
        ) : null}

        <Alert
          severity="warning"
          sx={{
            mt: 2,
            fontFamily:
              appFontFamily,
          }}
        >
          {locale === "km"
            ? "ការលុប Page នឹងលុប Label ទាំងអស់ដែលស្ថិតក្នុង Page នេះ។"
            : "Deleting this page will permanently delete every label inside it."}
        </Alert>
      </DialogContent>

      <DialogActions
        sx={{
          p: 2,
          gap: 1,
        }}
      >
        <Button
          variant="outlined"
          disabled={deleting}
          onClick={() =>
            setTarget(null)
          }
          sx={{
            minWidth: 100,
            textTransform: "none",
          }}
        >
          {cancelLabel}
        </Button>

        <Button
          variant="contained"
          color="error"
          disabled={deleting}
          onClick={onDelete}
          sx={{
            minWidth: 120,
            textTransform: "none",
            fontWeight: 700,
          }}
        >
          {deleting
            ? pageText.deletingPage
            : pageText.deletePage}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

type LabelDeleteProps = {
  target: Translation | null;
  deleting: boolean;
  pageText: {
    deleteLabel: string;
    deleteConfirm: string;
    deleting: string;
  };
  cancelLabel: string;
  setTarget: Dispatch<
    SetStateAction<Translation | null>
  >;
  onDelete: () => void;
};

export function TranslationManagementDeleteLabelDialog({
  target,
  deleting,
  pageText,
  cancelLabel,
  setTarget,
  onDelete,
}: LabelDeleteProps) {
  return (
    <Dialog
      open={Boolean(target)}
      onClose={
        deleting
          ? undefined
          : () => setTarget(null)
      }
      fullWidth
      maxWidth="xs"
    >
      <DialogTitle
        sx={{
          fontWeight: 800,
          color: "error.main",
        }}
      >
        {pageText.deleteLabel}
      </DialogTitle>

      <DialogContent>
        <Box
          component="p"
          sx={{ mt: 1, mb: 0 }}
        >
          {pageText.deleteConfirm}
        </Box>
      </DialogContent>

      <DialogActions sx={{ p: 2 }}>
        <Button
          variant="outlined"
          disabled={deleting}
          onClick={() =>
            setTarget(null)
          }
          sx={{
            textTransform: "none",
          }}
        >
          {cancelLabel}
        </Button>

        <Button
          variant="contained"
          color="error"
          disabled={deleting}
          onClick={onDelete}
          sx={{
            minWidth: 110,
            textTransform: "none",
          }}
        >
          {deleting
            ? pageText.deleting
            : pageText.deleteLabel}
        </Button>
      </DialogActions>
    </Dialog>
  );
}