'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
const PRIORITY_COLORS = {
    Urgent: '#ef4444',
    High: '#f97316',
    Medium: '#eab308',
    Low: '#3b82f6',
    None: '#a3a3a3',
};
export function StatusBreakdown({ byState, byPriority, totalItems, className, }) {
    if (totalItems === 0) {
        return (_jsx("div", { "data-testid": "status-breakdown-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: _jsx("p", { className: "text-xs", children: "No work items to break down." }) }));
    }
    const stateData = byState.filter((s) => s.count > 0);
    const priorityData = byPriority.filter((p) => p.count > 0);
    return (_jsx("div", { "data-testid": "status-breakdown", className: className, children: _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-3 text-xs font-medium", children: "By State" }), _jsx(ResponsiveContainer, { width: "100%", height: 220, children: _jsxs(BarChart, { data: stateData, layout: "vertical", margin: { left: 60, right: 20 }, children: [_jsx(XAxis, { type: "number", tick: { fontSize: 10 } }), _jsx(YAxis, { type: "category", dataKey: "stateName", tick: { fontSize: 10 }, width: 55 }), _jsx(Tooltip, { contentStyle: {
                                            fontSize: 11,
                                            borderRadius: 8,
                                            border: '1px solid hsl(var(--border))',
                                        } }), _jsx(Bar, { dataKey: "count", radius: [0, 4, 4, 0], children: stateData.map((entry) => (_jsx(Cell, { fill: entry.stateColor }, entry.stateId))) })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-3 text-xs font-medium", children: "By Priority" }), _jsx(ResponsiveContainer, { width: "100%", height: 220, children: _jsxs(BarChart, { data: priorityData, layout: "vertical", margin: { left: 50, right: 20 }, children: [_jsx(XAxis, { type: "number", tick: { fontSize: 10 } }), _jsx(YAxis, { type: "category", dataKey: "priority", tick: { fontSize: 10 }, width: 45 }), _jsx(Tooltip, { contentStyle: {
                                            fontSize: 11,
                                            borderRadius: 8,
                                            border: '1px solid hsl(var(--border))',
                                        } }), _jsx(Bar, { dataKey: "count", radius: [0, 4, 4, 0], children: priorityData.map((entry) => (_jsx(Cell, { fill: PRIORITY_COLORS[entry.priority] ?? '#a3a3a3' }, entry.priority))) })] }) })] })] }) }));
}
