"use client"

import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle } from "lucide-react";
import { getOrderAnalyticsWithStore, type OrderAnalytics } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";

interface OrderAnalyticsChartProps {
  timeRange: string;
}

export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartProps) {
  const [data, setData] = useState<OrderAnalytics | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { toast } = useToast();

  useEffect(() => {
    const fetchOrderData = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const response = await getOrderAnalyticsWithStore(timeRange);
        setData(response);
      } catch (err) {
        console.error('Error fetching order analytics:', err);
        setError('Failed to load order data');
        toast({
          title: "Error",
          description: "Failed to load order analytics data.",
          variant: "destructive",
        });
      } finally {
        setIsLoading(false);
      }
    };

    fetchOrderData();
  }, [timeRange, toast]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
      case 'acknowledged':
        return 'bg-green-100 text-green-800';
      case 'paid':
      case 'shipped':
        return 'bg-blue-100 text-blue-800';
      case 'unpaid':
      case 'confirming':
        return 'bg-yellow-100 text-yellow-800';
      case 'cancelled':
        return 'bg-red-100 text-red-800';
      case 'disputed':
        return 'bg-orange-100 text-orange-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed':
      case 'acknowledged':
        return <CheckCircle className="h-4 w-4" />;
      case 'paid':
      case 'shipped':
        return <Clock className="h-4 w-4" />;
      case 'unpaid':
      case 'confirming':
        return <AlertCircle className="h-4 w-4" />;
      case 'cancelled':
        return <XCircle className="h-4 w-4" />;
      default:
        return <BarChart3 className="h-4 w-4" />;
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'completed':
        return 'Completed';
      case 'acknowledged':
        return 'Acknowledged';
      case 'paid':
        return 'Paid';
      case 'shipped':
        return 'Shipped';
      case 'unpaid':
        return 'Unpaid';
      case 'confirming':
        return 'Confirming';
      case 'cancelled':
        return 'Cancelled';
      case 'disputed':
        return 'Disputed';
      default:
        return status.charAt(0).toUpperCase() + status.slice(1);
    }
  };

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Order Analytics
          </CardTitle>
          <CardDescription>
            Order status distribution and trends
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <Skeleton className="h-32 w-full" />
            <Skeleton className="h-64 w-full" />
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error || !data) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5" />
            Order Analytics
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8">
            <BarChart3 className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
            <p className="text-muted-foreground">Failed to load order data</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const totalOrders = data.statusDistribution.reduce((sum, item) => sum + item.count, 0);
  const totalRevenue = data.dailyOrders.reduce((sum, item) => sum + item.revenue, 0);

  return (
    <div className="space-y-6">
      {/* Order Status Distribution */}
      <Card>
        <CardHeader>
          <CardTitle>Order Status Distribution</CardTitle>
          <CardDescription>
            Breakdown of orders by current status
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {data.statusDistribution.map((status) => {
              const percentage = totalOrders > 0 ? (status.count / totalOrders * 100).toFixed(1) : '0';
              const Icon = getStatusIcon(status._id);
              
              return (
                <div key={status._id} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`p-2 rounded-full ${getStatusColor(status._id)}`}>
                      {Icon}
                    </div>
                    <div>
                      <div className="font-medium">{getStatusLabel(status._id)}</div>
                      <div className="text-sm text-muted-foreground">
                        {status.count} orders
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold">{percentage}%</div>
                    <div className="text-sm text-muted-foreground">of total</div>
                  </div>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* Daily Order Trends */}
      <Card>
        <CardHeader>
          <CardTitle>Daily Order Trends</CardTitle>
          <CardDescription>
            Orders and revenue over the selected time period
          </CardDescription>
        </CardHeader>
        <CardContent>
          {data.dailyOrders.length === 0 ? (
            <div className="text-center py-8">
              <BarChart3 className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <p className="text-muted-foreground">No order data available for this period</p>
            </div>
          ) : (
            <div className="space-y-4">
              {/* Summary Stats */}
              <div className="grid grid-cols-3 gap-4 mb-6">
                <div className="text-center">
                  <div className="text-2xl font-bold text-blue-600">
                    {data.dailyOrders.length}
                  </div>
                  <div className="text-sm text-muted-foreground">Days with Orders</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-green-600">
                    {totalOrders}
                  </div>
                  <div className="text-sm text-muted-foreground">Total Orders</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-purple-600">
                    {formatGBP(totalRevenue)}
                  </div>
                  <div className="text-sm text-muted-foreground">Total Revenue</div>
                </div>
              </div>

              {/* Chart */}
              <div className="h-64 flex items-end justify-between gap-1">
                {data.dailyOrders.map((item, index) => {
                  const maxOrders = Math.max(...data.dailyOrders.map(d => d.orders));
                  const height = maxOrders > 0 ? (item.orders / maxOrders) * 100 : 0;
                  const date = new Date(item._id.year, item._id.month - 1, item._id.day);
                  const dateLabel = date.toLocaleDateString('en-GB', { 
                    month: 'short', 
                    day: 'numeric' 
                  });
                  
                  return (
                    <div key={index} className="flex-1 flex flex-col items-center">
                      <div 
                        className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
                        style={{ height: `${height}%` }}
                        title={`${dateLabel}: ${item.orders} orders, ${formatGBP(item.revenue)} revenue`}
                      />
                      <div className="text-xs text-muted-foreground mt-1 rotate-45 origin-left">
                        {dateLabel}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Processing Time */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Clock className="h-5 w-5" />
            Order Processing Time
          </CardTitle>
          <CardDescription>
            Average time to complete orders
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center">
            <div className="text-3xl font-bold text-blue-600">
              {data.averageProcessingDays.toFixed(1)}
            </div>
            <div className="text-sm text-muted-foreground">Average Days to Complete</div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}