import EventSeatOutlined from "@mui/icons-material/EventSeatOutlined";
import SaveOutlined from "@mui/icons-material/SaveOutlined";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { DataState } from "@/shared/ui/DataState.jsx";
import { AdminActionIconButton, AdminListBody, AdminListPage, AdminListToolbar } from "@/shared/ui/AdminListLayout.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";
import { useRoomConfigPage } from "@/features/rooms/hooks/useRoomConfigPage.js";
import styles from "@/features/rooms/rooms.module.css";

export function RoomConfigPage() {
    const page = useRoomConfigPage();
    const canSave = page.abilities.canUpdateConfig && page.loadingAction !== "save";
    const defaultValue = page.form.allowedSeatCounts.includes(page.form.defaultSeatCount)
        ? page.form.defaultSeatCount
        : "";

    return (
        <AdminListPage>
            <AdminListToolbar
                actions={
                    page.abilities.canUpdateConfig ? (
                        <AdminActionIconButton
                            disabled={!canSave}
                            form="room-config-form"
                            label="保存"
                            primary
                            type="submit"
                        >
                            <SaveOutlined fontSize="small" />
                        </AdminActionIconButton>
                    ) : null
                }
            />
            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <AdminListBody>
                    <form id="room-config-form" className={styles.configForm} onSubmit={page.submitConfig}>
                        <section className={styles.configSection}>
                            <div className={styles.configHeader}>
                                <span className={styles.configIcon}>
                                    <EventSeatOutlined fontSize="small" />
                                </span>
                                <div className={styles.configTitle}>
                                    <h2>座位数</h2>
                                    <span>
                                        {page.form.updatedAtMs ? <TimeText value={page.form.updatedAtMs} /> : "默认配置"}
                                    </span>
                                </div>
                            </div>

                            <div className={styles.seatOptions}>
                                {page.form.candidateSeatCounts.map((seatCount) => (
                                    <FormControlLabel
                                        key={seatCount}
                                        control={
                                            <Checkbox
                                                checked={page.allowedSet.has(seatCount)}
                                                disabled={!page.abilities.canUpdateConfig}
                                                onChange={() => page.toggleSeatCount(seatCount)}
                                            />
                                        }
                                        label={`${seatCount} 个`}
                                    />
                                ))}
                            </div>

                            <TextField
                                disabled={!page.abilities.canUpdateConfig || page.form.allowedSeatCounts.length === 0}
                                label="默认座位数"
                                select
                                value={defaultValue}
                                onChange={(event) => page.changeDefaultSeatCount(event.target.value)}
                            >
                                {page.form.allowedSeatCounts.map((seatCount) => (
                                    <MenuItem key={seatCount} value={seatCount}>
                                        {seatCount} 个
                                    </MenuItem>
                                ))}
                            </TextField>
                        </section>
                    </form>
                </AdminListBody>
            </DataState>
        </AdminListPage>
    );
}
