'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 StrengthsToProtectProps {
  report: ReportSynthesis;
  locale?: ReportLocale;
  startPage?: number;
  totalPages?: number;
  sectionNumber?: number;
}

export default function StrengthsToProtect({ report, locale = 'en', startPage = 7, totalPages = 9, sectionNumber = 6 }: StrengthsToProtectProps) {
  const { t } = useReportLocale(locale);
  const strengths = report.strengths;

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

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

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

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {pageItems.map((strength, idx) => {
              const globalIdx = pageIdx === 0 ? idx : pages[0]!.length + (pageIdx - 1) * 3 + idx;
              return (
                <div key={globalIdx} className="framework-item">
                  <div className="framework-number green">{globalIdx + 1}</div>
                  <div className="framework-body">
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                      <div className="issue-title">{translateThemeLabel(strength.title, locale)}</div>
                      <span className="pill light" style={{ fontSize: 11 }}>
                        {strength.count} {t('mentions')}
                      </span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                      <span className="domain-dot" style={{ backgroundColor: getDomainColor(strength.domain) }} />
                      <span className="body-sm">{translatePrimitive(strength.primitive, locale)}</span>
                    </div>

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

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

                    {strength.marketing_angle && (
                      <div className="info-block green">
                        <div className="info-label" style={{ color: 'var(--ui-success)' }}>{t('marketing_angle')}</div>
                        <p className="body-sm text-primary">{strength.marketing_angle}</p>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </ReportPage>
      ))}
    </>
  );
}
