import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import dayjs from 'dayjs';
import {
  Button,
  Card,
  ConfigProvider,
  Descriptions,
  Drawer,
  Form,
  Input,
  InputNumber,
  Layout,
  message,
  Modal,
  Result,
  Select,
  Space,
  Spin,
  Table,
  Tag,
  Tooltip,
  Typography,
} from 'antd';
import type { TableProps } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {
  CheckCircleOutlined,
  EditOutlined,
  EyeOutlined,
  PlayCircleOutlined,
  ReloadOutlined,
  SearchOutlined,
  StopOutlined,
  TeamOutlined,
  ThunderboltOutlined,
  UserAddOutlined,
  UserOutlined,
} from '@ant-design/icons';

import {
  useGamePlayerResourcesMutation,
  useGamePlayersQuery,
  useGamePlayerStatusMutation,
} from '@/api/queries/useGamePlayersQuery';
import type { GamePlayerFilters } from '@/api/queries/useGamePlayersQuery';
import { useTheme } from '@/hooks/useTheme';
import AppSidebar from '@/layouts/AppSidebar';
import WorkspaceTabs from '@/layouts/WorkspaceTabs';
import type { GamePlayer, GamePlayerStatus } from '@/schemas/gamePlayer';
import { setMessageInstance } from '@/utils/messageBus';
import './PlayersPage.css';

const integerFormatter = new Intl.NumberFormat('zh-CN', {
  useGrouping: false,
  maximumFractionDigits: 0,
});
const currencyFormatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY',
  useGrouping: false,
  maximumFractionDigits: 0,
});
const DEFAULT_TABLE_SCROLL_HEIGHT = 240;
const MIN_TABLE_SCROLL_HEIGHT = 96;

const statusMeta: Record<GamePlayerStatus, { color: string; label: string }> = {
  online: { color: 'success', label: '在线' },
  offline: { color: 'default', label: '离线' },
  banned: { color: 'error', label: '已封禁' },
};

const statusOptions = [
  { value: 'all', label: '全部状态' },
  { value: 'online', label: '在线' },
  { value: 'offline', label: '离线' },
  { value: 'banned', label: '已封禁' },
] satisfies Array<{ value: GamePlayerStatus | 'all'; label: string }>;

const banDurationOptions = [
  { value: 1, label: '1 天' },
  { value: 3, label: '3 天' },
  { value: 7, label: '7 天' },
  { value: 30, label: '30 天' },
  { value: 0, label: '永久' },
];

interface ResourceFormValues {
  level: number;
  vipLevel: number;
  combatPower: number;
  gold: number;
  diamonds: number;
}

interface BanFormValues {
  reason: string;
  durationDays: number;
}

function formatDateTime(value: string | null) {
  return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '—';
}

function StatusTag({ status }: { status: GamePlayerStatus }) {
  const meta = statusMeta[status];
  return (
    <Tag color={meta.color} variant="filled">
      {meta.label}
    </Tag>
  );
}

function SummaryMetric({
  label,
  value,
  icon,
  accent,
}: {
  label: string;
  value: number;
  icon: ReactNode;
  accent: string;
}) {
  return (
    <div className="players-metric" style={{ '--metric-accent': accent } as CSSProperties}>
      <div className="players-metric-heading">{label}</div>
      <div className="players-metric-value-row">
        <span className="players-metric-icon">{icon}</span>
        <span className="players-metric-value">{integerFormatter.format(value)}</span>
      </div>
    </div>
  );
}

