import InputAdornment from "@mui/material/InputAdornment";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { useState } from "react";
import styles from "@/features/operations/operations.module.css";

const rewardTypeOptions = [
    { label: "金币", value: "coin" },
    { label: "礼物", value: "gift" },
    { label: "道具", value: "prop" },
    { label: "装扮", value: "dress" },
];

export function WheelPrizeTable({ canUpdate, disabled, expectedCount, onChange, onMove, resourceGroupPicker, tiers }) {
    const [dragIndex, setDragIndex] = useState(null);

    return (
        <section className={styles.wheelPanel}>
            <div className={styles.wheelPanelHeader}>
                <h2>奖品档位</h2>
                <span>{expectedCount} 个档位，选择资源组后可拖动排序</span>
            </div>
            {resourceGroupPicker ? <div className={styles.wheelGroupPicker}>{resourceGroupPicker}</div> : null}
            {tiers.length ? (
                <div className={styles.wheelPrizeScroller}>
                    <div className={styles.wheelPrizeList}>
                        {tiers.map((tier, index) => (
                            <article
                                className={styles.wheelPrizeRow}
                                draggable={canUpdate && !disabled}
                                key={`${tier.tierId}-${index}`}
                                onDragOver={(event) => event.preventDefault()}
                                onDragStart={() => setDragIndex(index)}
                                onDrop={() => {
                                    if (dragIndex !== null) {
                                        onMove?.(dragIndex, index);
                                    }
                                    setDragIndex(null);
                                }}
                            >
                                <span className={styles.wheelPrizeIndex}>#{index + 1}</span>
                                <div className={styles.wheelPrizeFields}>
                                    <TextField
                                        label="奖品名称"
                                        size="small"
                                        value={tier.displayName}
                                        disabled={!canUpdate || disabled}
                                        onChange={(event) => onChange(index, "displayName", event.target.value)}
                                    />
                                    <TextField
                                        select
                                        label="奖品类型"
                                        size="small"
                                        value={tier.rewardType}
                                        disabled={!canUpdate || disabled}
                                        onChange={(event) => onChange(index, "rewardType", event.target.value)}
                                    >
                                        {rewardTypeOptions.map((option) => (
                                            <MenuItem key={option.value} value={option.value}>
                                                {option.label}
                                            </MenuItem>
                                        ))}
                                    </TextField>
                                    <TextField
                                        label="资源 ID"
                                        size="small"
                                        value={tier.rewardId}
                                        disabled={!canUpdate || disabled || tier.rewardType === "coin"}
                                        onChange={(event) => onChange(index, "rewardId", event.target.value)}
                                    />
                                    <TextField
                                        label="奖励数量"
                                        type="number"
                                        size="small"
                                        value={tier.rewardCount}
                                        inputProps={{ min: 0, step: 1 }}
                                        disabled={!canUpdate || disabled}
                                        onChange={(event) => onChange(index, "rewardCount", event.target.value)}
                                    />
                                    <TextField
                                        label="金币数量"
                                        type="number"
                                        size="small"
                                        value={tier.rewardCoins}
                                        inputProps={{ min: 0, step: 1 }}
                                        disabled={!canUpdate || disabled || tier.rewardType !== "coin"}
                                        onChange={(event) => onChange(index, "rewardCoins", event.target.value)}
                                    />
                                    <TextField
                                        label="RTP 价值"
                                        type="number"
                                        size="small"
                                        value={tier.rtpValueCoins}
                                        inputProps={{ min: 0, step: 1 }}
                                        disabled={!canUpdate || disabled || tier.rewardType === "prop" || tier.rewardType === "dress"}
                                        onChange={(event) => onChange(index, "rtpValueCoins", event.target.value)}
                                    />
                                    <TextField
                                        label="概率"
                                        type="number"
                                        size="small"
                                        value={tier.probabilityPercent}
                                        inputProps={{ min: 0, max: 100, readOnly: true, step: "0.0001" }}
                                        InputProps={{
                                            endAdornment: <InputAdornment position="end">%</InputAdornment>,
                                            readOnly: true,
                                        }}
                                        disabled={disabled}
                                    />
                                    <TextField
                                        label="扩展 JSON"
                                        size="small"
                                        value={tier.metadataJson}
                                        disabled={!canUpdate || disabled}
                                        onChange={(event) => onChange(index, "metadataJson", event.target.value)}
                                    />
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            ) : (
                <div className={styles.wheelPrizeEmpty}>请选择资源组生成奖品档位</div>
            )}
        </section>
    );
}
