import React from 'react';

/**
 * D8. 争议处理
 *
 * 工单列表（买方申诉/卖方申诉/退款申请）、状态、处理时效
 * 工单详情：双方信息、链上交易记录（证据）、仲裁操作
 */

interface Dispute {
  id: string;
  type: '买方申诉' | '卖方申诉' | '退款申请';
  order: string;
  plaintiff: string;
  defendant: string;
  amount: string;
  status: 'pending' | 'processing' | 'resolved' | 'rejected';
  createdAt: string;
  sla: string;
}

const mockDisputes: Dispute[] = [
  { id: 'DSP-001', type: '买方申诉', order: 'GNX-20260208-001200', plaintiff: 'U-012', defendant: 'U-045', amount: '$85.00', status: 'pending', createdAt: '2026-02-09', sla: '23h' },
  { id: 'DSP-002', type: '退款申请', order: 'GNX-20260207-001150', plaintiff: 'U-023', defendant: '-', amount: '$42.50', status: 'processing', createdAt: '2026-02-08', sla: '6h' },
  { id: 'DSP-003', type: '卖方申诉', order: 'GNX-20260206-001100', plaintiff: 'U-078', defendant: 'U-091', amount: '$120.00', status: 'pending', createdAt: '2026-02-07', sla: '47h' },
  { id: 'DSP-004', type: '买方申诉', order: 'GNX-20260205-001050', plaintiff: 'U-034', defendant: 'U-056', amount: '$30.00', status: 'resolved', createdAt: '2026-02-05', sla: '-' },
  { id: 'DSP-005', type: '退款申请', order: 'GNX-20260204-001000', plaintiff: 'U-067', defendant: '-', amount: '$21.25', status: 'rejected', createdAt: '2026-02-04', sla: '-' },
];

const statusConfig: Record<string, { label: string; bg: string; color: string }> = {
  pending: { label: '待处理', bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
  processing: { label: '处理中', bg: 'var(--color-info-light)', color: 'var(--color-info)' },
  resolved: { label: '已解决', bg: 'var(--color-success-light)', color: 'var(--color-success)' },
  rejected: { label: '已驳回', bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
};

const typeConfig: Record<string, { bg: string; color: string }> = {
  '买方申诉': { bg: 'var(--color-error-light)', color: 'var(--color-error)' },
  '卖方申诉': { bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
  '退款申请': { bg: 'var(--color-info-light)', color: 'var(--color-info)' },
};

export const DisputePage: React.FC = () => {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ font: 'var(--text-h1)' }}>争议处理</h1>
        <div style={{ display: 'flex', gap: 12 }}>
          {/* Stats */}
          {[
            { label: '待处理', value: '3', color: 'var(--color-warning)' },
            { label: '处理中', value: '1', color: 'var(--color-info)' },
            { label: '今日解决', value: '5', color: 'var(--color-success)' },
          ].map(s => (
            <div key={s.label} style={{
              padding: '6px 14px',
              borderRadius: 'var(--radius-full)',
              background: `${s.color}15`,
              display: 'flex',
              alignItems: 'center',
              gap: 6,
            }}>
              <span style={{ font: 'var(--text-h3)', color: s.color }}>{s.value}</span>
              <span style={{ font: 'var(--text-caption)', color: s.color }}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Disputes Table */}
      <div style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)',
        overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: 'var(--color-gray-50)' }}>
              {['工单号', '类型', '关联订单', '申诉方', '被诉方', '金额', '状态', '处理时效', '创建时间', '操作'].map(h => (
                <th key={h} style={{
                  font: 'var(--text-label-sm)',
                  color: 'var(--color-text-tertiary)',
                  padding: '10px 12px',
                  textAlign: 'left',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {mockDisputes.map(d => {
              const sc = statusConfig[d.status];
              const tc = typeConfig[d.type];
              return (
                <tr key={d.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 12px' }}>{d.id}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)',
                      background: tc.bg, color: tc.color, font: 'var(--text-caption)',
                    }}>{d.type}</span>
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-link)', padding: '10px 12px', cursor: 'pointer' }}>{d.order}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 12px' }}>{d.plaintiff}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 12px' }}>{d.defendant}</td>
                  <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-primary)', padding: '10px 12px' }}>{d.amount}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)',
                      background: sc.bg, color: sc.color, font: 'var(--text-caption)',
                    }}>{sc.label}</span>
                  </td>
                  <td style={{ padding: '10px 12px' }}>
                    {d.sla !== '-' ? (
                      <span style={{
                        font: 'var(--text-label-sm)',
                        color: parseInt(d.sla) > 24 ? 'var(--color-error)' : 'var(--color-text-secondary)',
                      }}>{d.sla}</span>
                    ) : (
                      <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-disabled)' }}>-</span>
                    )}
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 12px' }}>{d.createdAt}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <button style={{
                      padding: '4px 12px', border: '1px solid var(--color-border)',
                      borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer',
                      font: 'var(--text-caption)', color: 'var(--color-primary)',
                    }}>
                      {d.status === 'pending' || d.status === 'processing' ? '处理' : '查看'}
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};
