import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import MeetingRoomOutlined from "@mui/icons-material/MeetingRoomOutlined";
import PersonOutlineOutlined from "@mui/icons-material/PersonOutlineOutlined";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { AdminFormDialog } from "@/shared/ui/AdminFormDialog.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";
import { PaginationBar } from "@/shared/ui/PaginationBar.jsx";
import { AdminFilterResetButton } from "@/shared/ui/AdminListLayout.jsx";
import { RegionSelect } from "@/shared/ui/RegionSelect.jsx";
import { createRegionColumnFilter } from "@/shared/ui/RegionFilterControl.jsx";
import { createOptionsColumnFilter, createTextColumnFilter } from "@/shared/ui/tableFilters.js";
import { UploadField } from "@/shared/ui/UploadField.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import { RoomDetailDrawer } from "@/features/rooms/components/RoomDetailDrawer.jsx";
import { roomStatusFilters, roomStatusLabels } from "@/features/rooms/constants.js";
import { useRoomsPage } from "@/features/rooms/hooks/useRoomsPage.js";
import styles from "@/features/rooms/rooms.module.css";

const columns = [
    {
        key: "identity",
        label: "房间",
        width: "minmax(240px, 1.5fr)",
        render: (room) => <RoomIdentity room={room} />,
    },
    {
        key: "owner",
        label: "房主",
        width: "minmax(210px, 1.2fr)",
        render: (room) => <OwnerIdentity room={room} />,
    },
    {
        key: "region",
        label: "区域",
        width: "minmax(140px, 0.8fr)",
        render: (room) => room.regionName || (room.visibleRegionId ? `区域 ${room.visibleRegionId}` : "-"),
    },
    {
        key: "onlineCount",
        label: "房间人数",
        width: "minmax(110px, 0.7fr)",
        render: (room) => `${formatNumber(room.onlineCount)} 人`,
    },
    {
        key: "status",
        label: "状态",
        width: "minmax(100px, 0.7fr)",
        render: (room) => <RoomStatus status={room.status} />,
    },
    {
        key: "time",
        label: "创建时间",
        width: "minmax(170px, 1fr)",
        render: (room) => formatMillis(room.createdAtMs),
    },
];

export function RoomListPage() {
    const page = useRoomsPage();
    const items = page.data.items || [];
    const total = page.data.total || 0;
    const tableColumns = [
        ...columns.map((column) =>
            column.key === "region"
                ? {
                      ...column,
                      filter: createRegionColumnFilter({
                          loading: page.loadingRegions,
                          options: page.regionOptions,
                          value: page.regionId,
                          onChange: page.changeRegionId,
                      }),
                  }
                : column.key === "identity"
                  ? {
                        ...column,
                        filter: createTextColumnFilter({
                            placeholder: "搜索房间、房主",
                            value: page.query,
                            onChange: page.changeQuery,
                        }),
                        render: (room) => <RoomIdentity room={room} onClick={() => page.openDetail(room)} />,
                    }
                  : column.key === "status"
                    ? {
                          ...column,
                          filter: createOptionsColumnFilter({
                              options: roomStatusFilters,
                              placeholder: "搜索状态",
                              value: page.status,
                              onChange: page.changeStatus,
                          }),
                          render: (room) => (
                              <RoomStatus
                                  disabled={!page.abilities.canUpdate}
                                  status={room.status}
                                  onClick={() => page.openStatus(room)}
                              />
                          ),
                      }
                    : column,
        ),
        {
            key: "actions",
            label: "操作",
            width: "minmax(104px, 0.6fr)",
            render: (room) => <RoomActions page={page} room={room} />,
        },
    ];

    return (
        <section className={styles.root}>
            <div className={styles.contentPanel}>
                <div className={styles.toolbar}>
                    <section className={styles.filters}>
                        <AdminFilterResetButton
                            disabled={!page.query && !page.status && !page.regionId}
                            onClick={page.resetFilters}
                        />
                    </section>
                </div>

                <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                    <div className={styles.listBlock}>
                        <DataTable
                            columns={tableColumns}
                            items={items}
                            minWidth="1180px"
                            rowKey={(room) => room.roomId}
                        />
                        {total > 0 ? (
                            <PaginationBar
                                page={page.page}
                                pageSize={page.data.pageSize || 10}
                                total={total}
                                onPageChange={page.setPage}
                            />
                        ) : null}
                    </div>
                </DataState>
            </div>

            <RoomDetailDrawer open={page.activeAction === "detail"} room={page.activeRoom} onClose={page.closeAction} />

            <ActionModal
                disabled={!page.abilities.canUpdate}
                loading={page.loadingAction === "edit"}
                open={page.activeAction === "edit"}
                title="编辑房间"
                onClose={page.closeAction}
                onSubmit={page.submitEdit}
            >
                <TextField
                    disabled={!page.abilities.canUpdate}
                    label="房间名称"
                    required
                    value={page.form.title}
                    onChange={(event) => page.setForm({ ...page.form, title: event.target.value })}
                />
                <UploadField
                    disabled={!page.abilities.canUpdate || !page.abilities.canUpload}
                    label="房间头像"
                    value={page.form.coverUrl}
                    onChange={(coverUrl) => page.setForm({ ...page.form, coverUrl })}
                />
                <RegionSelect
                    disabled={!page.abilities.canUpdate}
                    emptyLabel="选择区域"
                    loading={page.loadingRegions}
                    options={page.regionOptions}
                    required
                    value={page.form.visibleRegionId}
                    onChange={(visibleRegionId) => page.setForm({ ...page.form, visibleRegionId })}
                />
                <TextField
                    disabled={!page.abilities.canUpdate}
                    label="房间简介"
                    multiline
                    minRows={2}
                    value={page.form.description}
                    onChange={(event) => page.setForm({ ...page.form, description: event.target.value })}
                />
            </ActionModal>

            <ActionModal
                disabled={!page.abilities.canUpdate}
                loading={page.loadingAction === "status"}
                open={page.activeAction === "status"}
                title="房间状态"
                onClose={page.closeAction}
                onSubmit={page.submitStatus}
            >
                <TextField
                    disabled={!page.abilities.canUpdate}
                    label="状态"
                    required
                    select
                    value={page.statusForm.status}
                    onChange={(event) => page.setStatusForm({ status: event.target.value })}
                >
                    <MenuItem value="active">正常</MenuItem>
                    <MenuItem value="closed">关闭</MenuItem>
                </TextField>
            </ActionModal>
        </section>
    );
}

