/**
 * Bot Traffic chart card: lazy-loaded recharts chart inside the white panel,
 * with the TimeRangeFilter header rendered through BotTrafficChart's
 * renderHeader slot (extracted unchanged from dashboard-analytics.tsx —
 * P2-2.1). All filter state lives in the parent DashboardAnalytics.
 */
import { Suspense } from 'react';
import { LoadingSpinner } from '../screen-loader';
import { TimeRangeFilter } from './time-range-filter';
import { LazyBotTrafficChart } from '@/lib/load-bot-traffic-chart';
import type { TimeRangeType } from './constants';

interface TrafficChartCardProps {
  apiRoot: string;
  apiNamespace: string;
  onActiveBotsChange: (activeBots: string[]) => void;
  timeRange: TimeRangeType;
  setTimeRange: (range: TimeRangeType) => void;
  startDate: string;
  setStartDate: (date: string) => void;
  endDate: string;
  setEndDate: (date: string) => void;
  customStartDate: string;
  setCustomStartDate: (date: string) => void;
  customEndDate: string;
  setCustomEndDate: (date: string) => void;
  showDatePicker: boolean;
  setShowDatePicker: (open: boolean) => void;
  showModelDropdown: boolean;
  setShowModelDropdown: (open: boolean) => void;
}

export function TrafficChartCard({
  apiRoot,
  apiNamespace,
  onActiveBotsChange,
  timeRange,
  setTimeRange,
  startDate,
  setStartDate,
  endDate,
  setEndDate,
  customStartDate,
  setCustomStartDate,
  customEndDate,
  setCustomEndDate,
  showDatePicker,
  setShowDatePicker,
  showModelDropdown,
  setShowModelDropdown,
}: TrafficChartCardProps) {
  return (
    <div className="bg-white p-6  shadow border border-gray-200 mb-6">
      <Suspense fallback={<div className="min-h-[320px] flex items-center justify-center"><LoadingSpinner /></div>}>
      <LazyBotTrafficChart 
        apiRoot={apiRoot}
        apiNamespace={apiNamespace}
        onActiveBotsChange={onActiveBotsChange}
        timeRange={
          timeRange === '7days' ? '7d' : 
          timeRange === '90days' ? '90d' : 
          '30d'
        }
        renderHeader={(filterContext) => (
          <TimeRangeFilter
            filterContext={filterContext}
            timeRange={timeRange}
            setTimeRange={setTimeRange}
            startDate={startDate}
            setStartDate={setStartDate}
            endDate={endDate}
            setEndDate={setEndDate}
            customStartDate={customStartDate}
            setCustomStartDate={setCustomStartDate}
            customEndDate={customEndDate}
            setCustomEndDate={setCustomEndDate}
            showDatePicker={showDatePicker}
            setShowDatePicker={setShowDatePicker}
            showModelDropdown={showModelDropdown}
            setShowModelDropdown={setShowModelDropdown}
          />
        )}
      />
      </Suspense>
    </div>
  );
}