import { useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';
import { request } from '../../lib/api';

type LedgerItem = {
  id: string;
  title?: string;
  amount: number;
  createdAt?: string;
  type?: string;
};

export default function BenefitDetailPage() {
  const [items, setItems] = useState<LedgerItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    request<LedgerItem[]>('/benefit/ledger')
      .then((data) => setItems(Array.isArray(data) ? data : []))
      .catch(() => {
        // UI shell fallback demo rows when API missing
        setItems([]);
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <PageShell variant="sub" className="benefit-detail-page">
      <SubPageHeader
        title="权益明细"
        onBack={() => {
          const pages = Taro.getCurrentPages();
          if (pages.length > 1) {
            Taro.navigateBack();
            return;
          }
          Taro.switchTab({ url: '/pages/mine/index' });
        }}
      />
      <View className="sub-page-body">
        <View className="order-card">
          {loading ? <View className="u-empty">加载中…</View> : null}
          {!loading && items.length === 0 ? (
            <View className="u-empty">暂无明细记录</View>
          ) : null}
          {items.map((item) => {
            const isOut = Number(item.amount) < 0 || item.type === 'REDEEM';
            return (
              <View key={item.id} className="ledger-item">
                <View>
                  <Text className="ledger-title">{item.title || (isOut ? '门店核销' : '购酒入账')}</Text>
                  <Text className="ledger-time">
                    {item.createdAt ? String(item.createdAt).slice(0, 19).replace('T', ' ') : '-'}
                  </Text>
                </View>
                <Text className={`ledger-amount ${isOut ? 'ledger-amount--out' : 'ledger-amount--in'}`}>
                  {isOut ? '' : '+'}
                  {Number(item.amount).toFixed(2)}
                </Text>
              </View>
            );
          })}
        </View>
      </View>
    </PageShell>
  );
}