'use client'

import { useState } from 'react'
import type { ModelData } from '@/lib/types'
import ScoreDistribution from '@/components/ScoreDistribution'
import MetricBarAccordion from '@/components/MetricBarAccordion'

type View = 'dots' | 'bars'

const VIEWS: { key: View; label: string }[] = [
  { key: 'dots', label: 'Dots' },
  { key: 'bars', label: 'Bars' },
]

export default function ClusterView({
  models,
  maxFairness,
}: {
  models: ModelData[]
  maxFairness: number
}) {
  const [view, setView] = useState<View>('dots')

  return (
    <div>
      {/* Dots ⇄ Bars toggle */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
        <div style={{ display: 'inline-flex', border: '1.5px solid var(--border-1)', borderRadius: 7, overflow: 'hidden' }}>
          {VIEWS.map((v, i) => (
            <button key={v.key} onClick={() => setView(v.key)} style={{
              height: 28, padding: '0 16px',
              border: 'none', borderLeft: i > 0 ? '1px solid var(--border-1)' : 'none',
              outline: 'none',
              fontSize: 10, fontFamily: 'inherit', fontWeight: 700,
              letterSpacing: '0.05em', textTransform: 'uppercase',
              color: view === v.key ? 'white' : 'var(--text-2)',
              background: view === v.key ? 'var(--accent)' : 'transparent',
              cursor: 'pointer', transition: 'background 0.12s, color 0.12s',
            }}>
              {v.label}
            </button>
          ))}
        </div>
      </div>

      {view === 'dots'
        ? <ScoreDistribution models={models} maxFairness={maxFairness} />
        : <MetricBarAccordion models={models} maxFairness={maxFairness} />
      }
    </div>
  )
}