'use client';

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

export interface CustomerBehaviorFunnelProps {
  searches: number;
  listingViews: number;
  saves: number;
  bookingAttempts: number;
}

export function CustomerBehaviorFunnel({
  searches,
  listingViews,
  saves,
  bookingAttempts,
}: CustomerBehaviorFunnelProps) {
  const data = [
    { stage: 'Searches', value: searches, color: '#06b6d4' },
    { stage: 'Listing views', value: listingViews, color: '#2563eb' },
    { stage: 'Saves', value: saves, color: '#8b5cf6' },
    { stage: 'Booking attempts', value: bookingAttempts, color: '#10b981' },
  ];
  const total = data.reduce((sum, row) => sum + row.value, 0);
  if (total === 0) {
    return (
      <div className="chart-empty">
        <p>No customer activity recorded in this window.</p>
      </div>
    );
  }
  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart layout="vertical" data={data} margin={{ top: 8, right: 24, left: 12, bottom: 0 }}>
        <CartesianGrid stroke="#e6eaf0" strokeDasharray="3 3" />
        <XAxis type="number" stroke="#64748b" tick={{ fontSize: 12 }} allowDecimals={false} />
        <YAxis type="category" dataKey="stage" stroke="#64748b" tick={{ fontSize: 12 }} width={120} />
        <Tooltip />
        <Bar dataKey="value" radius={[0, 8, 8, 0]}>
          {data.map((entry) => (
            <Cell key={entry.stage} fill={entry.color} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}