"use client";

import { useMemo, useState } from "react";

import Alert from "@mui/material/Alert";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { AppButton, AppCancelButton } from "@/components/ui/button";
import { AppFormField, getFormBorderColor } from "@/components/ui/form";
import { AppSelect, type AppSelectOption } from "@/components/ui/select";
import type {
  Stakeholder,
  StakeholderUser,
} from "@/features/stakeholder/stakeholder-data";

type AddStakeholderUserDialogProps = {
  stakeholder: Stakeholder;
  users: StakeholderUser[];
  memberUserIds: number[];
  isLoadingUsers: boolean;
  isSaving: boolean;
  onClose: () => void;
  onSubmit: (stakeholderId: number, userId: number) => Promise<boolean>;
};

function getUserName(user: StakeholderUser) {
  return user.name?.trim() || user.email || `User #${user.id}`;
}

function getUserInitial(user: StakeholderUser) {
  return getUserName(user).charAt(0).toUpperCase();
}

export function AddStakeholderUserDialog({
  stakeholder,
  users,
  memberUserIds,
  isLoadingUsers,
  isSaving,
  onClose,
  onSubmit,
}: AddStakeholderUserDialogProps) {
  const theme = useTheme();

  const [selectedUserId, setSelectedUserId] = useState("");
  const [formError, setFormError] = useState("");

  const borderColor = getFormBorderColor(theme);

  const availableUsers = useMemo(() => {
    const memberIds = new Set(memberUserIds);

    return users.filter((user) => {
      const userId = Number(user.id);

      return Number.isFinite(userId) && !memberIds.has(userId);
    });
  }, [memberUserIds, users]);

  const userOptions: AppSelectOption<StakeholderUser>[] = availableUsers.map(
    (user) => ({
      data: user,
      label: getUserName(user),
      value: String(user.id),
    }),
  );

  function handleUserChange(value: string) {
    setSelectedUserId(value);
    setFormError("");
  }

  function renderUserOption(option?: AppSelectOption<StakeholderUser>) {
    if (!option) {
      return "Select user";
    }

    const user = option.data;

    if (!user) {
      return option.label;
    }

    return (
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 1.25,
          minWidth: 0,
        }}
      >
        <Avatar
          src={user.avatar ?? undefined}
          sx={{ width: 30, height: 30, fontSize: 12 }}
        >
          {getUserInitial(user)}
        </Avatar>

        <Box sx={{ minWidth: 0 }}>
          <Typography noWrap sx={{ fontSize: 13, fontWeight: 700 }}>
            {getUserName(user)}
          </Typography>

          <Typography noWrap sx={{ color: "text.secondary", fontSize: 12 }}>
            {user.email ?? "-"}
          </Typography>
        </Box>
      </Box>
    );
  }

  async function handleSubmit() {
    const userId = Number(selectedUserId);

    if (!Number.isFinite(userId)) {
      setFormError("Please select a user.");
      return;
    }

    const saved = await onSubmit(stakeholder.id, userId);

    if (saved) {
      onClose();
    }
  }

  return (
    <Dialog
      open
      onClose={isSaving ? undefined : onClose}
      maxWidth={false}
      scroll="paper"
      sx={{
        "& .MuiBackdrop-root": {
          backgroundColor:
            theme.palette.mode === "dark"
              ? alpha("#000000", 0.72)
              : "rgba(0, 0, 0, 0.48)",
        },
        "& .MuiDialog-container": {
          justifyContent: "flex-end",
          alignItems: "flex-start",
        },
      }}
      slotProps={{
        paper: {
          sx: {
            mt: 0,
            mr: 0,
            width: { xs: "100vw", md: 560 },
            maxWidth: "calc(100vw - 16px)",
            maxHeight: "calc(100vh - 16px)",
            borderRadius: "10px",
            overflow: "hidden",
            bgcolor: theme.palette.background.paper,
            color: theme.palette.text.primary,
          },
        },
      }}
    >
      <Box
        sx={{
          px: 2.5,
          py: 2,
          borderBottom: `1px solid ${borderColor}`,
        }}
      >
        <Typography sx={{ fontSize: 20, fontWeight: 800 }}>
          Add User to Stakeholder
        </Typography>

        <Typography sx={{ mt: 0.75, color: "text.secondary", fontSize: 13 }}>
          {stakeholder.name}
        </Typography>
      </Box>

      <Box sx={{ px: 2.5, py: 2.5 }}>
        {isLoadingUsers ? (
          <Box
            sx={{
              minHeight: 160,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <CircularProgress size={28} />
          </Box>
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <AppFormField label="User" required>
              <AppSelect
                value={selectedUserId}
                onChange={handleUserChange}
                options={userOptions}
                disabled={availableUsers.length === 0 || isSaving}
                placeholder="Select user"
                renderOption={renderUserOption}
                renderSelectedValue={renderUserOption}
              />
            </AppFormField>

            {availableUsers.length === 0 ? (
              <Alert severity="info">
                All available users are already added to this stakeholder.
              </Alert>
            ) : null}

            {formError ? <Alert severity="error">{formError}</Alert> : null}
          </Box>
        )}
      </Box>

      <Box
        sx={{
          px: 2.5,
          py: 1.7,
          borderTop: `1px solid ${borderColor}`,
          display: "flex",
          justifyContent: "flex-end",
          gap: 2,
          bgcolor: theme.palette.background.paper,
        }}
      >
        <AppCancelButton
          onClick={onClose}
          disabled={isSaving}
          sx={{
            width: 120,
          }}
        >
          Cancel
        </AppCancelButton>

        <AppButton
          onClick={handleSubmit}
          disabled={isSaving || isLoadingUsers || availableUsers.length === 0}
          sx={{
            width: 140,
          }}
        >
          {isSaving ? "Adding..." : "Add User"}
        </AppButton>
      </Box>
    </Dialog>
  );
}