import { Button, Card, Empty, Input, Select, Space, Spin, Tag } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import type { PointsMallProduct } from '../../../api';
import type { PointsMallPageLogicOutput } from '../PointsMallPageLogic';
import ExchangeModal from '../components/ExchangeModal';
import ConfirmExchangeModal from '../components/ConfirmExchangeModal';

interface Props {
  logic: PointsMallPageLogicOutput;
}

export default function PointsMallPageH5({ logic }: Props) {
  const {
    overview,
    overviewLoading,
    categories,
    categoryId,
    q,
    sort,
    page,
    pageSize,
    productsLoading,
    products,
    total,
    userPoints,
    totalSpentUSD,
    banner,
    promoEntries,
    exchangeModalVisible,
    confirmModalVisible,
    selectedProduct,
    exchangeQuantity,
    pendingExpiresAt,
    exchangeLoading,
    setCategoryId,
    setQ,
    setSort,
    setPage,
    setPageSize,
    handleExchangeClick,
    setExchangeModalVisible,
    setConfirmModalVisible,
  } = logic;

  return (
    <div className="page-container h5-page-container" style={{ paddingLeft: 8, paddingRight: 8 }}>
      <div className="points-mall-hero h5-points-mall-hero" style={{ padding: '16px 12px' }}>
        <div className="points-mall-header h5-points-mall-header" style={{ flexDirection: 'column', gap: 12 }}>
          <div className="points-mall-title-section">
            <h1 className="page-title stats-page-title h5-page-title" style={{ fontSize: 24, marginBottom: 6 }}>积分商城</h1>
            <p className="page-subtitle stats-page-subtitle h5-page-subtitle" style={{ fontSize: 13, lineHeight: 1.5 }}>
              使用积分兑换权益、工具和活动礼包。<br />积分通过 API 调用消费自动累积，1 美元 = 1000 积分。
            </p>
          </div>
          <div className="points-mall-balance-card h5-points-mall-balance-card" style={{ width: '100%', padding: 12 }}>
            {overviewLoading ? (
              <Spin />
            ) : (
              <div className="points-balance-row h5-points-balance-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ width: '100%' }}>
                  <div className="points-balance-label" style={{ fontSize: 12 }}>我的积分</div>
                  <div className="points-balance-value" style={{ fontSize: 28 }}>{userPoints.toLocaleString()}</div>
                  <div className="points-balance-subtext" style={{ fontSize: 12 }}>
                    累计消费 ${typeof totalSpentUSD === 'number' ? totalSpentUSD.toFixed(2) : '--'}
                  </div>
                </div>
                <Tag
                  bordered={false}
                  style={{ margin: 0, borderRadius: 999, background: 'var(--color-brand-soft)', color: 'var(--color-brand)', fontSize: 12 }}
                >
                  {String(overview?.me?.level || 'Lv.0')}
                </Tag>
              </div>
            )}
          </div>
        </div>
      </div>

      <Card className="points-mall-category-card h5-points-mall-category-card" bodyStyle={{ padding: 0 }}>
        <div className="points-mall-category-body">
          <div className="points-mall-category-row h5-points-mall-category-row" style={{ flexWrap: 'wrap', gap: 6 }}>
            <span className="points-mall-category-label" style={{ width: '100%', marginBottom: 8 }}>商品分类</span>
            {categories.map((c) => (
              <Button
                key={c.id}
                size="small"
                type={c.id === categoryId ? 'primary' : 'default'}
                style={{ borderRadius: 999, fontSize: 12 }}
                onClick={() => {
                  setPage(1);
                  setCategoryId(c.id);
                }}
              >
                {c.name}
              </Button>
            ))}
          </div>
        </div>
      </Card>

      <div className="points-mall-banner-section h5-points-mall-banner-section" style={{ flexDirection: 'column', gap: 12 }}>
        <div className="points-mall-banner-card h5-points-mall-banner-card" style={{ width: '100%' }}>
          <div className="points-mall-banner-header" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
            <div>
              <div className="points-mall-banner-title" style={{ fontSize: 16 }}>{banner?.title || '本期活动'}</div>
              <div className="points-mall-banner-subtitle" style={{ fontSize: 12 }}>{banner?.subtitle || 'Up to 25% Off'}</div>
            </div>
            <Button type="primary" style={{ borderRadius: 10, height: 36, fontWeight: 600, width: '100%' }}>
              查看活动
            </Button>
          </div>
          <div className="points-mall-banner-footer">banner 图片与跳转链接由后端配置</div>
        </div>

        <div className="points-mall-promo-grid h5-points-mall-promo-grid" style={{ gridTemplateColumns: '1fr', gap: 8 }}>
          {promoEntries.slice(0, 2).map((p) => (
            <div key={p.id} className="points-mall-promo-card" style={{ padding: 12 }}>
              <div style={{ minWidth: 0 }}>
                <div className="points-mall-promo-title" style={{ fontSize: 14 }}>{p.title}</div>
                <div className="points-mall-promo-subtitle" style={{ fontSize: 12 }}>{p.subtitle}</div>
              </div>
              <Button size="small" className="points-mall-exchange-btn" style={{ marginTop: 8 }}>
                进入
              </Button>
            </div>
          ))}
          {promoEntries.length < 2 && <div className="points-mall-promo-empty">促销入口由后端配置</div>}
        </div>
      </div>

      <Card className="stats-page-chart-card h5-stats-page-chart-card">
        <div className="points-mall-filters-row h5-points-mall-filters-row" style={{ flexDirection: 'column', gap: 10 }}>
          <div style={{ width: '100%' }}>
            <Input
              value={q}
              onChange={(e) => {
                setPage(1);
                setQ(e.target.value);
              }}
              prefix={<SearchOutlined />}
              placeholder="搜索商品"
              allowClear
              className="points-mall-search-input"
              style={{ height: 36 }}
            />
          </div>
          <div style={{ display: 'flex', gap: 8, width: '100%' }}>
            <Select
              value={sort}
              className="points-mall-filter-select"
              style={{ flex: 1 }}
              onChange={(v) => {
                setPage(1);
                setSort(v);
              }}
              options={[
                { value: 'popular', label: '热度优先' },
                { value: 'newest', label: '最新上架' },
                { value: 'price_asc', label: '积分从低到高' },
                { value: 'price_desc', label: '积分从高到低' },
              ]}
            />
            <Select
              value={pageSize}
              className="points-mall-filter-select-small"
              style={{ width: 80 }}
              onChange={(v) => {
                setPage(1);
                setPageSize(v);
              }}
              options={[
                { value: 12, label: '每页 12' },
                { value: 24, label: '每页 24' },
              ]}
            />
          </div>
          <div className="points-mall-total-text" style={{ textAlign: 'left' }}>共 {total.toLocaleString()} 件商品</div>
        </div>

        {productsLoading ? (
          <Spin style={{ marginTop: 30, display: 'block' }} />
        ) : products.length === 0 ? (
          <Empty description="暂无商品" style={{ marginTop: 40 }} />
        ) : (
          <div className="points-mall-products-grid h5-points-mall-products-grid" style={{ gridTemplateColumns: '1fr', gap: 12 }}>
            {products.map((p: PointsMallProduct) => (
              <div key={p.id} className="points-mall-product-card h5-points-mall-product-card" style={{ padding: 12 }}>
                <div className="points-mall-product-cover" />
                <div className="points-mall-product-body">
                  <div className="points-mall-product-header">
                    <div className="points-mall-product-info">
                      <div className="points-mall-product-name" style={{ fontSize: 15 }}>{p.name}</div>
                      <div className="points-mall-product-desc" style={{ fontSize: 12 }}>{p.subtitle}</div>
                    </div>
                    {p.tags?.length ? (
                      <Tag bordered={false} className="points-mall-product-tag" style={{ fontSize: 11 }}>
                        {p.tags[0]}
                      </Tag>
                    ) : null}
                  </div>
                  <div className="points-mall-product-price-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
                    <div>
                      <span className="points-mall-product-price" style={{ fontSize: 20 }}>{Number(p.pointsPrice).toLocaleString()}</span>
                      <span className="points-mall-product-price-label">积分</span>
                    </div>
                    <Button
                      type="primary"
                      className="points-mall-exchange-btn points-mall-product-exchange-btn"
                      disabled={userPoints < p.pointsPrice || exchangeLoading}
                      onClick={() => handleExchangeClick(p)}
                      style={{ width: '100%' }}
                    >
                      {userPoints < p.pointsPrice ? '积分不足' : '兑换'}
                    </Button>
                  </div>
                  <div className="points-mall-product-footer" style={{ fontSize: 12 }}>
                    <span>库存 {p.stock}</span>
                    <span>已兑 {p.sold}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {!!total && (
          <div className="points-mall-pagination h5-points-mall-pagination" style={{ marginTop: 16 }}>
            <Space size={8}>
              <Button disabled={page <= 1} onClick={() => setPage((v) => Math.max(1, v - 1))} className="points-mall-exchange-btn" size="small">
                上一页
              </Button>
              <Tag bordered={false} className="points-mall-pagination-tag">
                第 {page} 页
              </Tag>
              <Button disabled={page * pageSize >= total} onClick={() => setPage((v) => v + 1)} className="points-mall-exchange-btn" size="small">
                下一页
              </Button>
            </Space>
          </div>
        )}
      </Card>

      <ExchangeModal
        open={exchangeModalVisible}
        product={selectedProduct}
        quantity={exchangeQuantity}
        expiresAt={pendingExpiresAt}
        loading={exchangeLoading}
        onSubmit={logic.handleExchangeSubmit}
        onCancel={() => {
          setExchangeModalVisible(false);
          logic.setPendingOrderId(null);
          logic.setPendingExpiresAt(null);
          logic.setSelectedProduct(null);
          logic.setExchangeQuantity(1);
        }}
      />

      <ConfirmExchangeModal
        open={confirmModalVisible}
        product={selectedProduct}
        userPoints={userPoints}
        quantity={exchangeQuantity}
        loading={exchangeLoading}
        onQuantityChange={(v) => logic.setExchangeQuantity(Math.max(1, Math.floor(v || 1)))}
        onConfirm={logic.handleConfirmExchange}
        onCancel={() => {
          if (exchangeLoading) return;
          setConfirmModalVisible(false);
          logic.setSelectedProduct(null);
          logic.setExchangeQuantity(1);
        }}
      />
    </div>
  );
}