'use client';

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

const COLORS: Record<BookingStatus, string> = {
  PENDING_PAYMENT: '#f59e0b',
  CONFIRMED: '#2563eb',
  COMPLETED: '#10b981',
  CANCELLED: '#94a3b8',
  REFUNDED: '#ef4444',
};

export interface BookingStatusChartProps {
  data: Array<{ key: BookingStatus; count: number }>;
}

export function BookingStatusChart({ data }: BookingStatusChartProps) {
  const total = data.reduce((sum, row) => sum + row.count, 0);
  if (total === 0) {
    return (
      <div className="chart-empty">
        <p>No bookings have been created in this window.</p>
      </div>
    );
  }
  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
        <CartesianGrid stroke="#e6eaf0" strokeDasharray="3 3" />
        <XAxis dataKey="key" stroke="#64748b" tick={{ fontSize: 12 }} />
        <YAxis stroke="#64748b" tick={{ fontSize: 12 }} allowDecimals={false} />
        <Tooltip />
        <Bar dataKey="count" radius={[8, 8, 0, 0]}>
          {data.map((entry) => (
            <Cell key={entry.key} fill={COLORS[entry.key]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}