import { RevenueDataPoint } from '@/types/dashboard';
import { formatCurrency } from '@/data/mockData';

interface RevenueChartProps {
  data: RevenueDataPoint[];
}

export function RevenueChart({ data }: RevenueChartProps) {
  const maxValue = Math.max(...data.map(d => Math.max(d.revenue, d.payouts)));
  
  return (
    <div className="neu-card p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-lg font-bold text-foreground">Revenue vs Payouts</h2>
          <p className="text-sm text-muted-foreground">Last 7 days comparison</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <span className="h-3 w-3 rounded-sm bg-accent" />
            <span className="text-sm text-muted-foreground">Revenue</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="h-3 w-3 rounded-sm bg-success" />
            <span className="text-sm text-muted-foreground">Payouts</span>
          </div>
        </div>
      </div>

      {/* Chart Area */}
      <div className="h-64 flex items-end gap-4 pt-8 pb-4">
        {data.map((point, index) => (
          <div key={index} className="flex-1 flex flex-col items-center gap-2">
            <div className="w-full flex items-end justify-center gap-1 h-48">
              {/* Revenue Bar */}
              <div 
                className="w-5 bg-accent rounded-t-md transition-all duration-300 hover:bg-ocean-blue"
                style={{ 
                  height: `${(point.revenue / maxValue) * 100}%`,
                  minHeight: '8px'
                }}
                title={formatCurrency(point.revenue)}
              />
              {/* Payout Bar */}
              <div 
                className="w-5 bg-success rounded-t-md transition-all duration-300 hover:opacity-80"
                style={{ 
                  height: `${(point.payouts / maxValue) * 100}%`,
                  minHeight: '8px'
                }}
                title={formatCurrency(point.payouts)}
              />
            </div>
            <span className="text-xs font-medium text-muted-foreground">{point.day}</span>
          </div>
        ))}
      </div>

      {/* Summary */}
      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/50">
        <div className="text-center">
          <p className="text-2xl font-bold text-foreground">
            {formatCurrency(data.reduce((sum, d) => sum + d.revenue, 0))}
          </p>
          <p className="text-sm text-muted-foreground">Total Revenue</p>
        </div>
        <div className="text-center">
          <p className="text-2xl font-bold text-foreground">
            {formatCurrency(data.reduce((sum, d) => sum + d.payouts, 0))}
          </p>
          <p className="text-sm text-muted-foreground">Total Payouts</p>
        </div>
      </div>
    </div>
  );
}