import { PretrainedIdentity } from '../training/PretrainedSourceSelect';
import { useTuningStore } from './tuningStore';
import { AgentDecisionTimeline } from './AgentDecisionTimeline';
import { MetricsComparisonBoard } from './MetricsComparisonBoard';
import { TuningControlToolbar } from './TuningControlToolbar';
import { TuningLeaderboard } from './TuningLeaderboard';
import { TuningSessionRail } from './TuningSessionRail';
import { useTuningPolling } from './useTuningPolling';

export function TuningConsole() {
  useTuningPolling();
  const pretrained = useTuningStore((state) => state.sessionConfig?.pretrained);
  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <TuningControlToolbar />
      <div className="px-3">
        <PretrainedIdentity source={pretrained} />
      </div>
      <div className="grid grid-cols-1 xl:min-h-0 xl:flex-1 xl:grid-cols-[286px_minmax(520px,1fr)_390px]">
        <TuningSessionRail />
        <main className="h-[920px] min-w-0 overflow-auto bg-app p-3 panel-scroll xl:h-auto">
          <div className="mx-auto max-w-[1500px] space-y-3">
            <MetricsComparisonBoard />
            <TuningLeaderboard />
          </div>
        </main>
        <aside className="h-[640px] min-h-0 overflow-auto border-t border-border bg-panel p-3 panel-scroll xl:h-auto xl:border-l xl:border-t-0">
          <AgentDecisionTimeline />
        </aside>
      </div>
    </div>
  );
}