import { useMemo } from 'react';
import {
    Bar,
    BarChart,
    CartesianGrid,
    LabelList,
    Legend,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis,
} from 'recharts';
import type { BarHorizontalRow } from '@/components/graphs/BarHorizontal';

export type BarVerticalProps = {
    data: BarHorizontalRow[];
    className?: string;
    'aria-label'?: string;
    /** Altura fija del área del gráfico (px). */
    height?: number;
};

const NO_CUMPLE_COLOR = '#e70659';
const CUMPLE_COLOR = '#00D8FF';

const MIN_PCT_FOR_LABEL = 8;

function formatBarLabel(value: unknown): string {
    const n = Number(value ?? 0);
    if (!Number.isFinite(n) || n < MIN_PCT_FOR_LABEL) {
        return '';
    }
    return `${n}%`;
}

export default function BarVertical({
    data,
    className = 'max-w-5xl',
    'aria-label': ariaLabel = 'Gráfico de barras verticales apiladas',
    height = 420,
}: BarVerticalProps) {
    const marginBottom = useMemo(() => (data.length > 6 ? 100 : 56), [data.length]);

    return (
        <div className={className} role="img" aria-label={ariaLabel}>
            <ResponsiveContainer width="100%" height={height}>
                <BarChart
                    data={data}
                    margin={{ top: 8, right: 16, left: 8, bottom: marginBottom }}
                    barCategoryGap="18%"
                >
                    <CartesianGrid strokeDasharray="3 3" className="stroke-zinc-200 dark:stroke-zinc-700" />
                    <XAxis
                        type="category"
                        dataKey="name"
                        tick={{ fontSize: 16 }}
                        interval={0}
                        angle={data.length > 4 ? -32 : 0}
                        textAnchor={data.length > 4 ? 'end' : 'middle'}
                        height={data.length > 4 ? 72 : 32}
                    />
                    <YAxis
                        type="number"
                        domain={[0, 100]}
                        tickFormatter={(v) => `${v}%`}
                        className="text-xs"
                    />
                    <Tooltip
                        formatter={(value, name) => [`${Number(value ?? 0)}%`, String(name ?? '')]}
                        labelFormatter={(label) => String(label)}
                        contentStyle={{ borderRadius: 8 }}
                    />
                    <Legend />
                    <Bar
                        name="No Cumple"
                        dataKey="noCumple"
                        stackId="compliance-v"
                        fill={NO_CUMPLE_COLOR}
                    >
                        <LabelList
                            dataKey="noCumple"
                            position="center"
                            formatter={formatBarLabel}
                            fill="#ffffff"
                            style={{ fontSize: 10, fontWeight: 700 }}
                        />
                    </Bar>
                    <Bar
                        name="Cumple"
                        dataKey="cumple"
                        stackId="compliance-v"
                        fill={CUMPLE_COLOR}
                    >
                        <LabelList
                            dataKey="cumple"
                            position="center"
                            formatter={formatBarLabel}
                            fill="#18181b"
                            style={{ fontSize: 10, fontWeight: 700 }}
                        />
                    </Bar>
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
}