'use client';

import type { ReportSynthesis } from '../types';
import type { ReportLocale } from '../i18n/useReportLocale';
import { useReportLocale } from '../i18n/useReportLocale';
import ReportPage from '../components/ReportPage';
import ReportLogo from '../components/ReportLogo';
import ReputationScoreGauge from '../charts/ReputationScoreGauge';
import { getScoreColor } from '../styles/report-theme';

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

export default function CoverPage({ report, locale = 'en', pageNumber = 1, totalPages = 9 }: CoverPageProps) {
  const { t } = useReportLocale(locale);
  const score = report.reputation_score;
  const scoreColor = getScoreColor(score);

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="dark" showHeader={false}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', textAlign: 'center' }}>
        {/* Logo */}
        <ReportLogo variant="cover" />

        {/* Business Name */}
        <h1 className="display-xl text-inverse" style={{ marginTop: 40, marginBottom: 12, maxWidth: 700 }}>
          {report.business_name}
        </h1>

        {/* Category badge */}
        {report.category_label && (
          <span className="pill dark" style={{ marginBottom: 8 }}>
            {report.category_label}
          </span>
        )}

        {/* Date */}
        <p className="body-md" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>
          {new Date(report.report_date).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
        </p>

        {/* Reporting Period */}
        {report.methodology?.oldest_review && report.methodology?.newest_review && (
          <p className="body-sm" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>
            {t('reporting_period')}: {new Date(report.methodology.oldest_review).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { year: 'numeric', month: 'short' })} – {new Date(report.methodology.newest_review).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { year: 'numeric', month: 'short' })}
          </p>
        )}

        <div style={{ marginBottom: 24 }} />

        {/* Score Gauge */}
        <div className="cover-score-gauge">
          <ReputationScoreGauge score={score} locale={locale} />
        </div>

        {/* Feature Pills */}
        <div className="cover-feature-pills">
          <span className="pill dark">{report.review_count.toLocaleString()} {t('reviews_analyzed')}</span>
          <span className="pill dark">{t('reputation_score')}: {Math.round(score)}</span>
          <span className="pill dark">{report.critical_issues.length} {t('critical_issues_count')}</span>
        </div>

        {/* Stats Row */}
        <div className="stats-row" style={{ marginTop: 32, maxWidth: 500, width: '100%' }}>
          <div className="stat-item dark">
            <div className="stat-value" style={{ color: 'white' }}>{report.current_rating.toFixed(1)}</div>
            <div className="stat-label">{t('current_rating')}</div>
          </div>
          <div className="stat-item dark">
            <div className="stat-value" style={{ color: scoreColor }}>{report.potential_rating.toFixed(1)}</div>
            <div className="stat-label">{t('potential_rating')}</div>
          </div>
          <div className="stat-item dark">
            <div className="stat-value" style={{ color: 'white' }}>{report.review_count.toLocaleString()}</div>
            <div className="stat-label">{t('reviews_analyzed')}</div>
          </div>
        </div>

        {/* Confidentiality */}
        <p className="body-sm" style={{ color: 'rgba(255,255,255,0.3)', marginTop: 'auto', paddingTop: 24, fontSize: 10 }}>
          {t('confidential_footer')}
        </p>
      </div>
    </ReportPage>
  );
}
