'use client';

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

/**
 * D5. 报表中心 - 运营报表、合规报表、数据导出
 *
 * 日/周/月运营报表、监管合规报表、自定义数据导出
 * 包括：SOX审计、SEC Filing、税务合规
 */

interface Report {
  name: string;
  desc: string;
  status: string;
  date: string;
}

interface ReportCategory {
  title: string;
  icon: string;
  reports: Report[];
}

interface ReportsData {
  categories: ReportCategory[];
}

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

const getStatusStyle = (status: string): React.CSSProperties => {
  const map: Record<string, { bg: string; color: string }> = {
    generated: { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
    submitted: { bg: 'var(--color-info-light)', color: 'var(--color-info)' },
    passed: { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
    pending_review: { bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
    pending_generate: { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
    'N/A': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
  };
  const s = map[status] || map['N/A'];
  return { padding: '2px 8px', borderRadius: 'var(--radius-full)', background: s.bg, color: s.color, font: 'var(--text-caption)', fontWeight: 600 };
};

const getStatusLabel = (status: string) => {
  const map: Record<string, () => string> = {
    generated: () => t('reports_status_generated'),
    submitted: () => t('reports_status_submitted'),
    passed: () => t('reports_status_passed'),
    pending_review: () => t('reports_status_pending_review'),
    pending_generate: () => t('reports_status_pending_generate'),
  };
  return map[status]?.() ?? status;
};

export const ReportsPage: React.FC = () => {
  const { data, isLoading, error } = useApi<ReportsData>('/api/v1/admin/reports');

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

  const reportCategories = data?.categories ?? [];

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

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {reportCategories.map(cat => (
          <div key={cat.title} 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 }}>
              <span style={{ marginRight: 8 }}>{cat.icon}</span>{cat.title}
            </h2>
            {cat.reports.map((r, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', padding: '12px 0',
                borderBottom: i < cat.reports.length - 1 ? '1px solid var(--color-border-light)' : 'none',
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{r.name}</div>
                  <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{r.desc}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={getStatusStyle(r.status)}>{getStatusLabel(r.status)}</span>
                  {r.date && <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{r.date}</span>}
                  {r.status !== 'N/A' && r.status !== 'pending_generate' && (
                    <button style={{
                      padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)',
                      background: 'transparent', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-text-secondary)',
                    }}>{t('download')}</button>
                  )}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};
