d3ro-voice/apps/admin/src/components/charts/feature-usage-chart.tsx

'use client'

// apps/admin/src/components/charts/feature-usage-chart.tsx
// feature별 일간 API 호출 — StackedBar

import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts'
import { Box } from '@mui/material'
import { d3roPalette, d3roFontMono } from '@d3ro/ui/theme'

interface FeatureUsageRow {
  date: string
  feature: string
  total_count: number
  unique_users: number
}

interface FeatureUsageChartProps {
  data: FeatureUsageRow[]
}

const FEATURE_COLORS: Record<string, string> = {
  llm_haiku: d3roPalette.accent.amber,
  llm_sonnet: d3roPalette.tag.green,
  llm_opus: d3roPalette.tag.purple,
  stt_transcribe: d3roPalette.tag.blue,
  translate: d3roPalette.tag.blue,
}

const DEFAULT_COLOR = d3roPalette.text.secondary

export function FeatureUsageChart({ data }: FeatureUsageChartProps): React.ReactElement {
  // Pivot: group by date, features as columns
  const features = [...new Set(data.map(d => d.feature))]
  const dateMap = new Map<string, Record<string, string | number>>()

  for (const row of data) {
    const existing = dateMap.get(row.date) ?? { date: row.date }
    existing[row.feature] = row.total_count
    dateMap.set(row.date, existing)
  }

  const chartData = [...dateMap.values()].sort((a, b) =>
    String(a.date).localeCompare(String(b.date))
  )

  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <ResponsiveContainer>
        <BarChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" stroke={d3roPalette.border.subtle} />
          <XAxis
            dataKey="date"
            tick={{ fill: d3roPalette.text.muted, fontFamily: d3roFontMono, fontSize: 10 }}
            tickFormatter={(val: string) => val.slice(5)}
          />
          <YAxis tick={{ fill: d3roPalette.text.muted, fontFamily: d3roFontMono, fontSize: 10 }} />
          <Tooltip
            contentStyle={{
              background: d3roPalette.bg.card,
              border: `1px solid ${d3roPalette.border.default}`,
              fontFamily: d3roFontMono,
              fontSize: 11,
              color: d3roPalette.text.primary,
            }}
          />
          <Legend wrapperStyle={{ fontFamily: d3roFontMono, fontSize: 11 }} />
          {features.map((feature) => (
            <Bar
              key={feature}
              dataKey={feature}
              stackId="a"
              fill={FEATURE_COLORS[feature] ?? DEFAULT_COLOR}
            />
          ))}
        </BarChart>
      </ResponsiveContainer>
    </Box>
  )
}