export default function PlayersPage() {
  const { isDark, isUltra, antdThemeConfig } = useTheme();
  const [messageApi, messageContextHolder] = message.useMessage();
  useEffect(() => {
    setMessageInstance(messageApi);
  }, [messageApi]);

  const [filters, setFilters] = useState<GamePlayerFilters>({
    page: 1,
    pageSize: 20,
    keyword: '',
    status: 'all',
    serverId: 'all',
  });
  const [keywordInput, setKeywordInput] = useState('');
  const [selectedPlayer, setSelectedPlayer] = useState<GamePlayer | null>(null);
  const [resourceTarget, setResourceTarget] = useState<GamePlayer | null>(null);
  const [banTarget, setBanTarget] = useState<GamePlayer | null>(null);
  const [recoverTarget, setRecoverTarget] = useState<GamePlayer | null>(null);
  const tableViewportRef = useRef<HTMLDivElement>(null);
  const [tableScrollHeight, setTableScrollHeight] = useState(DEFAULT_TABLE_SCROLL_HEIGHT);
  const [resourceForm] = Form.useForm<ResourceFormValues>();
  const [banForm] = Form.useForm<BanFormValues>();
  const resourceMutation = useGamePlayerResourcesMutation();
  const statusMutation = useGamePlayerStatusMutation();
  const { players, total, summary, serverOptions, loading, fetched, fetchError, refresh } =
    useGamePlayersQuery(filters);

  useLayoutEffect(() => {
    const viewport = tableViewportRef.current;
    if (!viewport || !fetched || fetchError) return;

    const measure = () => {
      const header = viewport.querySelector<HTMLElement>('.ant-table-header');
      const pagination = viewport.querySelector<HTMLElement>('.ant-pagination');
      const paginationStyle = pagination ? window.getComputedStyle(pagination) : null;
      const paginationOuterHeight = pagination
        ? pagination.getBoundingClientRect().height +
          Number.parseFloat(paginationStyle?.marginTop || '0') +
          Number.parseFloat(paginationStyle?.marginBottom || '0')
        : 0;
      const fixedHeight = (header?.getBoundingClientRect().height ?? 0) + paginationOuterHeight;
      const nextHeight = Math.max(
        MIN_TABLE_SCROLL_HEIGHT,
        Math.floor(viewport.clientHeight - fixedHeight),
      );

      if (viewport.clientHeight > 0) {
        setTableScrollHeight((current) => (current === nextHeight ? current : nextHeight));
      }
    };

    const resizeObserver = new ResizeObserver(measure);
    resizeObserver.observe(viewport);
    const header = viewport.querySelector<HTMLElement>('.ant-table-header');
    const pagination = viewport.querySelector<HTMLElement>('.ant-pagination');
    if (header) resizeObserver.observe(header);
    if (pagination) resizeObserver.observe(pagination);
    measure();
    return () => resizeObserver.disconnect();
  }, [fetchError, fetched, total]);

  const pageClass = useMemo(() => {
    const classes = ['game-players-page'];
    if (isDark) classes.push('is-dark');
    if (isUltra) classes.push('is-ultra');
    return classes.join(' ');
  }, [isDark, isUltra]);

  const updateFilters = useCallback((patch: Partial<GamePlayerFilters>) => {
    setFilters((current) => ({ ...current, ...patch, page: patch.page ?? 1 }));
  }, []);

  const openResourceEditor = useCallback(
    (player: GamePlayer) => {
      setResourceTarget(player);
      resourceForm.setFieldsValue({
        level: player.level,
        vipLevel: player.vipLevel,
        combatPower: player.combatPower,
        gold: player.gold,
        diamonds: player.diamonds,
      });
    },
    [resourceForm],
  );

  const submitResources = async (values: ResourceFormValues) => {
    if (!resourceTarget) return;
    try {
      const updated = await resourceMutation.mutateAsync({
        playerId: resourceTarget.id,
        ...values,
      });
      setSelectedPlayer((current) => (current?.id === updated.id ? updated : current));
      messageApi.success('玩家数值已更新');
      setResourceTarget(null);
      resourceForm.resetFields();
    } catch {
      // The HTTP layer reports the server error and keeps the editor open for correction.
    }
  };

  const openBanModal = useCallback(
    (player: GamePlayer) => {
      setBanTarget(player);
      banForm.setFieldsValue({ reason: '', durationDays: 7 });
    },
    [banForm],
  );

  const submitBan = async (values: BanFormValues) => {
    if (!banTarget) return;
    try {
      const updated = await statusMutation.mutateAsync({
        playerId: banTarget.id,
        status: 'banned',
        reason: values.reason,
        durationDays: values.durationDays,
      });
      setSelectedPlayer((current) => (current?.id === updated.id ? updated : current));
      messageApi.success('玩家已封禁');
      setBanTarget(null);
      banForm.resetFields();
    } catch {
      // The HTTP layer reports the server error and keeps the modal open for correction.
    }
  };

  const submitRecover = async () => {
    if (!recoverTarget) return;
    try {
      const updated = await statusMutation.mutateAsync({
        playerId: recoverTarget.id,
        status: 'offline',
      });
      setSelectedPlayer((current) => (current?.id === updated.id ? updated : current));
      messageApi.success('玩家已解封');
      setRecoverTarget(null);
    } catch {
      // The HTTP layer reports the server error and keeps the confirmation open.
    }
  };

  const columns = useMemo<TableProps<GamePlayer>['columns']>(
    () => [
      {
        title: '角色',
        key: 'player',
        width: 180,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-identity">
            <Typography.Text strong>{player.name}</Typography.Text>
            <Typography.Text type="secondary" className="players-mono">
              ID {player.id}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '所属账号',
        key: 'account',
        width: 176,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-stack">
            <span>{player.accountName}</span>
            <Typography.Text type="secondary" className="players-mono">
              ID {player.accountId}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '所在区服',
        key: 'server',
        width: 152,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-stack">
            <span>{player.serverName}</span>
            <Typography.Text type="secondary" className="players-mono">
              {player.serverId}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 92,
        className: 'players-cell-start',
        render: (status: GamePlayerStatus) => <StatusTag status={status} />,
      },
      {
        title: '等级 / VIP',
        key: 'level',
        width: 104,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-stack players-numeric">
            <span>Lv. {integerFormatter.format(player.level)}</span>
            <Typography.Text type="secondary">
              VIP {integerFormatter.format(player.vipLevel)}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '战力',
        dataIndex: 'combatPower',
        key: 'combatPower',
        width: 116,
        className: 'players-cell-start',
        render: (value: number) => (
          <span className="players-numeric">{integerFormatter.format(value)}</span>
        ),
      },
      {
        title: '金币 / 钻石',
        key: 'resources',
        width: 164,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-stack players-numeric">
            <span>金币 {integerFormatter.format(player.gold)}</span>
            <Typography.Text type="secondary">
              钻石 {integerFormatter.format(player.diamonds)}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '累计充值',
        dataIndex: 'totalRecharge',
        key: 'totalRecharge',
        width: 126,
        className: 'players-cell-start',
        render: (value: number) => (
          <span className="players-numeric">{currencyFormatter.format(value)}</span>
        ),
      },
      {
        title: '最后登录',
        key: 'lastLogin',
        width: 190,
        className: 'players-cell-start',
        render: (_, player) => (
          <div className="players-stack">
            <span className="players-time">{formatDateTime(player.lastLoginTime)}</span>
            <Typography.Text type="secondary" className="players-mono">
              {player.lastLoginIp}
            </Typography.Text>
          </div>
        ),
      },
      {
        title: '操作',
        key: 'actions',
        width: 112,
        fixed: 'right',
        className: 'players-cell-start players-actions-cell',
        render: (_, player) => (
          <Space size={2} className="players-row-actions">
            <Tooltip title="查看详情">
              <Button
                type="text"
                aria-label={`查看玩家 ${player.name}`}
                icon={<EyeOutlined />}
                onClick={() => setSelectedPlayer(player)}
              />
            </Tooltip>
            <Tooltip title="调整数值">
              <Button
                type="text"
                aria-label={`调整玩家 ${player.name}`}
                icon={<EditOutlined />}
                onClick={() => openResourceEditor(player)}
              />
            </Tooltip>
            {player.status === 'banned' ? (
              <Tooltip title="解除封禁">
                <Button
                  type="text"
                  aria-label={`解封玩家 ${player.name}`}
                  icon={<CheckCircleOutlined />}
                  disabled={statusMutation.isPending}
                  onClick={() => setRecoverTarget(player)}
                />
              </Tooltip>
            ) : (
              <Tooltip title="封禁玩家">
                <Button
                  type="text"
                  danger
                  aria-label={`封禁玩家 ${player.name}`}
                  icon={<StopOutlined />}
                  disabled={statusMutation.isPending}
                  onClick={() => openBanModal(player)}
                />
              </Tooltip>
            )}
          </Space>
        ),
      },
    ],
    [openBanModal, openResourceEditor, statusMutation.isPending],
  );

  return (
    <ConfigProvider locale={zhCN} theme={antdThemeConfig}>
      {messageContextHolder}
      <Layout className={pageClass}>
        <AppSidebar />

        <Layout className="players-content-shell">
          <WorkspaceTabs />
          <Layout.Content className="players-content">
            <Spin spinning={!fetched} delay={150} size="large" description="正在加载">
              {!fetched ? (
                <div className="players-loading-spacer" />
              ) : fetchError ? (
                <Result
                  status="error"
                  title="玩家数据加载失败"
                  subTitle={fetchError}
                  extra={
                    <Button type="primary" loading={loading} onClick={() => refresh()}>
                      重新加载
                    </Button>
                  }
                />
              ) : (
                <div className="players-shell">
                  <Card size="small" className="players-summary-card">
                    <div className="players-metric-grid">
                      <SummaryMetric
                        label="总玩家"
                        value={summary.total}
                        icon={<TeamOutlined />}
                        accent="#1677ff"
                      />
                      <SummaryMetric
                        label="当前在线"
                        value={summary.online}
                        icon={<PlayCircleOutlined />}
                        accent="#52c41a"
                      />
                      <SummaryMetric
                        label="今日活跃"
                        value={summary.activeToday}
                        icon={<ThunderboltOutlined />}
                        accent="#13a8a8"
                      />
                      <SummaryMetric
                        label="今日新增"
                        value={summary.newToday}
                        icon={<UserAddOutlined />}
                        accent="#722ed1"
                      />
                      <SummaryMetric
                        label="已封禁"
                        value={summary.banned}
                        icon={<StopOutlined />}
                        accent="#ff4d4f"
                      />
                    </div>
                  </Card>

                  <Card size="small" className="players-filter-card">
                    <div className="players-filter-bar">
                      <div className="players-filter-actions">
                        <div className="players-search">
                          <Input
                            allowClear
                            aria-label="搜索玩家"
                            placeholder="角色 ID、角色名、账号"
                            value={keywordInput}
                            onChange={(event) => {
                              const value = event.target.value;
                              setKeywordInput(value);
                              if (value === '' && filters.keyword !== '') {
                                updateFilters({ keyword: '' });
                              }
                            }}
                            onPressEnter={() => updateFilters({ keyword: keywordInput.trim() })}
                          />
                          <Button
                            type="primary"
                            aria-label="搜索玩家数据"
                            icon={<SearchOutlined />}
                            onClick={() => updateFilters({ keyword: keywordInput.trim() })}
                          >
                            搜索
                          </Button>
                        </div>
                        <Select
                          className="players-filter-select"
                          aria-label="玩家状态筛选"
                          value={filters.status}
                          options={statusOptions}
                          onChange={(status) => updateFilters({ status })}
                        />
                        <Select
                          showSearch
                          optionFilterProp="label"
                          className="players-server-select"
                          aria-label="玩家区服筛选"
                          value={filters.serverId}
                          options={[{ value: 'all', label: '全部区服' }, ...serverOptions]}
                          onChange={(serverId) => updateFilters({ serverId })}
                        />
                        <Button
                          className="players-filter-refresh"
                          aria-label="刷新玩家数据"
                          title="刷新玩家数据"
                          icon={<ReloadOutlined />}
                          loading={loading}
                          onClick={() => refresh()}
                        />
                      </div>
                    </div>
                  </Card>

                  <Card size="small" className="players-table-card">
                    <div ref={tableViewportRef} className="players-table-viewport">
                      <Table<GamePlayer>
                        rowKey="id"
                        size="middle"
                        columns={columns}
                        dataSource={players}
                        loading={loading}
                        scroll={{ x: 1420, y: tableScrollHeight }}
                        locale={{ emptyText: '暂无符合条件的玩家' }}
                        pagination={{
                          current: filters.page,
                          pageSize: filters.pageSize,
                          total,
                          showSizeChanger: true,
                          pageSizeOptions: [10, 20, 50],
                          locale: { items_per_page: '/ 页' },
                          onChange: (page, pageSize) =>
                            setFilters((current) => ({ ...current, page, pageSize })),
                        }}
                      />
                    </div>
                  </Card>
                </div>
              )}
            </Spin>
          </Layout.Content>
        </Layout>

        <Drawer
          title="玩家详情"
          placement="right"
          size="min(92vw, 560px)"
          open={selectedPlayer !== null}
          rootClassName={`players-detail-drawer ${isDark ? 'dark' : 'light'}`}
          onClose={() => setSelectedPlayer(null)}
        >
          {selectedPlayer && (
            <div className="players-detail">
              <div className="players-detail-heading">
                <span className="players-detail-icon">
                  <UserOutlined />
                </span>
                <div>
                  <Typography.Title level={4}>{selectedPlayer.name}</Typography.Title>
                  <Typography.Text type="secondary" className="players-mono">
                    ID {selectedPlayer.id}
                  </Typography.Text>
                </div>
                <StatusTag status={selectedPlayer.status} />
              </div>

              <Descriptions bordered size="small" column={1}>
                <Descriptions.Item label="所属账号">
                  {selectedPlayer.accountName} / {selectedPlayer.accountId}
                </Descriptions.Item>
                <Descriptions.Item label="所在区服">{selectedPlayer.serverName}</Descriptions.Item>
                <Descriptions.Item label="等级">
                  {integerFormatter.format(selectedPlayer.level)}
                </Descriptions.Item>
                <Descriptions.Item label="VIP 等级">
                  {integerFormatter.format(selectedPlayer.vipLevel)}
                </Descriptions.Item>
                <Descriptions.Item label="战力">
                  {integerFormatter.format(selectedPlayer.combatPower)}
                </Descriptions.Item>
                <Descriptions.Item label="金币">
                  {integerFormatter.format(selectedPlayer.gold)}
                </Descriptions.Item>
                <Descriptions.Item label="钻石">
                  {integerFormatter.format(selectedPlayer.diamonds)}
                </Descriptions.Item>
                <Descriptions.Item label="累计充值">
                  {currencyFormatter.format(selectedPlayer.totalRecharge)}
                </Descriptions.Item>
                <Descriptions.Item label="创建时间">
                  {formatDateTime(selectedPlayer.createdAt)}
                </Descriptions.Item>
                <Descriptions.Item label="最后登录">
                  {formatDateTime(selectedPlayer.lastLoginTime)}
                </Descriptions.Item>
                <Descriptions.Item label="最后登录 IP">
                  <span className="players-mono">{selectedPlayer.lastLoginIp}</span>
                </Descriptions.Item>
                {selectedPlayer.status === 'banned' && (
                  <>
                    <Descriptions.Item label="封禁原因">
                      {selectedPlayer.banReason || '—'}
                    </Descriptions.Item>
                    <Descriptions.Item label="封禁截止">
                      {formatDateTime(selectedPlayer.banUntil)}
                    </Descriptions.Item>
                  </>
                )}
              </Descriptions>
            </div>
          )}
        </Drawer>

        <Modal
          title={`调整数值${resourceTarget ? `：${resourceTarget.name}` : ''}`}
          open={resourceTarget !== null}
          width={680}
          okText="保存修改"
          cancelText="取消"
          okButtonProps={{ loading: resourceMutation.isPending }}
          rootClassName="players-resource-modal"
          destroyOnHidden
          onOk={() => resourceForm.submit()}
          onCancel={() => {
            setResourceTarget(null);
            resourceForm.resetFields();
          }}
        >
          <Form<ResourceFormValues>
            form={resourceForm}
            layout="vertical"
            requiredMark={false}
            onFinish={submitResources}
          >
            <div className="players-form-grid">
              <Form.Item
                name="level"
                label="角色等级"
                rules={[{ required: true, message: '请输入角色等级' }]}
              >
                <InputNumber min={1} max={999} precision={0} controls />
              </Form.Item>
              <Form.Item
                name="vipLevel"
                label="VIP 等级"
                rules={[{ required: true, message: '请输入 VIP 等级' }]}
              >
                <InputNumber min={0} max={99} precision={0} controls />
              </Form.Item>
              <Form.Item
                name="combatPower"
                label="战力"
                rules={[{ required: true, message: '请输入战力' }]}
              >
                <InputNumber min={0} precision={0} controls />
              </Form.Item>
              <Form.Item
                name="gold"
                label="金币"
                rules={[{ required: true, message: '请输入金币数量' }]}
              >
                <InputNumber min={0} precision={0} controls />
              </Form.Item>
              <Form.Item
                name="diamonds"
                label="钻石"
                rules={[{ required: true, message: '请输入钻石数量' }]}
              >
                <InputNumber min={0} precision={0} controls />
              </Form.Item>
            </div>
          </Form>
        </Modal>

        <Modal
          title={`封禁玩家${banTarget ? `：${banTarget.name}` : ''}`}
          open={banTarget !== null}
          okText="确认封禁"
          cancelText="取消"
          okButtonProps={{ danger: true, loading: statusMutation.isPending }}
          destroyOnHidden
          onOk={() => banForm.submit()}
          onCancel={() => {
            setBanTarget(null);
            banForm.resetFields();
          }}
        >
          <Form<BanFormValues>
            form={banForm}
            layout="vertical"
            requiredMark={false}
            initialValues={{ durationDays: 7 }}
            onFinish={submitBan}
          >
            <Form.Item
              name="reason"
              label="封禁原因"
              rules={[
                { required: true, whitespace: true, message: '请输入封禁原因' },
                { max: 100, message: '封禁原因不能超过 100 个字符' },
              ]}
            >
              <Input.TextArea rows={3} maxLength={100} showCount placeholder="填写处理依据" />
            </Form.Item>
            <Form.Item name="durationDays" label="封禁期限" rules={[{ required: true }]}>
              <Select options={banDurationOptions} />
            </Form.Item>
          </Form>
        </Modal>

        <Modal
          title="解除封禁"
          open={recoverTarget !== null}
          okText="确认解封"
          cancelText="取消"
          okButtonProps={{ loading: statusMutation.isPending }}
          onOk={submitRecover}
          onCancel={() => setRecoverTarget(null)}
        >
          <Typography.Paragraph className="players-confirm-copy">
            {recoverTarget ? `玩家 ${recoverTarget.name} 将恢复为离线状态。` : ''}
          </Typography.Paragraph>
        </Modal>
      </Layout>
    </ConfigProvider>
  );
}