'use client';

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import type { CategoryOperatingMode } from '@navi/types';

const MODE_ORDER: CategoryOperatingMode[] = [
  'DISABLED',
  'MARKETING_ONLY',
  'INQUIRY_ONLY',
  'DEMO_ONLY',
  'SANDBOX_READY',
  'LIVE_READY',
];

const COLORS: Record<CategoryOperatingMode, string> = {
  DISABLED: '#94a3b8',
  MARKETING_ONLY: '#64748b',
  INQUIRY_ONLY: '#f59e0b',
  DEMO_ONLY: '#06b6d4',
  SANDBOX_READY: '#2563eb',
  LIVE_READY: '#10b981',
};

const LABEL: Record<CategoryOperatingMode, string> = {
  DISABLED: 'Disabled',
  MARKETING_ONLY: 'Marketing only',
  INQUIRY_ONLY: 'Inquiry only',
  DEMO_ONLY: 'Demo only',
  SANDBOX_READY: 'Sandbox',
  LIVE_READY: 'Live ready',
};

export interface ProviderReadinessChartProps {
  data: Array<{ key: CategoryOperatingMode; count: number }>;
}

export function ProviderReadinessChart({ data }: ProviderReadinessChartProps) {
  const ordered = MODE_ORDER.map((mode) => {
    const found = data.find((row) => row.key === mode);
    return { key: mode, label: LABEL[mode], count: found?.count ?? 0 };
  });
  const total = ordered.reduce((sum, row) => sum + row.count, 0);
  if (total === 0) {
    return (
      <div className="chart-empty">
        <p>No category operating modes recorded yet.</p>
      </div>
    );
  }
  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart data={ordered} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
        <CartesianGrid stroke="#e6eaf0" strokeDasharray="3 3" />
        <XAxis dataKey="label" stroke="#64748b" tick={{ fontSize: 11 }} interval={0} />
        <YAxis stroke="#64748b" tick={{ fontSize: 12 }} allowDecimals={false} />
        <Tooltip />
        <Bar dataKey="count" radius={[8, 8, 0, 0]}>
          {ordered.map((entry) => (
            <Cell key={entry.key} fill={COLORS[entry.key]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}