// CIL[BEGIN chunk_id="metric_chart_module_header_1785000021" type="module_header" identity="module_header" parent="none"]
// CIL[DOC-MACRO purpose="Render a recharts line chart for a single observability metric series"]
// CIL[DOC-RESPONSIBILITY responsibility="Provide a reusable time-series chart card used by dashboard and observe pages"]
// CIL[DOC-CONTEXT module="workbench.components.MetricChart" layer="frontend-component" related_files="[\"custom/apps/workbench/pages/devops/DevopsDashboard.tsx\",\"custom/apps/workbench/pages/observe/PerformancePage.tsx\"]"]
// CIL[DOC-CONTRACT inputs="{ title, data, dataKey, color, formatter?, yTickFormatter? }" outputs="JSX chart card" errors="none" side_effects="renders SVG chart"]
// CIL[DOC-MICRO logic_summary="Wraps a ResponsiveContainer LineChart in a Card, handles empty state, and formats axes/tooltips" notable_decisions=[]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { formatDateTime } from '@core/lib/utils'
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
// CIL[END chunk_id="metric_chart_module_header_1785000021"]

// CIL[BEGIN chunk_id="metric_chart_metricchart_1785000021" type="function" identity="MetricChart" parent="metric_chart_module_header_1785000021"]
// CIL[DOC-MACRO purpose="Reusable single-series line chart card for observability data"]
// CIL[DOC-RESPONSIBILITY responsibility="Render a metric time-series with consistent formatting and empty state"]
// CIL[DOC-CONTEXT module="workbench.components.MetricChart" layer="frontend-component" related_files="[\"custom/apps/workbench/pages/observe/UptimePage.tsx\"]"]
// CIL[DOC-CONTRACT inputs="none" outputs="JSX card" errors="none" side_effects="renders SVG"]
// CIL[DOC-MICRO logic_summary="Uses Recharts LineChart inside a Card, formats bucket labels and tooltips" notable_decisions=[]]
// CIL[DOC-CONFIDENCE pass="first" score="0.90" flags="none"]
// CIL[DOC-STABILITY stability="experimental"]
// CIL[DOC-AUDIENCE audience="developer"]
interface MetricChartProps {
  title: string
  data: any[]
  dataKey: string
  color: string
  formatter?: (v: any) => string
  yTickFormatter?: (v: any) => string
}

export function MetricChart({ title, data, dataKey, color, formatter, yTickFormatter }: MetricChartProps) {
  return (
    <Card className="col-span-1">
      <CardHeader>
        <CardTitle className="text-base">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-64">
          {data.length === 0 ? (
            <div className="h-full flex items-center justify-center text-sm text-muted-foreground">
              No data for this range
            </div>
          ) : (
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={data}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                <XAxis
                  dataKey="bucket"
                  tick={{ fontSize: 11 }}
                  tickFormatter={(v) => formatDateTime(v, { month: 'short', day: 'numeric', hour: '2-digit' })}
                />
                <YAxis tick={{ fontSize: 11 }} tickFormatter={yTickFormatter} />
                <Tooltip
                  labelFormatter={(v) => formatDateTime(v)}
                  formatter={(value: any) => [formatter ? formatter(value) : value, dataKey]}
                />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="value"
                  name={dataKey}
                  stroke={color}
                  strokeWidth={2}
                  dot={false}
                  activeDot={{ r: 4 }}
                />
              </LineChart>
            </ResponsiveContainer>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
// CIL[END chunk_id="metric_chart_metricchart_1785000021"]