"use client";

import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Divider from "@mui/material/Divider";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

import { AppCancelButton } from "@/components/ui/button";
import type { Permission, RoleDetail } from "@/features/role/role-data";

type RoleViewDialogProps = {
  open: boolean;
  role: RoleDetail | null;
  loading: boolean;
  error: string | null;
  onClose: () => void;
};

type PermissionGroup = {
  subject: string;
  permissions: Permission[];
};

const ACTION_LABELS: Record<string, string> = {
  read: "View",
  create: "Create",
  update: "Update",
  delete: "Delete",
  export: "Export",
  manage: "Full access",
};

function formatWords(value: string) {
  return value
    .replace(/_/g, " ")
    .split(" ")
    .filter(Boolean)
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
}

function parsePermissionName(permissionName: string) {
  const parts = permissionName.trim().split(/\s+/);
  const action = parts[0] ?? "";
  const subject = parts.slice(1).join(" ") || "all";

  return { action, subject };
}

function getPermissionActionLabel(permissionName: string) {
  const { action } = parsePermissionName(permissionName);

  return ACTION_LABELS[action] ?? formatWords(action);
}

function groupPermissionsBySubject(permissions: Permission[]) {
  const groupsBySubject = new Map<string, Permission[]>();

  for (const permission of permissions) {
    const { subject } = parsePermissionName(permission.name);
    const group = groupsBySubject.get(subject) ?? [];

    group.push(permission);
    groupsBySubject.set(subject, group);
  }

  return Array.from(groupsBySubject.entries())
    .map(([subject, groupPermissions]) => ({
      subject,
      permissions: groupPermissions,
    }))
    .sort((firstGroup, secondGroup) => {
      if (firstGroup.subject === "all") return -1;
      if (secondGroup.subject === "all") return 1;

      return firstGroup.subject.localeCompare(secondGroup.subject);
    });
}

function PermissionGroupList({ groups }: { groups: PermissionGroup[] }) {
  if (groups.length === 0) {
    return (
      <Typography sx={{ color: "text.secondary", py: 2 }}>
        No permissions assigned to this role.
      </Typography>
    );
  }

  return (
    <Stack spacing={1.5}>
      {groups.map((group) => (
        <Box
          key={group.subject}
          sx={{
            border: "1px solid #e5e7eb",
            borderRadius: 2,
            p: 1.5,
          }}
        >
          <Typography sx={{ fontSize: 14, fontWeight: 700, mb: 1 }}>
            {group.subject === "all" ? "All Resources" : group.subject}
          </Typography>
          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
            {group.permissions.map((permission) => (
              <Chip
                key={permission.id}
                label={getPermissionActionLabel(permission.name)}
                size="small"
                color={permission.name === "manage all" ? "primary" : "default"}
                variant={
                  permission.name === "manage all" ? "filled" : "outlined"
                }
                sx={{ fontWeight: 600 }}
              />
            ))}
          </Box>
        </Box>
      ))}
    </Stack>
  );
}

export function RoleViewDialog({
  open,
  role,
  loading,
  error,
  onClose,
}: RoleViewDialogProps) {
  const permissionGroups = role
    ? groupPermissionsBySubject(role.permissions)
    : [];

  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
      <DialogTitle sx={{ fontSize: 24, fontWeight: 800 }}>
        Role Detail
      </DialogTitle>

      <DialogContent dividers>
        {loading ? (
          <Box sx={{ display: "flex", justifyContent: "center", py: 5 }}>
            <CircularProgress />
          </Box>
        ) : error ? (
          <Alert severity="error">{error}</Alert>
        ) : role ? (
          <Stack spacing={2.5}>
            <Box
              sx={{
                display: "grid",
                gridTemplateColumns: { xs: "1fr", sm: "repeat(3, 1fr)" },
                gap: 2,
              }}
            >
              <Box>
                <Typography sx={{ fontSize: 13, color: "text.secondary" }}>
                  Role Name
                </Typography>
                <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                  {formatWords(role.name)}
                </Typography>
              </Box>

              <Box>
                <Typography sx={{ fontSize: 13, color: "text.secondary" }}>
                  Guard Name
                </Typography>
                <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                  {formatWords(role.guardName)}
                </Typography>
              </Box>

              <Box>
                <Typography sx={{ fontSize: 13, color: "text.secondary" }}>
                  Permissions
                </Typography>
                <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                  {role.permissions.length}
                </Typography>
              </Box>
            </Box>

            <Divider />

            <Box>
              <Typography sx={{ fontSize: 16, fontWeight: 800, mb: 1 }}>
                Assigned Permissions
              </Typography>
              <PermissionGroupList groups={permissionGroups} />
            </Box>
          </Stack>
        ) : null}
      </DialogContent>

      <DialogActions sx={{ px: 3, py: 2 }}>
        <AppCancelButton onClick={onClose}>Close</AppCancelButton>
      </DialogActions>
    </Dialog>
  );
}