'use client';

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

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

export default function EndPage({
  report,
  locale = 'en',
  pageNumber = 10,
  totalPages = 12,
}: EndPageProps) {
  const { t } = useReportLocale(locale);
  const conclusion = report.conclusion;

  if (!conclusion) return null;

  const card = {
    background: 'rgba(255,255,255,0.08)',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
  } as const;

  const divider = {
    border: 'none',
    borderTop: '1px solid rgba(255,255,255,0.12)',
    margin: '16px 0',
  } as const;

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="dark" showHeader={false}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', color: 'white' }}>
        {/* Title */}
        <div style={{ textAlign: 'center', marginBottom: 24, paddingTop: 16 }}>
          <h2 className="display-md" style={{ color: 'white', marginBottom: 4 }}>
            {t('end_page_title')}
          </h2>
        </div>

        {/* Key Takeaways */}
        {conclusion.takeaways.length > 0 && (
          <div style={card}>
            <h3 style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#F59E0B', marginBottom: 10 }}>
              {t('key_takeaways')}
            </h3>
            <ol style={{ margin: 0, paddingLeft: 20 }}>
              {conclusion.takeaways.map((item, i) => (
                <li key={i} style={{ marginBottom: 6, fontWeight: 600, lineHeight: 1.6, fontSize: 13, color: 'rgba(255,255,255,0.9)' }}>
                  {item}
                </li>
              ))}
            </ol>
          </div>
        )}

        {/* 90-Day Focus */}
        {conclusion.ninety_day_focus && (
          <div style={{ ...card, borderLeft: '3px solid #4285F4' }}>
            <h4 style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#60A5FA', marginBottom: 6 }}>
              {t('ninety_day_focus')}
            </h4>
            <p style={{ lineHeight: 1.6, fontSize: 12, color: 'rgba(255,255,255,0.8)', margin: 0 }}>
              {conclusion.ninety_day_focus}
            </p>
          </div>
        )}

        {/* Review Cadence */}
        {conclusion.review_cadence && (
          <div style={{ marginBottom: 16 }}>
            <h4 style={{ fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.7)', marginBottom: 4 }}>
              {t('review_cadence')}
            </h4>
            <p style={{ lineHeight: 1.5, fontSize: 12, color: 'rgba(255,255,255,0.6)', margin: 0 }}>
              {conclusion.review_cadence}
            </p>
          </div>
        )}

        <hr style={divider} />

        {/* Cost of Inaction */}
        {conclusion.cost_of_inaction && (
          <div style={{ ...card, borderLeft: '3px solid #F59E0B', background: 'rgba(245,158,11,0.1)' }}>
            <h4 style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#FBBF24', marginBottom: 6 }}>
              {t('cost_of_inaction')}
            </h4>
            <p style={{ lineHeight: 1.6, fontSize: 12, color: 'rgba(255,255,255,0.85)', margin: 0 }}>
              {conclusion.cost_of_inaction}
            </p>
          </div>
        )}

        {/* Spacer */}
        <div style={{ flex: 1 }} />

        <hr style={divider} />

        {/* Branding */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, marginBottom: 16 }}>
          <div style={{ textAlign: 'center' }}>
            <p style={{ fontWeight: 700, fontSize: 16, marginBottom: 2, color: 'white' }}>
              whyrating<span style={{ color: '#F59E0B' }}>.com</span>
            </p>
            <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{t('reputation_intelligence')}</p>
            <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 4 }}>{t('view_dashboard')}</p>
          </div>
        </div>

        {/* Confidentiality */}
        <p style={{ textAlign: 'center', color: 'rgba(255,255,255,0.3)', fontSize: 10, marginBottom: 0 }}>
          {t('confidential_footer')}
        </p>
      </div>
    </ReportPage>
  );
}
