'use client'

import { useState } from 'react'
import BenchmarkExplainer from '@/components/BenchmarkExplainer'
import LeaderboardTable from '@/components/LeaderboardTable'
import GuardrailsTable from '@/components/GuardrailsTable'
import GuardrailDistribution from '@/components/GuardrailDistribution'
import AboutSection from '@/components/AboutSection'
import ScoreDistribution from '@/components/ScoreDistribution'
import InsightsSection from '@/components/InsightsSection'
import ScrollReveal from '@/components/ScrollReveal'
import type { ModelData, GuardrailData, MetricThresholds, GuardrailThresholds } from '@/lib/types'

type Mode = 'models' | 'guardrails'

const TOGGLE_OPTIONS = [
  { key: 'models', label: 'LLM Models', subtitle: '' },
  { key: 'guardrails', label: 'Safety Guardrails', subtitle: '' },
]

interface Props {
  models: ModelData[]
  guardrails: GuardrailData[]
  maxFairness: number
  thresholds: MetricThresholds
  guardrailThresholds: GuardrailThresholds
  modelCount: number
  guardrailCount: number
}

export default function EvaluationShell({ models, guardrails, maxFairness, thresholds, guardrailThresholds, modelCount, guardrailCount }: Props) {
  const [mode, setMode] = useState<Mode>('models')

  const options = TOGGLE_OPTIONS.map(o => ({
    ...o,
    subtitle: o.key === 'models'
      ? `Evaluating ${modelCount} models across 3 dimensions`
      : `Evaluating ${guardrailCount} guardrails on localised content safety`,
  }))

  return (
    <>
      <BenchmarkExplainer mode={mode} onModeChange={setMode} options={options} />

      <section id="leaderboard" style={{ paddingTop: '1.5rem' }}>
        <div className="section-wrap" style={{ paddingTop: 0, paddingBottom: '1rem' }}>
          <ScrollReveal>
            <h2 className="section-title">Results</h2>
            <p style={{ fontSize: 15, color: 'var(--text-2)', marginTop: '0.4rem' }}>
              {mode === 'models'
                ? 'Score distribution across evaluation dimensions.'
                : 'Score distribution across detection metrics.'}
            </p>
          </ScrollReveal>
        </div>

        {mode === 'models' && (
          <div className="section-wrap" style={{ paddingTop: 0, paddingBottom: '1.5rem' }}>
            <ScrollReveal className="reveal-delay-1">
              <div className="insight-card">
                <div className="insight-card-heading">Where models cluster</div>
                <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.65, marginBottom: '1.5rem', maxWidth: '64ch' }}>
                  Each dot is one active model, coloured by lab. The dashed line marks the field average.
                  Fairness is inverted: dots further right are more equitable.
                </p>
                <ScoreDistribution models={models} maxFairness={maxFairness} />
              </div>
            </ScrollReveal>
          </div>
        )}

        {mode === 'guardrails' && (
          <div className="section-wrap" style={{ paddingTop: 0, paddingBottom: '1.5rem' }}>
            <ScrollReveal className="reveal-delay-1">
              <div className="insight-card">
                <div className="insight-card-heading">Where guardrails cluster</div>
                <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.65, marginBottom: '1.5rem', maxWidth: '64ch' }}>
                  Each dot is one guardrail, coloured by provider. The dashed line marks the field average.
                  All metrics: higher is better.
                </p>
                <GuardrailDistribution guardrails={guardrails} />
              </div>
            </ScrollReveal>
          </div>
        )}

      </section>

      <section style={{ borderTop: '1px solid var(--border-0)' }}>
        <AboutSection mode={mode} thresholds={thresholds} guardrailThresholds={guardrailThresholds} />
      </section>

      <section style={{ borderTop: '1px solid var(--border-0)' }}>
        <div className="section-wrap" style={{ paddingTop: '1.5rem', paddingBottom: '1.5rem' }}>
          <ScrollReveal>
            <h2 className="section-title">Leaderboard</h2>
            <p style={{
              marginTop: '0.5rem',
              marginBottom: '1.25rem',
              fontSize: 13,
              color: 'var(--text-2)',
              maxWidth: '64ch',
              lineHeight: 1.7,
            }}>
              {mode === 'models'
                ? 'Click any row to expand the full metric breakdown. Click a creator badge to filter. Fairness: ↓ lower = more equitable.'
                : 'Click any row to expand the full metric breakdown. Click a provider badge to filter. Higher scores = better detection.'}
            </p>
          </ScrollReveal>
          {mode === 'models'
            ? <LeaderboardTable models={models} maxFairness={maxFairness} />
            : <GuardrailsTable guardrails={guardrails} />
          }
        </div>
      </section>

      <InsightsSection models={models} guardrails={guardrails} maxFairness={maxFairness} mode={mode} />
    </>
  )
}