import Button from "@mui/material/Button";
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 MenuItem from "@mui/material/MenuItem";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from "react";
import { ExternalImageUploadField } from "../shared/ExternalImageUploadField.jsx";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";

export function UserEditDialog({ loading, onClose, onSubmit, open, user }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState(emptyEditForm);
  useEffect(() => {
    setForm({ avatar: user?.avatar || "", country: user?.country || "", gender: user?.gender || "", username: user?.username || "" });
  }, [user]);
  return (
    <BaseDialog loading={loading} open={open} title={t("users.editTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
      <ExternalImageUploadField disabled={loading} label={t("users.avatar")} value={form.avatar} onChange={(avatar) => setForm({ ...form, avatar })} />
      <TextField disabled={loading} label={t("users.name")} required value={form.username} onChange={(event) => setForm({ ...form, username: event.target.value })} />
      <TextField disabled={loading} label={t("users.gender")} select value={form.gender} onChange={(event) => setForm({ ...form, gender: event.target.value })}>
        <MenuItem value="">{t("users.notSet")}</MenuItem><MenuItem value="male">{t("users.genderMale")}</MenuItem><MenuItem value="female">{t("users.genderFemale")}</MenuItem><MenuItem value="unknown">{t("users.genderUnknown")}</MenuItem>
      </TextField>
      <TextField disabled={loading} label={t("users.countryCode")} value={form.country} onChange={(event) => setForm({ ...form, country: event.target.value.trim().toUpperCase() })} />
    </BaseDialog>
  );
}

export function UserBanDialog({ loading, onClose, onSubmit, open, user }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState({ days: "7", reason: "" });
  useEffect(() => setForm({ days: "7", reason: "" }), [user]);
  return (
    <BaseDialog loading={loading} open={open} title={t("users.banTitle", { user: user?.prettyId || user?.username || "" })} onClose={onClose} onSubmit={() => onSubmit(form)}>
      <TextField disabled={loading} helperText={t("users.banForeverHint")} label={t("users.banDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.days} onChange={(event) => setForm({ ...form, days: event.target.value })} />
      <TextField disabled={loading} label={t("users.banReason")} minRows={3} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
    </BaseDialog>
  );
}

export function UserLevelDialog({ loading, onClose, onSubmit, open, user }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState({ days: "30", level: "", reason: "", track: "wealth" });
  useEffect(() => setForm({ days: "30", level: "", reason: "", track: "wealth" }), [user]);
  return (
    <BaseDialog loading={loading} open={open} title={t("users.levelTitle", { user: user?.prettyId || user?.username || "" })} onClose={onClose} onSubmit={() => onSubmit(form)}>
      <TextField disabled={loading} label={t("users.levelType")} select value={form.track} onChange={(event) => setForm({ ...form, track: event.target.value })}><MenuItem value="wealth">{t("users.wealthLevel")}</MenuItem><MenuItem value="charm">{t("users.charmLevel")}</MenuItem><MenuItem value="vip">{t("users.vipLevel")}</MenuItem></TextField>
      <TextField disabled={loading} label={t("users.level")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.level} onChange={(event) => setForm({ ...form, level: event.target.value })} />
      <TextField disabled={loading} helperText={t("users.validDaysMin")} label={t("users.validDays")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.days} onChange={(event) => setForm({ ...form, days: event.target.value })} />
      <TextField disabled={loading} label={t("users.grantReason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
    </BaseDialog>
  );
}

function BaseDialog({ children, loading, onClose, onSubmit, open, title }) {
  const { t } = useExternalI18n();
  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit();
  };
  return (
    <Dialog fullWidth maxWidth="sm" open={open} onClose={loading ? undefined : onClose}>
      <Stack component="form" onSubmit={handleSubmit}>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent><Stack className="external-dialog-fields" spacing={2}>{children}</Stack></DialogContent>
        <DialogActions><Button disabled={loading} onClick={onClose}>{t("common.cancel")}</Button><Button disabled={loading} type="submit" variant="contained">{t("common.confirm")}</Button></DialogActions>
      </Stack>
    </Dialog>
  );
}

const emptyEditForm = { avatar: "", country: "", gender: "", username: "" };