'use client';

import type { ReportSynthesis } from '../types';
import type { ReportLocale } from '../i18n/useReportLocale';
import { useReportLocale } from '../i18n/useReportLocale';
import ReportPage from '../components/ReportPage';
import SectionHeader from '../components/SectionHeader';

interface TrackingFrameworkProps {
  report: ReportSynthesis;
  locale?: ReportLocale;
  pageNumber?: number;
  totalPages?: number;
  sectionNumber?: number;
}

export default function TrackingFramework({ report, locale = 'en', pageNumber = 9, totalPages = 9, sectionNumber = 8 }: TrackingFrameworkProps) {
  const { t } = useReportLocale(locale);
  const kpis = report.kpis;

  if (kpis.length === 0) return null;

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="gray">
      <SectionHeader
        number={sectionNumber}
        title={t('tracking_framework')}
        subtitle={t('tracking_framework_lead')}
      />

      <table className="scoring-table">
        <thead>
          <tr>
            <th>{t('metric')}</th>
            <th>{t('current')}</th>
            <th>{t('target_30d')}</th>
            <th>{t('target_90d')}</th>
          </tr>
        </thead>
        <tbody>
          {kpis.map((kpi, i) => (
            <tr key={i}>
              <td>
                <span className="heading-md" style={{ fontSize: 13 }}>{kpi.metric}</span>
              </td>
              <td>
                <span className="body-md">{kpi.current}</span>
              </td>
              <td>
                <span className="score-badge amber">{kpi.target_30d}</span>
              </td>
              <td>
                <span className="score-badge green">{kpi.target_90d}</span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </ReportPage>
  );
}
