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 FormControlLabel from "@mui/material/FormControlLabel";
import InputAdornment from "@mui/material/InputAdornment";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import TextField from "@mui/material/TextField";
import { Button } from "@/shared/ui/Button.jsx";
import styles from "@/shared/ui/AdminFormDialog.module.css";

export function AdminFormDialog({
  children,
  disabled = false,
  loading = false,
  onClose,
  onSubmit,
  open,
  size = "standard",
  submitDisabled,
  submitLabel = "提交",
  submitVariant = "primary",
  title
}) {
  const isSubmitDisabled = submitDisabled ?? (disabled || loading);

  return (
    <Dialog
      className={[styles.dialog, styles[size] || styles.standard].join(" ")}
      maxWidth={false}
      open={open}
      onClose={onClose}
      slotProps={{ paper: { className: styles.paper } }}
    >
      <form className={styles.form} onSubmit={onSubmit}>
        <DialogTitle className={styles.title}>{title}</DialogTitle>
        <DialogContent className={styles.content}>{children}</DialogContent>
        <DialogActions className={styles.actions}>
          <Button disabled={loading} onClick={onClose}>取消</Button>
          <Button disabled={isSubmitDisabled} type="submit" variant={submitVariant}>
            {loading ? <CircularProgress color="inherit" size={16} /> : null}
            {submitLabel}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
}

export function AdminFormSection({ actions, children, title }) {
  return (
    <section className={styles.section}>
      {title || actions ? (
        <div className={styles.sectionHeader}>
          {title ? <div className={styles.sectionTitle}>{title}</div> : <span />}
          {actions ? <div className={styles.sectionActions}>{actions}</div> : null}
        </div>
      ) : null}
      {children}
    </section>
  );
}

export function AdminFormFieldGrid({ children, columns }) {
  return (
    <div className={styles.fieldGrid} style={columns ? { "--admin-form-grid-columns": columns } : undefined}>
      {children}
    </div>
  );
}

export function AdminFormSwitchField({
  checked,
  checkedLabel,
  className,
  disabled = false,
  label,
  onChange,
  switchProps,
  uncheckedLabel
}) {
  const hasInlineLabel = Boolean(checkedLabel || uncheckedLabel);
  const control = (
    <AdminSwitch
      {...switchProps}
      checked={checked}
      checkedLabel={checkedLabel}
      disabled={disabled}
      label={label}
      uncheckedLabel={uncheckedLabel}
      onChange={(event) => onChange(event.target.checked, event)}
    />
  );

  if (hasInlineLabel) {
    return <span className={[styles.switchField, className].filter(Boolean).join(" ")}>{control}</span>;
  }

  return (
    <FormControlLabel
      className={[styles.switchField, className].filter(Boolean).join(" ")}
      control={control}
      label={label}
    />
  );
}

export function AdminFormReadOnlyField({ label, value }) {
  const displayValue = value === undefined || value === null || value === "" ? "-" : value;

  return (
    <div className={styles.readOnlyField}>
      <span className={styles.readOnlyLabel}>{label}</span>
      <span className={styles.readOnlyValue}>{displayValue}</span>
    </div>
  );
}

export function AdminFormAmountField({ className = "", inputProps, InputProps, slotProps, unit, ...props }) {
  const inputSlotProps = { ...(slotProps?.input || {}), ...(InputProps || {}) };

  return (
    <TextField
      {...props}
      className={[styles.amountField, className].filter(Boolean).join(" ")}
      slotProps={{
        ...slotProps,
        htmlInput: { inputMode: "decimal", ...slotProps?.htmlInput, ...inputProps },
        input: {
          ...inputSlotProps,
          endAdornment: unit ? (
            <InputAdornment position="end">
              <span className={styles.inputUnit}>{unit}</span>
            </InputAdornment>
          ) : (
            inputSlotProps.endAdornment
          )
        }
      }}
      type={props.type || "text"}
    />
  );
}

export function AdminFormInlineActions({ children }) {
  return <div className={styles.inlineActions}>{children}</div>;
}

export function AdminFormList({ children }) {
  return <div className={styles.list}>{children}</div>;
}

export function AdminFormListRow({ children, columns }) {
  return (
    <div className={styles.listRow} style={columns ? { "--admin-form-list-columns": columns } : undefined}>
      {children}
    </div>
  );
}
