import { useTranslation } from 'react-i18next';
import { FileText, Download, Calendar, Settings } from 'lucide-react';

/** SFR11-10: 보고서 자동 생성 */
export function ReportGen() {
  const { t } = useTranslation('enforcement');

  const templates = [
    { id: 'RPT-DAILY', name: '일일 단속 보고서', desc: '금일 단속 현황, AI 매칭 결과, 처리 현황 요약', lastGen: '2026-04-01 18:00', format: 'PDF' },
    { id: 'RPT-WEEKLY', name: '주간 단속 통계', desc: '주간 단속 건수, 유형별 분포, 해역별 현황', lastGen: '2026-03-31 09:00', format: 'Excel' },
    { id: 'RPT-MONTHLY', name: '월간 성과 분석', desc: '월간 단속 성과, 전월 대비, AI 정확도 추이', lastGen: '2026-03-01 10:00', format: 'PDF' },
    { id: 'RPT-VESSEL', name: '선박별 이력 보고서', desc: '특정 선박의 단속 이력, 위험도 변화, 위반 패턴', lastGen: '2026-04-01 15:30', format: 'PDF' },
    { id: 'RPT-CUSTOM', name: '맞춤 보고서', desc: '사용자 정의 필터 기반 보고서 생성', lastGen: '-', format: 'PDF/Excel' },
  ];

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-lg font-bold text-heading">{t('reportGen.title')}</h1>
        <p className="text-xs text-hint mt-1">{t('reportGen.desc')}</p>
      </div>

      <div className="grid grid-cols-1 gap-3">
        {templates.map((tpl) => (
          <div key={tpl.id} className="bg-card border border-border rounded-xl p-4 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                <FileText className="w-5 h-5 text-blue-400" />
              </div>
              <div>
                <div className="text-sm font-bold text-heading">{tpl.name}</div>
                <div className="text-[10px] text-hint mt-0.5">{tpl.desc}</div>
                <div className="flex items-center gap-3 mt-1 text-[9px] text-hint">
                  <span className="flex items-center gap-1"><Calendar className="w-3 h-3" />최종: {tpl.lastGen}</span>
                  <span className="px-1.5 py-0.5 bg-surface-overlay rounded">{tpl.format}</span>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button className="p-2 rounded-lg hover:bg-surface-overlay text-hint hover:text-label transition-colors" title="설정">
                <Settings className="w-4 h-4" />
              </button>
              <button className="flex items-center gap-1.5 px-3 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-xs text-heading font-medium transition-colors">
                <Download className="w-3.5 h-3.5" /> 생성
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}