'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';
import { getDomainColor } from '../styles/report-theme';
import { translatePrimitive, translateThemeLabel } from '../i18n/contentTranslations';
import { paginateItems } from '../utils/paginate';

interface CriticalIssuesProps {
  report: ReportSynthesis;
  locale?: ReportLocale;
  startPage?: number;
  totalPages?: number;
  sectionNumber?: number;
}

const COMPLEXITY_I18N: Record<string, string> = {
  quick: 'quick_fix',
  medium: 'moderate',
  complex: 'complex',
};

export default function CriticalIssues({ report, locale = 'en', startPage = 6, totalPages = 9, sectionNumber = 5 }: CriticalIssuesProps) {
  const { t } = useReportLocale(locale);
  const issues = report.critical_issues;

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

  const pages = paginateItems(issues, 2, 3);

  return (
    <>
      {pages.map((pageItems, pageIdx) => (
        <ReportPage key={pageIdx} pageNumber={startPage + pageIdx} totalPages={totalPages} background="white">
          {pageIdx === 0 ? (
            <SectionHeader
              number={sectionNumber}
              title={t('critical_issues')}
              subtitle={t('critical_issues_lead')}
            />
          ) : (
            <div className="caption" style={{ marginBottom: 16, fontSize: 12 }}>
              {t('critical_issues')} ({t('continued')})
            </div>
          )}

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {pageItems.map((issue, idx) => {
              const globalIdx = pageIdx === 0 ? idx : pages[0]!.length + (pageIdx - 1) * 3 + idx;
              return (
                <div key={globalIdx} className="issue-item">
                  <div className="issue-rank">{globalIdx + 1}</div>
                  <div className="issue-body">
                    <div className="issue-title">{translateThemeLabel(issue.title, locale)}</div>
                    <div className="issue-meta">
                      <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        <span className="domain-dot" style={{ backgroundColor: getDomainColor(issue.domain) }} />
                        <span className="body-sm">{translatePrimitive(issue.primitive, locale)}</span>
                      </span>
                      <span className="body-sm" style={{ color: 'var(--ui-error)', fontWeight: 600 }}>
                        {issue.count} {t('complaints')}
                      </span>
                      {issue.score_cost != null && issue.score_cost > 0 && (
                        <span className="body-sm" style={{ color: '#B91C1C', fontWeight: 700, background: '#FEE2E2', padding: '1px 6px', borderRadius: 4, fontSize: 11 }}>
                          −{issue.score_cost} {t('score_cost_pts')}
                        </span>
                      )}
                      <span className={`complexity-badge ${issue.complexity}`}>
                        {t(COMPLEXITY_I18N[issue.complexity] || 'moderate')}
                      </span>
                    </div>

                    {issue.description && (
                      <p className="body-sm text-secondary" style={{ marginBottom: 8 }}>{issue.description}</p>
                    )}

                    {issue.quotes.length > 0 && (
                      <div style={{ marginBottom: 8 }}>
                        <div className="caption" style={{ marginBottom: 6 }}>{t('evidence')}</div>
                        {issue.quotes.slice(0, 2).map((quote, qi) => (
                          <div key={qi} className="evidence-quote red">
                            &ldquo;{quote}&rdquo;
                          </div>
                        ))}
                      </div>
                    )}

                    {issue.solution && (
                      <div className="info-block blue">
                        <div className="info-label">{t('recommended_solution')}</div>
                        <p className="body-sm text-primary">{issue.solution}</p>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </ReportPage>
      ))}
    </>
  );
}
