'use client';

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

/**
 * D8. 保险与消费者保护 - 平台保障体系管理
 *
 * 消费者保护基金、保险机制、赔付记录、IPO准备度
 */

interface InsuranceData {
  stats: { label: string; value: string; color: string }[];
  claims: { id: string; user: string; reason: string; amount: string; status: string; date: string }[];
  ipoChecklist: { item: string; status: 'done' | 'progress' | 'pending' }[];
  ipoProgress: number;
}

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

const getClaimStatusStyle = (status: string) => {
  switch (status) {
    case 'paid': return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    case 'processing': return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
    case 'rejected': return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    default: return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

const getClaimStatusLabel = (status: string) => {
  const map: Record<string, () => string> = {
    paid: () => t('insurance_status_paid'),
    processing: () => t('insurance_status_processing'),
    rejected: () => t('insurance_status_rejected'),
  };
  return map[status]?.() ?? status;
};

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

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

  const protectionStats = data?.stats ?? [];
  const recentClaims = data?.claims ?? [];
  const ipoChecklist = data?.ipoChecklist ?? [];
  const ipoProgress = data?.ipoProgress ?? 0;

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

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {protectionStats.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>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Claims */}
        <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('insurance_recent_claims')}</h2>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>{[t('insurance_th_id'), t('insurance_th_user'), t('insurance_th_reason'), t('insurance_th_amount'), t('insurance_th_status')].map(h => (
                <th key={h} style={{ padding: '8px 0', textAlign: 'left', font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', borderBottom: '1px solid var(--color-border-light)' }}>{h}</th>
              ))}</tr>
            </thead>
            <tbody>
              {recentClaims.map(c => (
                <tr key={c.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ padding: '10px 0', fontFamily: 'var(--font-family-mono)', font: 'var(--text-body-sm)' }}>{c.id}</td>
                  <td style={{ padding: '10px 0', font: 'var(--text-body)' }}>{c.user}</td>
                  <td style={{ padding: '10px 0', font: 'var(--text-body)' }}>{c.reason}</td>
                  <td style={{ padding: '10px 0', font: 'var(--text-label)', color: 'var(--color-error)' }}>{c.amount}</td>
                  <td style={{ padding: '10px 0' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                      ...getClaimStatusStyle(c.status),
                    }}>{getClaimStatusLabel(c.status)}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* IPO Readiness */}
        <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('insurance_ipo_checklist')}</h2>
          {ipoChecklist.map((item, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{
                width: 20, height: 20, borderRadius: '50%', marginRight: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: item.status === 'done' ? 'var(--color-success)' : item.status === 'progress' ? 'var(--color-warning)' : 'var(--color-gray-200)',
                color: item.status === 'pending' ? 'var(--color-text-tertiary)' : 'white', fontSize: 12,
              }}>
                {item.status === 'done' ? '✓' : item.status === 'progress' ? '...' : '○'}
              </div>
              <span style={{ flex: 1, font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{item.item}</span>
              <span style={{
                font: 'var(--text-caption)',
                color: item.status === 'done' ? 'var(--color-success)' : item.status === 'progress' ? 'var(--color-warning)' : 'var(--color-text-tertiary)',
              }}>
                {item.status === 'done' ? t('completed') : item.status === 'progress' ? t('in_progress') : t('pending')}
              </span>
            </div>
          ))}
          {/* Progress Bar */}
          <div style={{ marginTop: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>{t('overall_progress')}</span>
              <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-primary)' }}>{ipoProgress}%</span>
            </div>
            <div style={{ height: 8, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
              <div style={{ width: `${ipoProgress}%`, height: '100%', background: 'var(--color-primary)', borderRadius: 'var(--radius-full)' }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
