'use client';

import React from 'react';
import { t } from '@/i18n/locales';
import { useApi } from '@/lib/use-api';

/**
 * D6. 商户核销管理 - 平台视角的核销数据
 *
 * 核销统计、门店核销排行、异常核销检测
 */

interface MerchantData {
  stats: { label: string; value: string; change: string; color: string }[];
  topStores: { rank: number; store: string; count: number; amount: string }[];
  realtimeFeed: { store: string; coupon: string; time: string }[];
}

const loadingBox: React.CSSProperties = {
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  padding: 40, color: 'var(--color-text-tertiary)', font: 'var(--text-body)',
};

export const MerchantRedemptionPage: React.FC = () => {
  const { data, isLoading, error } = useApi<MerchantData>('/api/v1/admin/merchant/stats');

  if (error) return <div style={loadingBox}>Error: {error.message}</div>;
  if (isLoading) return <div style={loadingBox}>Loading...</div>;

  const redemptionStats = data?.stats ?? [];
  const topStores = data?.topStores ?? [];
  const realtimeFeed = data?.realtimeFeed ?? [];

  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>{t('merchant_title')}</h1>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {redemptionStats.map(s => (
          <div key={s.label} style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 20,
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
            <div style={{ font: 'var(--text-h1)', color: s.color }}>{s.value}</div>
            <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 4 }}>{s.change}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Top Stores */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>{t('merchant_store_ranking')}</h2>
          {topStores.map(s => (
            <div key={s.rank} style={{
              display: 'flex', alignItems: 'center', padding: '10px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: s.rank <= 3 ? 'var(--color-primary)' : 'var(--color-gray-200)',
                color: s.rank <= 3 ? 'white' : 'var(--color-text-tertiary)', font: 'var(--text-caption)', fontWeight: 700,
              }}>{s.rank}</span>
              <span style={{ flex: 1, marginLeft: 12, font: 'var(--text-body)' }}>{s.store}</span>
              <span style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginRight: 16 }}>{s.count}{t('merchant_unit_count')}</span>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>{s.amount}</span>
            </div>
          ))}
        </div>

        {/* Realtime Feed */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>{t('merchant_realtime_feed')}</h2>
          {realtimeFeed.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--color-success)', marginRight: 12 }} />
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{r.store}</div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{r.coupon}</div>
              </div>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{r.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
