import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, Tooltip, ZAxis, LineChart, Line } from 'recharts';
import config from '../../config';

interface PriceData {
  pricePoints: {
    price: number;
    salesVolume: number;
    revenue: number;
    category: string;
  }[];
  elasticity: {
    date: string;
    price: number;
    demand: number;
  }[];
  recommendations: {
    product: string;
    currentPrice: number;
    recommendedPrice: number;
    potentialRevenue: number;
    confidence: number;
  }[];
}

export function PriceAnalysis() {
  const { data, isLoading, error } = useQuery<PriceData>({
    queryKey: ['price-analysis'],
    queryFn: async () => {
      try {
        const response = await fetch(`${config.apiUrl}/analytics/pricing`);
        if (!response.ok) {
          throw new Error(`Failed to fetch: ${response.status}`);
        }
        const rawData = await response.json();

        if (!rawData || !rawData.pricePoints) {
          return {
            pricePoints: [],
            elasticity: [],
            recommendations: []
          };
        }
        
        return {
          pricePoints: (rawData.pricePoints || []).map((item: any) => ({
            price: Number(item.price) || 0,
            salesVolume: Number(item.salesVolume || item.salesvolume) || 0,
            revenue: Number(item.revenue) || 0,
            category: item.category || ''
          })),
          elasticity: (rawData.elasticity || []).map((item: any) => ({
            date: item.date || '',
            price: Number(item.price) || 0,
            demand: Number(item.demand) || 0
          })),
          recommendations: (rawData.recommendations || []).map((item: any) => ({
            product: item.product || '',
            currentPrice: Number(item.currentPrice || item.currentprice) || 0,
            recommendedPrice: Number(item.recommendedPrice || item.recommendedprice) || 0,
            potentialRevenue: Number(item.potentialRevenue || item.potentialrevenue) || 0,
            confidence: Number(item.confidence) || 0
          }))
        };
      } catch (err) {
        console.error('Error fetching price data:', err);
        throw err;
      }
    },
    retry: 1
  });

  if (isLoading) {
    return <div>Loading price analysis...</div>;
  }

  if (error || !data) {
    return (
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Price Analysis</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-red-500">
            Unable to load price analysis. The price metrics may need to be set up in the database.
          </p>
        </CardContent>
      </Card>
    );
  }

  // Early return if no data to display
  if (
    data.pricePoints.length === 0 && 
    data.elasticity.length === 0 && 
    data.recommendations.length === 0
  ) {
    return (
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Price Analysis</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground">
            No price data available. This may be because the price metrics haven't been calculated yet.
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="grid gap-4">
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Price Point Analysis</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <ScatterChart>
                <XAxis 
                  dataKey="price" 
                  name="Price"
                  tickFormatter={(value) => `$${value}`}
                />
                <YAxis 
                  dataKey="salesVolume" 
                  name="Sales Volume"
                />
                <ZAxis 
                  dataKey="revenue" 
                  range={[50, 400]} 
                  name="Revenue"
                />
                <Tooltip 
                  formatter={(value: number, name: string) => {
                    if (name === 'Price') return [`$${value}`, name];
                    if (name === 'Sales Volume') return [value.toLocaleString(), name];
                    if (name === 'Revenue') return [`$${value.toLocaleString()}`, name];
                    return [value, name];
                  }}
                />
                <Scatter 
                  data={data.pricePoints} 
                  fill="#a78bfa"
                  name="Products"
                />
              </ScatterChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Price Elasticity</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={data.elasticity}>
                <XAxis 
                  dataKey="date" 
                  tickFormatter={(value) => new Date(value).toLocaleDateString()}
                />
                <YAxis yAxisId="left" orientation="left" stroke="#a78bfa" />
                <YAxis 
                  yAxisId="right" 
                  orientation="right" 
                  stroke="#4ade80"
                  tickFormatter={(value) => `$${value}`}
                />
                <Tooltip
                  labelFormatter={(label) => new Date(label).toLocaleDateString()}
                  formatter={(value: number, name: string) => {
                    if (name === 'Price') return [`$${value}`, name];
                    return [value.toLocaleString(), name];
                  }}
                />
                <Line 
                  yAxisId="left"
                  type="monotone" 
                  dataKey="demand" 
                  stroke="#a78bfa" 
                  name="Demand"
                />
                <Line 
                  yAxisId="right"
                  type="monotone" 
                  dataKey="price" 
                  stroke="#4ade80" 
                  name="Price"
                />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Price Optimization Recommendations</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {data.recommendations.map((item) => (
              <div key={`${item.product}-${item.currentPrice}`} className="flex items-center">
                <div className="flex-1">
                  <p className="text-sm font-medium">{item.product}</p>
                  <p className="text-sm text-muted-foreground">
                    Current Price: ${item.currentPrice.toFixed(2)}
                  </p>
                </div>
                <div className="ml-4 text-right space-y-1">
                  <p className="text-sm font-medium">
                    Recommended: ${item.recommendedPrice.toFixed(2)}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    Potential Revenue: ${item.potentialRevenue.toLocaleString()}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    Confidence: {item.confidence}%
                  </p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 