import React from 'react';

/**
 * 消费者保护分析仪表盘
 *
 * 投诉统计、分类分析、满意度趋势、保障基金、退款合规
 */

const stats = [
  { label: '投诉总数', value: '234', change: '-5.2%', trend: 'down' as const, color: 'var(--color-error)' },
  { label: '已解决', value: '198', change: '+12.3%', trend: 'up' as const, color: 'var(--color-success)' },
  { label: '处理中', value: '28', change: '-8.1%', trend: 'down' as const, color: 'var(--color-warning)' },
  { label: '平均解决时间', value: '2.3天', change: '-0.4天', trend: 'down' as const, color: 'var(--color-info)' },
];

const complaintCategories = [
  { name: '核销失败', count: 82, percent: 35, color: 'var(--color-error)' },
  { name: '退款纠纷', count: 68, percent: 29, color: 'var(--color-warning)' },
  { name: '虚假券', count: 49, percent: 21, color: 'var(--color-primary)' },
  { name: '其他', count: 35, percent: 15, color: 'var(--color-gray-400)' },
];

const csatTrend = [
  { month: '9月', score: 4.1 },
  { month: '10月', score: 4.2 },
  { month: '11月', score: 4.0 },
  { month: '12月', score: 4.3 },
  { month: '1月', score: 4.4 },
  { month: '2月', score: 4.5 },
];

const recentComplaints = [
  { id: 'CMP-0234', severity: '高' as const, category: '虚假券', title: '品牌方否认发行该优惠券', status: '处理中' as const, assignee: '张明', created: '2026-02-10' },
  { id: 'CMP-0233', severity: '高' as const, category: '退款纠纷', title: '核销后商家拒绝提供服务', status: '处理中' as const, assignee: '李华', created: '2026-02-10' },
  { id: 'CMP-0232', severity: '中' as const, category: '核销失败', title: '二维码扫描无反应，门店系统故障', status: '已解决' as const, assignee: '王芳', created: '2026-02-09' },
  { id: 'CMP-0231', severity: '低' as const, category: '其他', title: '券面信息与实际服务不符', status: '已解决' as const, assignee: '赵丽', created: '2026-02-09' },
  { id: 'CMP-0230', severity: '高' as const, category: '退款纠纷', title: '过期券退款被拒，用户称未收到提醒', status: '处理中' as const, assignee: '张明', created: '2026-02-09' },
  { id: 'CMP-0229', severity: '中' as const, category: '核销失败', title: '跨区域核销失败，券面未标注限制', status: '已解决' as const, assignee: '李华', created: '2026-02-08' },
  { id: 'CMP-0228', severity: '低' as const, category: '其他', title: '赠送的券对方未收到', status: '已解决' as const, assignee: '王芳', created: '2026-02-08' },
  { id: 'CMP-0227', severity: '中' as const, category: '虚假券', title: '折扣力度与宣传不符', status: '处理中' as const, assignee: '赵丽', created: '2026-02-07' },
];

const severityConfig: 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)' },
};