function RoomIdentity({ onClick, room }) {
    const content = (
        <div className={styles.identity}>
            <span className={styles.cover}>
                {room.coverUrl ? <img src={room.coverUrl} alt="" /> : <MeetingRoomOutlined fontSize="small" />}
            </span>
            <div className={styles.identityText}>
                <div className={styles.name}>{room.title || "-"}</div>
                <div className={styles.meta}>{room.roomId}</div>
            </div>
        </div>
    );

    if (!onClick) {
        return content;
    }

    return (
        <button
            aria-label={`查看房间详情：${room.title || room.roomId}`}
            className={styles.identityButton}
            type="button"
            onClick={onClick}
        >
            {content}
        </button>
    );
}

function OwnerIdentity({ room }) {
    const owner = room.owner || {};
    const ownerName = owner.username || "-";
    const ownerDisplayId = owner.displayUserId || room.ownerUserId || "-";

    return (
        <div className={styles.identity}>
            <span className={styles.ownerAvatar}>
                {owner.avatar ? <img src={owner.avatar} alt="" /> : <PersonOutlineOutlined fontSize="small" />}
            </span>
            <div className={styles.identityText}>
                <div className={styles.name}>{ownerName}</div>
                <div className={styles.meta}>{ownerDisplayId}</div>
            </div>
        </div>
    );
}

function RoomActions({ page, room }) {
    return (
        <div className={styles.rowActions}>
            {page.abilities.canUpdate ? (
                <Tooltip arrow title="编辑">
                    <span>
                        <IconButton label="编辑" onClick={() => page.openEdit(room)}>
                            <EditOutlined fontSize="small" />
                        </IconButton>
                    </span>
                </Tooltip>
            ) : null}
            {page.abilities.canDelete ? (
                <Tooltip arrow title="删除">
                    <span>
                        <IconButton
                            disabled={page.loadingAction === `delete-${room.roomId}`}
                            label="删除"
                            tone="danger"
                            onClick={() => page.removeRoom(room)}
                        >
                            <DeleteOutlineOutlined fontSize="small" />
                        </IconButton>
                    </span>
                </Tooltip>
            ) : null}
        </div>
    );
}

function RoomStatus({ disabled, onClick, status }) {
    const normalizedStatus = status === "active" ? "active" : "closed";
    const tone = normalizedStatus === "active" ? "running" : "stopped";
    const badge = (
        <span className={`status-badge status-badge--${tone}`}>
            <span className="status-point" />
            {roomStatusLabels[normalizedStatus]}
        </span>
    );
    if (disabled) {
        return badge;
    }
    return (
        <button className={styles.statusButton} type="button" onClick={onClick}>
            {badge}
        </button>
    );
}

function ActionModal({ children, disabled, loading, onClose, onSubmit, open, title }) {
    return (
        <AdminFormDialog
            loading={loading}
            open={open}
            size="compact"
            submitDisabled={disabled || loading}
            title={title}
            onClose={onClose}
            onSubmit={onSubmit}
        >
            {children}
        </AdminFormDialog>
    );
}

function formatNumber(value) {
    return Number(value || 0).toLocaleString("zh-CN");
}