'use client';

import React from 'react';
import {
  AreaChart,
  Area,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';

interface TrendData {
  period: string;
  paid: number;
  cap: number;
}

interface HotelData {
  hotel: string;
  sales: number;
  commissions: number;
}

interface ChartProps {
  trendData: TrendData[];
  hotelData: HotelData[];
  locale: string;
}

export function TrendsChart({ trendData, locale }: { trendData: TrendData[]; locale: string }) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat(locale === 'es' ? 'es-CO' : 'en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 0
    }).format(value);
  };

  return (
    <div style={{ width: '100%', height: 350 }}>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={trendData}
          margin={{ top: 10, right: 30, left: 10, bottom: 0 }}
        >
          <defs>
            <linearGradient id="colorPaid" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--primary)" stopOpacity={0.4}/>
              <stop offset="95%" stopColor="var(--primary)" stopOpacity={0.0}/>
            </linearGradient>
            <linearGradient id="colorCap" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--secondary)" stopOpacity={0.2}/>
              <stop offset="95%" stopColor="var(--secondary)" stopOpacity={0.0}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
          <XAxis
            dataKey="period"
            stroke="var(--foreground)"
            fontSize={12}
            tickLine={false}
          />
          <YAxis
            stroke="var(--foreground)"
            fontSize={12}
            tickLine={false}
            axisLine={false}
            tickFormatter={formatCurrency}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'var(--card)',
              borderColor: 'var(--border)',
              borderRadius: 'var(--radius-md)',
              color: 'var(--foreground)'
            }}
            formatter={(value: any) => [formatCurrency(Number(value)), '']}
          />
          <Legend />
          <Area
            type="monotone"
            dataKey="paid"
            name={locale === 'es' ? 'Comisión Pagada' : 'Paid Commission'}
            stroke="var(--primary)"
            strokeWidth={2}
            fillOpacity={1}
            fill="url(#colorPaid)"
          />
          <Area
            type="monotone"
            dataKey="cap"
            name={locale === 'es' ? 'Límite de Presupuesto' : 'Budget Cap'}
            stroke="var(--secondary)"
            strokeWidth={2}
            strokeDasharray="4 4"
            fillOpacity={1}
            fill="url(#colorCap)"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export function HotelComparisonChart({ hotelData, locale }: { hotelData: HotelData[]; locale: string }) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat(locale === 'es' ? 'es-CO' : 'en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 0
    }).format(value);
  };

  return (
    <div style={{ width: '100%', height: 350 }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={hotelData}
          margin={{ top: 20, right: 30, left: 10, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
          <XAxis
            dataKey="hotel"
            stroke="var(--foreground)"
            fontSize={12}
            tickLine={false}
          />
          <YAxis
            stroke="var(--foreground)"
            fontSize={12}
            tickLine={false}
            axisLine={false}
            tickFormatter={formatCurrency}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'var(--card)',
              borderColor: 'var(--border)',
              borderRadius: 'var(--radius-md)',
              color: 'var(--foreground)'
            }}
            formatter={(value: any) => [formatCurrency(Number(value)), '']}
          />
          <Legend />
          <Bar
            dataKey="sales"
            name={locale === 'es' ? 'Ventas Totales' : 'Total Sales'}
            fill="var(--primary)"
            radius={[4, 4, 0, 0]}
            opacity={0.85}
          />
          <Bar
            dataKey="commissions"
            name={locale === 'es' ? 'Comisiones' : 'Commissions'}
            fill="var(--secondary)"
            radius={[4, 4, 0, 0]}
            opacity={0.85}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}
