import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
} from 'recharts';
import type { RetentionDataPoint } from '../types';

export interface RetentionChartProps {
  /** Retention data points */
  data: RetentionDataPoint[];
  /** Chart title */
  title?: string;
  /** Height in pixels */
  height?: number;
  /** Color for bars */
  color?: string;
  /** Show D1/D7/D30 reference lines */
  showBenchmarks?: boolean;
  /** D1 benchmark value */
  d1Benchmark?: number;
  /** D7 benchmark value */
  d7Benchmark?: number;
  /** D30 benchmark value */
  d30Benchmark?: number;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

export function RetentionChart({
  data,
  title,
  height = 300,
  color = '#8884d8',
  showBenchmarks = false,
  d1Benchmark,
  d7Benchmark,
  d30Benchmark,
  loading = false,
  className,
}: RetentionChartProps) {
  if (loading) {
    return (
      <div
        className={className}
        style={{
          padding: '20px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        }}
      >
        <div style={{ height, backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  const formattedData = data.map((point) => ({
    ...point,
    ratePercent: point.rate * 100,
  }));

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
      }}
    >
      {title && (
        <div
          style={{
            fontSize: '16px',
            fontWeight: 600,
            marginBottom: '16px',
            color: '#111827',
          }}
        >
          {title}
        </div>
      )}
      <ResponsiveContainer width="100%" height={height}>
        <BarChart data={formattedData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="period" />
          <YAxis
            domain={[0, 100]}
            tickFormatter={(value: number) => `${value}%`}
          />
          <Tooltip
            formatter={(value: number) => [`${value.toFixed(1)}%`, 'Retention']}
          />
          <Bar dataKey="ratePercent" fill={color} name="Retention Rate" />
          {showBenchmarks && d1Benchmark !== undefined && (
            <ReferenceLine
              y={d1Benchmark}
              stroke="#22c55e"
              strokeDasharray="5 5"
              label={{ value: 'D1', position: 'right' }}
            />
          )}
          {showBenchmarks && d7Benchmark !== undefined && (
            <ReferenceLine
              y={d7Benchmark}
              stroke="#eab308"
              strokeDasharray="5 5"
              label={{ value: 'D7', position: 'right' }}
            />
          )}
          {showBenchmarks && d30Benchmark !== undefined && (
            <ReferenceLine
              y={d30Benchmark}
              stroke="#ef4444"
              strokeDasharray="5 5"
              label={{ value: 'D30', position: 'right' }}
            />
          )}
        </BarChart>
      </ResponsiveContainer>
      {data.length >= 3 && (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-around',
            marginTop: '16px',
            paddingTop: '16px',
            borderTop: '1px solid #e5e7eb',
          }}
        >
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '12px', color: '#6b7280' }}>D1</div>
            <div style={{ fontSize: '18px', fontWeight: 600, color: '#22c55e' }}>
              {data[0] ? `${(data[0].rate * 100).toFixed(1)}%` : '-'}
            </div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '12px', color: '#6b7280' }}>D7</div>
            <div style={{ fontSize: '18px', fontWeight: 600, color: '#eab308' }}>
              {data[6] ? `${(data[6].rate * 100).toFixed(1)}%` : '-'}
            </div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '12px', color: '#6b7280' }}>D30</div>
            <div style={{ fontSize: '18px', fontWeight: 600, color: '#ef4444' }}>
              {data[29] ? `${(data[29].rate * 100).toFixed(1)}%` : '-'}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
