'use client';

import type { ReportSynthesis, ActionItem } from '../types';
import type { ReportLocale } from '../i18n/useReportLocale';
import { useReportLocale } from '../i18n/useReportLocale';
import ReportPage from '../components/ReportPage';
import SectionHeader from '../components/SectionHeader';
import { translateLevel, translateTimeline, translatePrimitive } from '../i18n/contentTranslations';
import { paginateItems } from '../utils/paginate';

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

export default function ActionPlan({ report, locale = 'en', startPage = 8, totalPages = 9, sectionNumber = 7 }: ActionPlanProps) {
  const { t } = useReportLocale(locale);
  const actions = report.actions;

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

  // Build primitive → mention count map from themes
  const mentionMap = new Map<string, number>();
  for (const theme of report.themes) {
    mentionMap.set(theme.primitive, theme.count);
  }

  const pages = paginateItems(actions, 3, 4);

  return (
    <>
      {pages.map((pageItems, pageIdx) => {
        // Compute global offset for numbering
        let globalOffset = 0;
        for (let p = 0; p < pageIdx; p++) globalOffset += pages[p]!.length;

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

            <div>
              {pageItems.map((action, i) => (
                <ActionCard key={globalOffset + i} action={action} index={globalOffset + i} t={t} locale={locale} mentionCount={mentionMap.get(action.source)} />
              ))}
            </div>
          </ReportPage>
        );
      })}
    </>
  );
}

function ActionCard({ action, index, t, locale, mentionCount }: { action: ActionItem; index: number; t: (key: string) => string; locale: string; mentionCount?: number }) {
  return (
    <div className="framework-item" style={{ padding: 14 }}>
      <div className="framework-number" style={{ width: 30, height: 30, fontSize: 13 }}>{index + 1}</div>
      <div className="framework-body">
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div className="heading-md" style={{ fontSize: 14, marginBottom: 4 }}>{action.action}</div>
            <div className="body-sm">
              {t('owner')}: <strong>{action.owner}</strong> &middot; {t('source')}: {translatePrimitive(action.source, locale)}
              {mentionCount != null && (
                <span style={{ color: 'var(--ui-primary, #4285F4)', fontWeight: 600 }}> ({mentionCount} {t('mentions')})</span>
              )}
              {' '}&middot; {translateTimeline(action.timeline, locale)}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            <span className={`effort-badge ${action.effort}`}>{translateLevel(action.effort, locale)} {t('effort')}</span>
            <span className={`impact-badge ${action.impact}`}>{translateLevel(action.impact, locale)} {t('impact')}</span>
          </div>
        </div>
        {action.success_metric && (
          <div className="info-block" style={{ marginTop: 8, padding: '8px 12px' }}>
            <span className="body-sm"><strong>{t('success_metric')}:</strong> {action.success_metric}</span>
          </div>
        )}
        {action.detail && (
          <p className="body-sm" style={{ marginTop: 8, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
            {action.detail}
          </p>
        )}
        {action.evidence && (
          <div className="evidence-quote" style={{ marginTop: 8, padding: '8px 12px', fontSize: 12 }}>
            &ldquo;{action.evidence}&rdquo;
          </div>
        )}
      </div>
    </div>
  );
}
