import { useEffect, useState, type ReactNode } from 'react';
import { Button, Input, Space, Tag, Typography } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { HuyaCollabShop } from '../api/modules';

const { Text } = Typography;
type ShopOption = Pick<HuyaCollabShop, 'name' | 'is_active'>;

/**
 * 店铺选择器：**一个店铺一个独立按钮**（中间留白），不做下拉。
 *
 * - 选中那个按钮变主题蓝（primary），没选的是白底描边，一眼看得出选的是谁；
 * - `allowClear` 为真时多一个「不填 / 全部」按钮（筛选里传"全部"），
 *   店铺必填的地方传 `false` 把空值这条路堵掉；
 * - `allowCustom`：点「＋ 新店」直接输新名字，选中即用（后端会自动登记进字典）；
 * - `includeInactive`：停用的店铺也列出来（筛选/详情里要能看到历史值）；
 * - 当前值不在字典里（老数据/刚自定义的名字）也会显示成一个按钮，不会被吞掉。
 */
export default function HuyaCollabShopPicker({
  value,
  shops,
  disabled,
  includeInactive = false,
  allowCustom = true,
  allowClear = true,
  clearLabel = '不填',
  size = 'small',
  onChange,
}: {
  value?: string | null;
  shops: ShopOption[];
  disabled?: boolean;
  includeInactive?: boolean;
  allowCustom?: boolean;
  /** 是否给一个「清空」按钮：店铺必填的地方传 false，别让人点出个空值 */
  allowClear?: boolean;
  clearLabel?: string;
  /** 按钮尺寸：列表单元格 / 筛选条用小号，新建弹窗用大号（更好点） */
  size?: 'small' | 'middle' | 'large';
  /** 放进 Form.Item 时由 antd 注入；单独用时自己传 */
  onChange?: (value: string) => void;
}) {
  const [customOpen, setCustomOpen] = useState(false);
  const [customName, setCustomName] = useState('');

  useEffect(() => {
    if (!customOpen) setCustomName('');
  }, [customOpen]);

  const current = value ?? '';
  const visible = shops.filter((shop) => includeInactive || shop.is_active);
  const options: { value: string; label: ReactNode }[] = visible.map((shop) => ({
    value: shop.name,
    label: (
      <Space size={4}>
        {shop.name}
        {!shop.is_active && <Tag style={{ margin: 0 }}>停用</Tag>}
      </Space>
    ),
  }));
  if (current && !visible.some((shop) => shop.name === current)) {
    // 老数据 / 刚自定义的：照样给个可点的按钮，不然界面上看不出选中了啥
    options.unshift({ value: current, label: current });
  }

  const submitCustom = () => {
    const name = customName.trim();
    if (!name) {
      setCustomOpen(false);
      return;
    }
    onChange?.(name);
    setCustomOpen(false);
  };

  return (
    <Space direction="vertical" size={8} style={{ width: '100%' }}>
      <Space wrap size={size === 'large' ? 12 : 8}>
        {/* 一个店铺一个独立按钮，中间留白（原来是连成一排的分段控件，太小不好点） */}
        {options.map((option) => (
          <Button
            key={option.value}
            size={size}
            type={option.value === current ? 'primary' : 'default'}
            disabled={disabled}
            onClick={() => onChange?.(option.value)}
          >
            {option.label}
          </Button>
        ))}
        {allowClear && (
          <Button
            size={size}
            type={current === '' ? 'primary' : 'default'}
            disabled={disabled}
            onClick={() => onChange?.('')}
          >
            <Text type={current === '' ? undefined : 'secondary'}>{clearLabel}</Text>
          </Button>
        )}
        {allowCustom && !disabled && !customOpen && (
          <Button size={size} type="link" icon={<PlusOutlined />} onClick={() => setCustomOpen(true)}>
            新店
          </Button>
        )}
      </Space>
      {customOpen && (
        <Input
          size={size}
          autoFocus
          maxLength={64}
          placeholder="输入新店铺名，回车确认"
          value={customName}
          onChange={(event) => setCustomName(event.target.value)}
          onPressEnter={submitCustom}
          onBlur={submitCustom}
          onKeyDown={(event) => {
            if (event.key === 'Escape') {
              setCustomName('');
              setCustomOpen(false);
            }
          }}
        />
      )}
    </Space>
  );
}