'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 DomainRadar from '../charts/DomainRadar';
import { getDomainColor } from '../styles/report-theme';
import { translateDomain } from '../i18n/contentTranslations';

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

export default function DomainPerformance({ report, locale = 'en', pageNumber = 5, totalPages = 9 }: DomainPerformanceProps) {
  const { t } = useReportLocale(locale);
  const domains = report.domains;

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

  const sorted = [...domains].sort((a, b) => b.score - a.score);

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="gray">
      <SectionHeader
        number={4}
        title={t('domain_performance')}
        subtitle={t('domain_performance_lead')}
      />

      {report.domain_overview && (
        <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-brand)', padding: '16px 20px', marginBottom: 20 }}>
          <p className="body-sm" style={{ margin: 0, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
            {report.domain_overview}
          </p>
        </div>
      )}

      {/* Two-column: Radar + Score Bars */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
        <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-brand)', padding: 20 }}>
          <DomainRadar domains={domains} locale={locale} />
        </div>

        <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-brand)', padding: 20 }}>
          <div className="score-bar-group">
            {sorted.map((d) => (
              <div key={d.domain} className="score-bar-row">
                <span className="score-bar-label" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className="domain-dot" style={{ backgroundColor: getDomainColor(d.domain) }} />
                  {translateDomain(d.label, locale)}
                </span>
                <div className="score-bar-track">
                  <div className="score-bar-fill" style={{ width: `${d.score}%`, backgroundColor: getDomainColor(d.domain) }} />
                </div>
                <span className="score-bar-value" style={{ color: getDomainColor(d.domain) }}>{d.score}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Domain Detail Cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {domains.map((d) => (
          <div key={d.domain} style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-brand)', padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <span className="domain-dot" style={{ backgroundColor: getDomainColor(d.domain) }} />
              <span className="heading-md" style={{ fontSize: 13 }}>{translateDomain(d.label, locale)}</span>
            </div>
            <div className="stat-value text-primary" style={{ fontSize: 28 }}>{d.score}%</div>
            <div className="body-sm" style={{ marginTop: 4 }}>
              {d.weight}% {t('domain_weight_suffix')} &middot; {d.primitives.length} {t('domain_aspects_suffix')}
            </div>
            {d.narrative && (
              <p className="body-sm" style={{ marginTop: 8, lineHeight: 1.5, color: 'var(--text-secondary)', fontSize: 12 }}>
                {d.narrative}
              </p>
            )}
          </div>
        ))}
      </div>
    </ReportPage>
  );
}
