import SendOutlined from "@mui/icons-material/SendOutlined";
import Alert from "@mui/material/Alert";
import Button from "@mui/material/Button";
import InputAdornment from "@mui/material/InputAdornment";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { AppIdentity } from "@/shared/ui/AppIdentity.jsx";
import { UploadField } from "@/shared/ui/UploadField.jsx";

export function FinanceApplicationForm({
  apps,
  disabled,
  error,
  form,
  loading,
  operations,
  walletIdentities,
  onChange,
  onCancel,
  onSubmit
}) {
  const selectedOperation = operations.find((operation) => operation.value === form.operation);
  const needsWalletIdentity = Boolean(selectedOperation?.requiresWalletIdentity);
  const canSubmit = !disabled && !loading && apps.length > 0 && operations.length > 0;

  const updateField = (key, value) => {
    if (key === "operation") {
      const nextOperation = operations.find((operation) => operation.value === value);
      onChange({ ...form, operation: value, walletIdentity: nextOperation?.requiresWalletIdentity ? form.walletIdentity : "" });
      return;
    }
    onChange({ ...form, [key]: value });
  };

  return (
    <form className={onCancel ? "finance-form finance-form--dialog" : "finance-panel finance-form"} onSubmit={onSubmit}>
      {error ? <Alert severity="error">{error}</Alert> : null}
      {disabled ? <Alert severity="warning">无发起财务申请权限</Alert> : null}
      {!loading && !disabled && (!apps.length || !operations.length) ? <Alert severity="warning">暂无可用 APP 或操作权限</Alert> : null}
      <div className="finance-form-grid">
        <TextField
          disabled={disabled || loading}
          label="APP"
          required
          select
          value={form.appCode}
          onChange={(event) => updateField("appCode", event.target.value)}
        >
          {apps.map((app) => (
            <MenuItem key={app.appCode} value={app.appCode}>
              <AppIdentity app={app} size="small" />
            </MenuItem>
          ))}
        </TextField>
        <TextField
          disabled={disabled || loading}
          label="操作内容"
          required
          select
          value={form.operation}
          onChange={(event) => updateField("operation", event.target.value)}
        >
          {operations.map((operation) => (
            <MenuItem key={operation.value} value={operation.value}>
              {operation.label}
            </MenuItem>
          ))}
        </TextField>
        {needsWalletIdentity ? (
          <TextField
            disabled={disabled || loading}
            label="钱包身份"
            required
            select
            value={form.walletIdentity}
            onChange={(event) => updateField("walletIdentity", event.target.value)}
          >
            {walletIdentities.map(([value, label]) => (
              <MenuItem key={value} value={value}>
                {label}
              </MenuItem>
            ))}
          </TextField>
        ) : null}
        <TextField
          disabled={disabled || loading}
          label="目标用户 ID"
          required
          value={form.targetUserId}
          onChange={(event) => updateField("targetUserId", event.target.value)}
        />
        <TextField
          disabled={disabled || loading}
          inputProps={{ min: 0, step: "1" }}
          label="金币数量"
          required
          type="number"
          value={form.coinAmount}
          onChange={(event) => updateField("coinAmount", event.target.value)}
        />
        <TextField
          disabled={disabled || loading}
          InputProps={{ startAdornment: <InputAdornment position="start">USD</InputAdornment> }}
          inputProps={{ min: 0, step: "0.01" }}
          label="充值金额"
          required
          type="number"
          value={form.rechargeAmount}
          onChange={(event) => updateField("rechargeAmount", event.target.value)}
        />
      </div>
      <div className="finance-evidence-grid">
        <UploadField
          className="finance-credential-upload"
          disabled={disabled || loading}
          hideType
          label="凭证图片"
          previewClassName="finance-credential-preview"
          value={form.credentialImageUrl}
          onChange={(value) => updateField("credentialImageUrl", value)}
        />
        <TextField
          disabled={disabled || loading}
          label="凭证文字"
          minRows={7}
          multiline
          value={form.credentialText}
          onChange={(event) => updateField("credentialText", event.target.value)}
        />
      </div>
      <div className="finance-form-actions">
        {onCancel ? (
          <Button disabled={loading} variant="outlined" onClick={onCancel}>
            取消
          </Button>
        ) : null}
        <Button disabled={!canSubmit} startIcon={<SendOutlined fontSize="small" />} type="submit" variant="contained">
          发起申请
        </Button>
      </div>
    </form>
  );
}