'use client';

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

/**
 * D6. 合规报表
 *
 * SAR管理、CTR管理、审计日志、监管报表
 */

interface SarRecord {
  id: string;
  txn: string;
  user: string;
  amount: number;
  type: string;
  status: string;
  createdAt: string;
}

interface AuditLog {
  time: string;
  action: string;
  detail: string;
  ip: string;
}

interface ComplianceReport {
  title: string;
  desc: string;
  date: string;
  auto: boolean;
}

interface ComplianceData {
  sar: SarRecord[];
  sarPendingCount: number;
  auditLogs: AuditLog[];
  reports: ComplianceReport[];
}

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

export const CompliancePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'sar' | 'ctr' | 'audit' | 'reports'>('sar');

  const { data: sarData, isLoading: sarLoading } = useApi<{ items: SarRecord[]; pendingCount: number }>(
    activeTab === 'sar' ? '/api/v1/admin/compliance/sar' : null,
  );
  const { data: auditData, isLoading: auditLoading } = useApi<AuditLog[]>(
    activeTab === 'audit' ? '/api/v1/admin/compliance/audit-logs' : null,
  );
  const { data: reportsData, isLoading: reportsLoading } = useApi<ComplianceReport[]>(
    activeTab === 'reports' ? '/api/v1/admin/compliance/reports' : null,
  );

  const sarItems = sarData?.items ?? [];
  const sarPendingCount = sarData?.pendingCount ?? 0;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ font: 'var(--text-h1)' }}>{t('compliance_title')}</h1>
        <button style={{
          padding: '8px 16px',
          border: 'none',
          borderRadius: 'var(--radius-full)',
          background: 'var(--color-primary)',
          color: 'white',
          cursor: 'pointer',
          font: 'var(--text-label-sm)',
        }}>
          ✨ {t('compliance_ai_generate')}
        </button>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--color-border-light)', paddingBottom: 0 }}>
        {[
          { key: 'sar', label: t('compliance_tab_sar'), badge: sarPendingCount },
          { key: 'ctr', label: t('compliance_tab_ctr'), badge: 0 },
          { key: 'audit', label: t('compliance_tab_audit'), badge: 0 },
          { key: 'reports', label: t('compliance_tab_reports'), badge: 0 },
        ].map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key as typeof activeTab)}
            style={{
              padding: '10px 16px',
              border: 'none',
              borderBottom: activeTab === tab.key ? '2px solid var(--color-primary)' : '2px solid transparent',
              background: 'none',
              color: activeTab === tab.key ? 'var(--color-primary)' : 'var(--color-text-tertiary)',
              cursor: 'pointer',
              font: 'var(--text-label)',
              display: 'flex',
              alignItems: 'center',
              gap: 6,
            }}
          >
            {tab.label}
            {tab.badge > 0 && (
              <span style={{
                padding: '1px 6px',
                borderRadius: 'var(--radius-full)',
                background: 'var(--color-error)',
                color: 'white',
                fontSize: 10,
              }}>{tab.badge}</span>
            )}
          </button>
        ))}
      </div>

      {/* SAR Tab Content */}
      {activeTab === 'sar' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          {sarLoading ? (
            <div style={loadingBox}>Loading...</div>
          ) : (
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ background: 'var(--color-gray-50)' }}>
                  {[t('compliance_sar_id'), t('compliance_sar_related_txn'), t('compliance_sar_user'), t('compliance_sar_amount'), t('compliance_sar_risk_type'), t('compliance_sar_status'), t('compliance_sar_created'), t('actions')].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>
                {sarItems.map(sar => (
                  <tr key={sar.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                    <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{sar.id}</td>
                    <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-link)' }}>{sar.txn}</td>
                    <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{sar.user}</td>
                    <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-error)', padding: '10px 14px' }}>${sar.amount?.toLocaleString()}</td>
                    <td style={{ padding: '10px 14px' }}>
                      <span style={{
                        padding: '2px 8px', borderRadius: 'var(--radius-full)',
                        background: 'var(--color-warning-light)', color: 'var(--color-warning)',
                        font: 'var(--text-caption)',
                      }}>{sar.type}</span>
                    </td>
                    <td style={{ padding: '10px 14px' }}>
                      <span style={{
                        padding: '2px 8px', borderRadius: 'var(--radius-full)',
                        background: sar.status === 'submitted' ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                        color: sar.status === 'submitted' ? 'var(--color-success)' : 'var(--color-warning)',
                        font: 'var(--text-caption)',
                      }}>
                        {sar.status === 'submitted' ? t('compliance_sar_submitted') : t('compliance_sar_pending')}
                      </span>
                    </td>
                    <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>{sar.createdAt}</td>
                    <td style={{ padding: '10px 14px' }}>
                      <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)' }}>{t('view')}</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      )}

      {/* CTR Tab */}
      {activeTab === 'ctr' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 40,
          textAlign: 'center',
          color: 'var(--color-text-tertiary)',
        }}>
          <div style={{ fontSize: 48, marginBottom: 12 }}>📋</div>
          <div style={{ font: 'var(--text-h3)', color: 'var(--color-text-secondary)', marginBottom: 8 }}>{t('compliance_ctr_title')}</div>
          <div style={{ font: 'var(--text-body-sm)' }}>{t('compliance_ctr_desc')}</div>
        </div>
      )}

      {/* Audit Log Tab */}
      {activeTab === 'audit' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: 16, borderBottom: '1px solid var(--color-border-light)', display: 'flex', gap: 12 }}>
            <input
              placeholder={t('compliance_audit_search')}
              style={{ flex: 1, height: 36, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', padding: '0 12px', font: 'var(--text-body-sm)' }}
            />
            <button style={{ padding: '6px 14px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-label-sm)' }}>
              {t('export')}
            </button>
          </div>
          {auditLoading ? (
            <div style={loadingBox}>Loading...</div>
          ) : (auditData ?? []).map((log, i) => (
            <div key={i} style={{
              padding: '12px 16px',
              borderBottom: '1px solid var(--color-border-light)',
              display: 'flex',
              alignItems: 'center',
              gap: 12,
            }}>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', width: 80 }}>{log.time}</span>
              <span style={{
                padding: '2px 8px', borderRadius: 'var(--radius-full)',
                background: 'var(--color-info-light)', color: 'var(--color-info)',
                font: 'var(--text-caption)',
              }}>
                {log.action}
              </span>
              <span style={{ font: 'var(--text-body-sm)', flex: 1 }}>
                {log.detail}
              </span>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>
                {log.ip}
              </span>
            </div>
          ))}
        </div>
      )}

      {/* Reports Tab */}
      {activeTab === 'reports' && (
        reportsLoading ? (
          <div style={loadingBox}>Loading...</div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {(reportsData ?? []).map(report => (
              <div key={report.title} style={{
                background: 'var(--color-surface)',
                borderRadius: 'var(--radius-md)',
                border: '1px solid var(--color-border-light)',
                padding: 20,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span style={{ font: 'var(--text-h3)' }}>{report.title}</span>
                  {report.auto && (
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)',
                      background: 'var(--color-success-light)', color: 'var(--color-success)',
                      font: 'var(--text-caption)',
                    }}>{t('auto_generated')}</span>
                  )}
                </div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 12 }}>{report.desc}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{t('as_of')} {report.date}</span>
                  <button style={{
                    padding: '6px 14px',
                    border: '1px solid var(--color-primary)',
                    borderRadius: 'var(--radius-sm)',
                    background: 'none',
                    color: 'var(--color-primary)',
                    cursor: 'pointer',
                    font: 'var(--text-label-sm)',
                  }}>{t('download')}</button>
                </div>
              </div>
            ))}
          </div>
        )
      )}
    </div>
  );
};
