'use client';

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

interface HowToReadProps {
  locale?: ReportLocale;
  pageNumber?: number;
  totalPages?: number;
}

const SCORE_BANDS_VISUAL = [
  { range: '0–39', color: '#ef4444', key: 'score_critical', width: 40 },
  { range: '40–59', color: '#f97316', key: 'score_poor', width: 20 },
  { range: '60–74', color: '#f59e0b', key: 'score_fair', width: 15 },
  { range: '75–89', color: '#22c55e', key: 'score_good', width: 15 },
  { range: '90–100', color: '#059669', key: 'score_excellent', width: 10 },
];

const VALENCE_MARKERS = [
  { symbol: '+', color: '#22c55e', bg: '#DCFCE7', key: 'how_to_read_valence_pos' },
  { symbol: '−', color: '#ef4444', bg: '#FEE2E2', key: 'how_to_read_valence_neg' },
  { symbol: '0', color: '#9ca3af', bg: '#F3F4F6', key: 'how_to_read_valence_neu' },
  { symbol: '±', color: '#f59e0b', bg: '#FEF3C7', key: 'how_to_read_valence_mix' },
];

const DOMAINS = [
  { code: 'O', color: '#3b82f6', key: 'how_to_read_domain_o' },
  { code: 'P', color: '#22c55e', key: 'how_to_read_domain_p' },
  { code: 'J', color: '#f59e0b', key: 'how_to_read_domain_j' },
  { code: 'E', color: '#8b5cf6', key: 'how_to_read_domain_e' },
  { code: 'V', color: '#f43f5e', key: 'how_to_read_domain_v' },
];

const INTENSITY_LEVELS = [
  { level: 1, bars: 1, key: 'how_to_read_intensity_1' },
  { level: 2, bars: 2, key: 'how_to_read_intensity_2' },
  { level: 3, bars: 3, key: 'how_to_read_intensity_3' },
];

export default function HowToRead({
  locale = 'en',
  pageNumber = 3,
  totalPages = 12,
}: HowToReadProps) {
  const { t } = useReportLocale(locale);

  const labelStyle = { fontSize: 13, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' } as const;
  const descStyle = { fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 10 } as const;
  const cardStyle = {
    background: 'var(--surface-card)',
    borderRadius: 'var(--radius-brand)',
    padding: 16,
  } as const;

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="gray">
      <div style={{ paddingTop: 16 }}>
        <h2 className="display-md" style={{ marginBottom: 4 }}>
          {t('how_to_read')}
        </h2>
        <p className="body-md text-secondary" style={{ marginBottom: 24 }}>
          {t('how_to_read_lead')}
        </p>

        {/* Score Spectrum */}
        <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-brand)', padding: 16, marginBottom: 16 }}>
          <h3 style={labelStyle}>{t('how_to_read_score_title')}</h3>
          <div style={{ display: 'flex', height: 28, borderRadius: 6, overflow: 'hidden', marginBottom: 6 }}>
            {SCORE_BANDS_VISUAL.map(band => (
              <div key={band.range} style={{
                width: `${band.width}%`,
                backgroundColor: band.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontSize: 9, fontWeight: 600,
              }}>
                <span>{t(band.key)}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: '#9ca3af', marginBottom: 8 }}>
            <span>0</span>
            <span>40</span>
            <span>60</span>
            <span>75</span>
            <span>90</span>
            <span>100</span>
          </div>
          <p style={descStyle}>{t('how_to_read_score_desc')}</p>
        </div>

        {/* 2x2 Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {/* Card 1: Sentiment Markers */}
          <div style={cardStyle}>
            <h3 style={labelStyle}>{t('how_to_read_valence_title')}</h3>
            <p style={descStyle}>{t('how_to_read_valence_desc')}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {VALENCE_MARKERS.map(v => (
                <div key={v.symbol} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 24, height: 24, borderRadius: 4,
                    background: v.bg, color: v.color, fontWeight: 700, fontSize: 14,
                    border: `1px solid ${v.color}`,
                  }}>
                    {v.symbol}
                  </span>
                  <span className="body-sm text-secondary">{t(v.key)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Card 2: Experience Domains */}
          <div style={cardStyle}>
            <h3 style={labelStyle}>{t('how_to_read_domains_title')}</h3>
            <p style={descStyle}>{t('how_to_read_domains_desc')}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {DOMAINS.map(d => (
                <div key={d.code} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 24, height: 24, borderRadius: 12,
                    background: d.color, color: 'white', fontWeight: 700, fontSize: 11,
                  }}>
                    {d.code}
                  </span>
                  <span className="body-sm text-secondary">{t(d.key)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Card 3: Intensity Levels */}
          <div style={cardStyle}>
            <h3 style={labelStyle}>{t('how_to_read_intensity_title')}</h3>
            <p style={descStyle}>{t('how_to_read_intensity_desc')}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {INTENSITY_LEVELS.map(il => (
                <div key={il.level} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ display: 'flex', gap: 2, width: 24, justifyContent: 'center' }}>
                    {Array.from({ length: 3 }, (_, i) => (
                      <div key={i} style={{
                        width: 5, height: 14, borderRadius: 2,
                        background: i < il.bars ? '#4285F4' : '#E2E8F0',
                      }} />
                    ))}
                  </div>
                  <span className="body-sm text-secondary">{t(il.key)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Card 4: Reading Tips */}
          <div style={cardStyle}>
            <h3 style={labelStyle}>{t('how_to_read_tips_title')}</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[1, 2, 3, 4].map(i => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <span style={{ fontSize: 11, color: 'var(--ui-primary, #4285F4)', fontWeight: 700, flexShrink: 0 }}>
                    {i}.
                  </span>
                  <span className="body-sm text-secondary" style={{ lineHeight: 1.4 }}>
                    {t(`how_to_read_tip_${i}`)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </ReportPage>
  );
}
