import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { Button } from "@/shared/ui/Button.jsx";
import { RegionSelect } from "@/shared/ui/RegionSelect.jsx";
import { SideDrawer } from "@/shared/ui/SideDrawer.jsx";
import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
import styles from "@/features/policy-config/policy-config.module.css";

export function PolicyInstanceDrawer({ page }) {
    const saving = page.loadingAction === "instance-create";
    const disabled = saving || !page.abilities.canCreateInstance;
    const form = page.instanceForm;
    const selectedTemplateValue = `${form.templateCode}:${form.templateVersion}`;
    const patch = (value) => page.setInstanceForm((current) => ({ ...current, ...value }));

    return (
        <SideDrawer
            actions={
                <>
                    <Button disabled={saving} onClick={page.closeInstanceDrawer}>
                        取消
                    </Button>
                    <Button disabled={disabled} type="submit" variant="primary">
                        创建实例
                    </Button>
                </>
            }
            as="form"
            className={styles.instanceDrawer}
            contentClassName={styles.drawerBody}
            open={page.instanceDrawerOpen}
            title="创建 App 策略实例"
            width="wide"
            onClose={saving ? undefined : page.closeInstanceDrawer}
            onSubmit={page.submitInstance}
        >
            <section className={styles.formSection}>
                <div className={styles.sectionHeader}>
                    <h3>实例配置</h3>
                </div>
                <div className={styles.formGrid}>
                    <TextField
                        required
                        disabled={disabled}
                        label="实例编码"
                        size="small"
                        value={form.instanceCode}
                        onChange={(event) => patch({ instanceCode: event.target.value })}
                    />
                    <TextField
                        required
                        select
                        disabled={disabled || !page.templateOptions.length}
                        label="模板版本"
                        size="small"
                        value={selectedTemplateValue}
                        onChange={(event) => {
                            const [templateCode, templateVersion] = String(event.target.value).split(":");
                            patch({ templateCode, templateVersion });
                        }}
                    >
                        {page.templateOptions.map((option) => (
                            <MenuItem key={option.value} value={option.value}>
                                {option.label}
                            </MenuItem>
                        ))}
                        {!page.templateOptions.length ? <MenuItem value={selectedTemplateValue}>{selectedTemplateValue}</MenuItem> : null}
                    </TextField>
                    <TextField
                        select
                        disabled={disabled}
                        label="区域范围"
                        size="small"
                        value={form.regionScopeMode}
                        onChange={(event) => patch({ regionScopeMode: event.target.value, regionId: "" })}
                    >
                        <MenuItem value="all_active_regions">全部启用地区</MenuItem>
                        <MenuItem value="region_id">指定地区</MenuItem>
                    </TextField>
                    {form.regionScopeMode === "region_id" ? (
                        <RegionSelect
                            disabled={disabled}
                            emptyLabel="选择地区"
                            label="指定地区"
                            loading={page.loadingRegions}
                            options={page.regionOptions}
                            required
                            value={form.regionId}
                            onChange={(regionId) => patch({ regionId })}
                        />
                    ) : null}
                    <TextField
                        select
                        disabled={disabled}
                        label="实例状态"
                        size="small"
                        value={form.status}
                        onChange={(event) => patch({ status: event.target.value })}
                    >
                        <MenuItem value="active">启用</MenuItem>
                        <MenuItem value="disabled">停用</MenuItem>
                    </TextField>
                    <TimeRangeFilter
                        className={styles.timeRangeField}
                        disabled={disabled}
                        label="生效时间"
                        value={{ endMs: form.effectiveTo, startMs: form.effectiveFrom }}
                        onChange={(range) => patch({ effectiveFrom: range.startMs, effectiveTo: range.endMs })}
                    />
                </div>
            </section>
        </SideDrawer>
    );
}
