'use client';

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

interface TocEntry {
  number: string | number;
  title: string;
  page: number;
  anchorId?: string;
  description?: string;
}

interface TableOfContentsProps {
  entries: TocEntry[];
  locale?: ReportLocale;
  pageNumber?: number;
  totalPages?: number;
}

export default function TableOfContents({
  entries,
  locale = 'en',
  pageNumber = 2,
  totalPages = 12,
}: TableOfContentsProps) {
  const { t } = useReportLocale(locale);

  return (
    <ReportPage pageNumber={pageNumber} totalPages={totalPages} background="white">
      <div style={{ paddingTop: 16 }}>
        <h2 className="display-md" style={{ marginBottom: 24 }}>
          {t('table_of_contents')}
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {entries.map((entry, i) => (
            <a
              key={i}
              href={entry.anchorId ? `#${entry.anchorId}` : undefined}
              onClick={(e) => {
                if (!entry.anchorId) return;
                e.preventDefault();
                document.getElementById(entry.anchorId)?.scrollIntoView({ behavior: 'smooth' });
              }}
              style={{
                display: 'flex',
                alignItems: 'flex-start',
                padding: '10px 0',
                textDecoration: 'none',
                color: 'inherit',
                cursor: entry.anchorId ? 'pointer' : 'default',
              }}
            >
              {/* Section number badge */}
              <div style={{
                width: 28,
                height: 28,
                borderRadius: 14,
                background: typeof entry.number === 'string' ? 'var(--text-secondary, #64748B)' : 'var(--ui-primary, #4285F4)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: 12,
                fontWeight: 700,
                flexShrink: 0,
              }}>
                {entry.number}
              </div>

              {/* Title + Description */}
              <div style={{ marginLeft: 12, flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span className="body-md" style={{ fontWeight: 500, flexShrink: 0 }}>
                    {entry.title}
                  </span>
                  {/* Dot leader */}
                  <span style={{
                    flex: 1,
                    borderBottom: '1px dotted var(--text-tertiary, #94A3B8)',
                    margin: '0 8px',
                    minWidth: 20,
                    alignSelf: 'flex-end',
                    marginBottom: 4,
                  }} />
                  {/* Page number */}
                  <span className="body-sm text-secondary" style={{ fontWeight: 600, flexShrink: 0 }}>
                    {entry.page}
                  </span>
                </div>
                {entry.description && (
                  <span style={{ display: 'block', fontSize: 11, color: 'var(--text-tertiary, #94A3B8)', lineHeight: 1.3, marginTop: 1 }}>
                    {entry.description}
                  </span>
                )}
              </div>
            </a>
          ))}
        </div>
      </div>
    </ReportPage>
  );
}