const statusConfig: Record<string, { bg: string; color: string }> = {
  '处理中': { bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
  '已解决': { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
  '已关闭': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
};

const nonCompliantIssuers = [
  { rank: 1, issuer: '快乐生活电商', violations: 12, refundRate: '45%', avgDelay: '5.2天', riskLevel: '高' as const },
  { rank: 2, issuer: '优选旅游服务', violations: 9, refundRate: '52%', avgDelay: '4.8天', riskLevel: '高' as const },
  { rank: 3, issuer: '星辰数码官方', violations: 7, refundRate: '61%', avgDelay: '3.5天', riskLevel: '中' as const },
  { rank: 4, issuer: '美味餐饮集团', violations: 5, refundRate: '68%', avgDelay: '2.9天', riskLevel: '中' as const },
  { rank: 5, issuer: '悦享娱乐传媒', violations: 4, refundRate: '72%', avgDelay: '2.1天', riskLevel: '低' as const },
];

export const ConsumerProtectionPage: React.FC = () => {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)' }}>消费者保护</h1>
        <button style={{
          padding: '8px 16px', border: 'none', borderRadius: 'var(--radius-sm)',
          background: 'var(--color-primary)', color: 'white', cursor: 'pointer', font: 'var(--text-label)',
        }}>导出报告</button>
      </div>

      {/* Stats Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {stats.map(stat => (
          <div key={stat.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 }}>
              {stat.label}
            </div>
            <div style={{ font: 'var(--text-h1)', color: stat.color }}>
              {stat.value}
            </div>
            <div style={{
              font: 'var(--text-label-sm)',
              color: (stat.label === '投诉总数' || stat.label === '处理中' || stat.label === '平均解决时间')
                ? (stat.trend === 'down' ? 'var(--color-success)' : 'var(--color-error)')
                : (stat.trend === 'up' ? 'var(--color-success)' : 'var(--color-error)'),
              marginTop: 4,
            }}>
              {stat.change}
            </div>
          </div>
        ))}
      </div>

      {/* Complaint Categories + CSAT Trend */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
        {/* Complaint Category Breakdown */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>投诉分类</div>
          {complaintCategories.map(cat => (
            <div key={cat.name} style={{ marginBottom: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-primary)' }}>{cat.name}</span>
                <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>
                  {cat.count} 件 ({cat.percent}%)
                </span>
              </div>
              <div style={{
                width: '100%', height: 8,
                background: 'var(--color-gray-100)',
                borderRadius: 4,
                overflow: 'hidden',
              }}>
                <div style={{
                  width: `${cat.percent}%`,
                  height: '100%',
                  background: cat.color,
                  borderRadius: 4,
                }} />
              </div>
            </div>
          ))}
        </div>

        {/* CSAT Trend + Protection Fund */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Consumer Satisfaction Trend */}
          <div style={{
            background: 'var(--color-surface)',
            borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)',
            padding: 20,
            flex: 1,
          }}>
            <div style={{ font: 'var(--text-h3)', marginBottom: 12 }}>消费者满意度 (CSAT)</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
              <span style={{ font: 'var(--text-h1)', color: 'var(--color-success)' }}>4.5</span>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>/5.0</span>
              <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-success)' }}>+0.1</span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {csatTrend.map(item => (
                <div key={item.month} style={{ flex: 1, textAlign: 'center' }}>
                  <div style={{
                    height: 80,
                    display: 'flex',
                    alignItems: 'flex-end',
                    justifyContent: 'center',
                    marginBottom: 4,
                  }}>
                    <div style={{
                      width: '100%',
                      height: `${(item.score / 5) * 100}%`,
                      background: item.score >= 4.4 ? 'var(--color-success)' : item.score >= 4.2 ? 'var(--color-info)' : 'var(--color-warning)',
                      borderRadius: '4px 4px 0 0',
                      opacity: 0.7,
                    }} />
                  </div>
                  <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{item.month}</div>
                  <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-secondary)', fontWeight: 600 }}>{item.score}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Protection Fund Utilization */}
          <div style={{
            background: 'var(--color-surface)',
            borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)',
            padding: 20,
          }}>
            <div style={{ font: 'var(--text-h3)', marginBottom: 12 }}>保障基金使用率</div>
            <div style={{
              height: 100,
              background: 'var(--color-gray-50)',
              borderRadius: 'var(--radius-sm)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'var(--color-text-tertiary)',
            }}>
              Recharts 仪表盘图 (基金池 $520K / 已用 $78K / 使用率 15%)
            </div>
          </div>
        </div>
      </div>

      {/* Recent Complaints Table */}
      <div style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)',
        overflow: 'hidden',
        marginBottom: 24,
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ font: 'var(--text-h3)' }}>近期投诉</span>
          <input
            placeholder="搜索投诉..."
            style={{
              width: 240, height: 32,
              border: '1px solid var(--color-border)',
              borderRadius: 'var(--radius-sm)',
              padding: '0 12px',
              font: 'var(--text-body-sm)',
            }}
          />
        </div>
        <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 14px',
                  textAlign: 'left',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {recentComplaints.map(row => {
              const sev = severityConfig[row.severity];
              const st = statusConfig[row.status];
              return (
                <tr key={row.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>
                    {row.id}
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px',
                      borderRadius: 'var(--radius-full)',
                      background: sev.bg,
                      color: sev.color,
                      font: 'var(--text-caption)',
                    }}>{row.severity}</span>
                  </td>
                  <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>{row.category}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', maxWidth: 280 }}>{row.title}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px',
                      borderRadius: 'var(--radius-full)',
                      background: st.bg,
                      color: st.color,
                      font: 'var(--text-caption)',
                    }}>{row.status}</span>
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{row.assignee}</td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>{row.created}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Refund Policy Compliance */}
      <div style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 20px', font: 'var(--text-h3)', borderBottom: '1px solid var(--color-border-light)' }}>
          退款合规 - 不合规发行方 Top 5
        </div>
        <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 14px',
                  textAlign: 'left',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {nonCompliantIssuers.map(row => {
              const risk = severityConfig[row.riskLevel];
              return (
                <tr key={row.rank} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{
                    font: 'var(--text-label-sm)',
                    padding: '10px 14px',
                    color: row.rank <= 2 ? 'var(--color-error)' : 'var(--color-text-tertiary)',
                    fontWeight: row.rank <= 2 ? 700 : 400,
                  }}>{row.rank}</td>
                  <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>{row.issuer}</td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-error)', padding: '10px 14px' }}>{row.violations}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{
                        width: 60, height: 6,
                        background: 'var(--color-gray-100)',
                        borderRadius: 3,
                        overflow: 'hidden',
                      }}>
                        <div style={{
                          width: row.refundRate,
                          height: '100%',
                          background: parseInt(row.refundRate) < 60 ? 'var(--color-error)' : parseInt(row.refundRate) < 75 ? 'var(--color-warning)' : 'var(--color-success)',
                          borderRadius: 3,
                        }} />
                      </div>
                      <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-secondary)' }}>{row.refundRate}</span>
                    </div>
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-warning)', padding: '10px 14px' }}>{row.avgDelay}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px',
                      borderRadius: 'var(--radius-full)',
                      background: risk.bg,
                      color: risk.color,
                      font: 'var(--text-caption)',
                    }}>{row.riskLevel}</span>
                  </td>
                  <td style={{ padding: '10px 14px', display: 'flex', gap: 4 }}>
                    <button style={{ padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-text-secondary)' }}>审查</button>
                    <button style={{ padding: '4px 10px', border: 'none', borderRadius: 'var(--radius-sm)', background: 'var(--color-warning)', cursor: 'pointer', font: 'var(--text-caption)', color: 'white' }}>警告</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};
