import React, { useState, useEffect, useRef } from "react";
import { apiClient } from "@/utils/apiClient";
import { useQuery } from "@tanstack/react-query";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Package,
  Truck,
  UserPlus,
  XCircle,
  DollarSign,
  Activity,
  FileText,
} from "lucide-react";
import { format } from "date-fns";
import { Skeleton } from "@/components/ui/skeleton";
import { EventDialog } from "./EventFeed.jsx";
import { DashboardErrorState } from "@/components/dashboard/shared";

const METRIC_IDS = {
  PLACED_ORDER: "Y8cqcF",
  SHIPPED_ORDER: "VExpdL",
  ACCOUNT_CREATED: "TeeypV",
  CANCELED_ORDER: "YjVMNg",
  NEW_BLOG_POST: "YcxeDr",
  PAYMENT_REFUNDED: "R7XUYh",
};

const EVENT_TYPES = {
  [METRIC_IDS.PLACED_ORDER]: {
    label: "Order Placed",
    color: "bg-green-400/20",
    textColor: "text-green-50",
    iconColor: "text-green-300",
    gradient: "from-green-900/80 to-green-700/40",
  },
  [METRIC_IDS.SHIPPED_ORDER]: {
    label: "Order Shipped",
    color: "bg-blue-400/20",
    textColor: "text-blue-50",
    iconColor: "text-blue-300",
    gradient: "from-blue-900/80 to-blue-700/40",
  },
  [METRIC_IDS.ACCOUNT_CREATED]: {
    label: "New Account",
    color: "bg-purple-400/20",
    textColor: "text-purple-50",
    iconColor: "text-purple-300",
    gradient: "from-purple-900/80 to-purple-700/40",
  },
  [METRIC_IDS.CANCELED_ORDER]: {
    label: "Order Canceled",
    color: "bg-red-400/20",
    textColor: "text-red-50",
    iconColor: "text-red-300",
    gradient: "from-red-900/80 to-red-700/40",
  },
  [METRIC_IDS.PAYMENT_REFUNDED]: {
    label: "Payment Refund",
    color: "bg-orange-400/20",
    textColor: "text-orange-50",
    iconColor: "text-orange-300",
    gradient: "from-orange-900/80 to-orange-700/40",
  },
  [METRIC_IDS.NEW_BLOG_POST]: {
    label: "New Blog Post",
    color: "bg-indigo-400/20",
    textColor: "text-indigo-50",
    iconColor: "text-indigo-300",
    gradient: "from-indigo-900/80 to-indigo-700/40",
  },
};

const EVENT_ICONS = {
  [METRIC_IDS.PLACED_ORDER]: Package,
  [METRIC_IDS.SHIPPED_ORDER]: Truck,
  [METRIC_IDS.ACCOUNT_CREATED]: UserPlus,
  [METRIC_IDS.CANCELED_ORDER]: XCircle,
  [METRIC_IDS.PAYMENT_REFUNDED]: DollarSign,
  [METRIC_IDS.NEW_BLOG_POST]: FileText,
};

// Loading State Component
const LoadingState = () => (
  <div className="flex gap-3 px-4">
    {[...Array(6)].map((_, i) => (
      <Card key={i} className="w-[210px] h-[125px] shrink-0 bg-gradient-to-br from-slate-800/70 to-slate-700/50 backdrop-blur-xl border-white/[0.08] ring-1 ring-white/[0.05]">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 px-3 py-2 pb-0">
          <div className="flex items-baseline justify-between w-full pr-1">
            <Skeleton className="h-3 w-20 bg-white/20" />
            <Skeleton className="h-3 w-14 bg-white/20" />
          </div>
          <div className="relative p-2">
            <div className="absolute inset-0 rounded-full bg-white/20" />
            <Skeleton className="h-4 w-4 bg-white/10 relative rounded-full" />
          </div>
        </CardHeader>
        <CardContent className="p-3 pt-1">
          <div className="space-y-2">
            <Skeleton className="h-7 w-36 bg-white/20" />
            <div className="flex items-center justify-between">
              <Skeleton className="h-4 w-28 bg-white/10" />
            </div>
          </div>
        </CardContent>
      </Card>
    ))}
  </div>
);

// Empty State Component
const EmptyState = () => (
  <Card className="w-[210px] h-[125px] bg-gradient-to-br from-slate-800/70 to-slate-700/50 backdrop-blur-xl border-white/[0.08] ring-1 ring-white/[0.05]">
    <CardContent className="flex flex-col items-center justify-center h-full text-center p-4">
      <div className="bg-white/10 rounded-full p-2 mb-2">
        <Activity className="h-4 w-4 text-gray-300" />
      </div>
      <p className="text-xs font-medium text-gray-300 uppercase tracking-wide">
        No recent activity
      </p>
    </CardContent>
  </Card>
);

const EventCard = ({ event }) => {
  const eventType = EVENT_TYPES[event.metric_id];
  if (!eventType) return null;

  const Icon = EVENT_ICONS[event.metric_id] || Package;
  const details = event.event_properties || {};

  return (
    <EventDialog event={event} scale={1.75}>
      <Card className={`w-[230px] border-white/[0.08] ring-1 ring-white/[0.05] shrink-0 hover:brightness-110 hover:ring-white/[0.12] cursor-pointer transition-all h-[125px] bg-gradient-to-br ${eventType.gradient} backdrop-blur-xl shadow-lg shadow-black/20`}>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 px-3 py-2 pb-0">
          <div className="flex items-baseline justify-between w-full pr-1">
            <CardTitle className={`text-xs font-medium ${eventType.textColor} uppercase tracking-wide`}>
              {eventType.label}
            </CardTitle>
            {event.datetime && (
              <CardDescription className={`text-xs ${eventType.textColor} opacity-70`}>
                {format(new Date(event.datetime), "h:mm a")}
              </CardDescription>
            )}
          </div>
          <div className="relative p-2">
            <div className={`absolute inset-0 rounded-full ${eventType.color}`} />
            <Icon className={`h-4 w-4 ${eventType.iconColor} relative`} />
          </div>
        </CardHeader>
        <CardContent className="p-3 pt-1">
          {event.metric_id === METRIC_IDS.PLACED_ORDER && (
            <>
              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                {details.ShippingName}
              </div>
              <div className="flex items-center justify-between mt-1">
                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                  #{details.OrderId} • {formatCurrency(details.TotalAmount)}
                </div>
              </div>
              {(details.IsOnHold || details.OnHoldReleased || details.StillOwes || details.LocalPickup || details.HasPreorder || details.HasNotions || details.OnlyDigitalGC || details.HasDigitalGC || details.HasDigiItem || details.OnlyDigiItem) && (
                <div className="flex gap-1.5 items-center flex-wrap mt-1">
                  {details.IsOnHold && (
                    <Badge
                      variant="secondary"
                      className="bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-xs py-0"
                    >
                      On Hold
                    </Badge>
                  )}
                  {details.OnHoldReleased && (
                    <Badge
                      variant="secondary"
                      className="bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300 text-xs py-0"
                    >
                      Hold Released
                    </Badge>
                  )}
                  {details.StillOwes && (
                    <Badge
                      variant="secondary"
                      className="bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-xs py-0"
                    >
                      Owes
                    </Badge>
                  )}
                  {details.LocalPickup && (
                    <Badge
                      variant="secondary"
                      className="bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300 text-xs py-0"
                    >
                      Local
                    </Badge>
                  )}
                  {details.HasPreorder && (
                    <Badge
                      variant="secondary"
                      className="bg-purple-100 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 text-xs py-0"
                    >
                      Pre-order
                    </Badge>
                  )}
                  {details.HasNotions && (
                    <Badge
                      variant="secondary"
                      className="bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 text-xs py-0"
                    >
                      Notions
                    </Badge>
                  )}
                  {(details.OnlyDigitalGC || details.HasDigitalGC) && (
                    <Badge
                      variant="secondary"
                      className="bg-pink-100 dark:bg-pink-900/20 text-pink-700 dark:text-pink-300 text-xs py-0"
                    >
                      eGift Card
                    </Badge>
                  )}
                  {(details.HasDigiItem || details.OnlyDigiItem) && (
                    <Badge
                      variant="secondary"
                      className="bg-indigo-100 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300 text-xs py-0"
                    >
                      Digital
                    </Badge>
                  )}
                </div>
              )}
            </>
          )}

          {event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
            <>
              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                {details.ShippingName}
              </div>
              <div className="flex items-center justify-between mt-1">
                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                  #{details.OrderId} • {formatShipMethodSimple(details.ShipMethod)}
                </div>
              </div>
              {event.event_properties?.ShippedBy && (
                <div className={`text-sm font-medium ${eventType.textColor} opacity-90 truncate mt-1`}>
                  Shipped by {event.event_properties.ShippedBy}
                </div>
              )}
            </>
          )}

          {event.metric_id === METRIC_IDS.ACCOUNT_CREATED && (
            <>
              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                {details.FirstName} {details.LastName}
              </div>
              <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate mt-1`}>
                {details.EmailAddress}
              </div>
            </>
          )}

          {event.metric_id === METRIC_IDS.CANCELED_ORDER && (
            <>
              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                {details.ShippingName}
              </div>
              <div className="flex items-center justify-between mt-1">
                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                  #{details.OrderId} • {formatCurrency(details.TotalAmount)}
                </div>
              </div>
              <div className={`text-xs ${eventType.textColor} opacity-80 mt-1.5 truncate`}>
                {details.CancelReason}
              </div>
            </>
          )}

          {event.metric_id === METRIC_IDS.PAYMENT_REFUNDED && (
            <>
              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                {details.ShippingName}
              </div>
              <div className="flex items-center justify-between mt-1">
                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                  #{details.FromOrder} • {formatCurrency(details.PaymentAmount)}
                </div>
              </div>
              <div className={`text-xs ${eventType.textColor} opacity-80 mt-1.5 truncate`}>
                via {details.PaymentName}
              </div>
            </>
          )}

          {event.metric_id === METRIC_IDS.NEW_BLOG_POST && (
            <>
              <div className={`text-lg truncate font-bold ${eventType.textColor}`}>
                {details.title}
              </div>
              <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 line-clamp-2 mt-1`}>
                {details.description}
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </EventDialog>
  );
};

const DEFAULT_METRICS = Object.values(METRIC_IDS);

const MiniEventFeed = ({
  selectedMetrics = DEFAULT_METRICS,
}) => {
  const scrollRef = useRef(null);
  const [showLeftArrow, setShowLeftArrow] = useState(false);
  const [showRightArrow, setShowRightArrow] = useState(false);

  const { data: events = [], isLoading: loading, error } = useQuery({
    queryKey: ["mini-event-feed", selectedMetrics],
    queryFn: async () => {
      const response = await apiClient.get("/api/klaviyo/events/feed", {
        params: {
          timeRange: "today",
          metricIds: JSON.stringify(selectedMetrics),
        },
      });
      return (response.data.data || []).map((event) => ({
        ...event,
        datetime: event.attributes?.datetime || event.datetime,
        event_properties: event.attributes?.event_properties || {}
      }));
    },
    refetchInterval: 30000,
  });

  const handleScroll = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setShowLeftArrow(scrollLeft > 0);
      setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 1);
    }
  };

  const scrollToEnd = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        left: scrollRef.current.scrollWidth,
        behavior: 'smooth'
      });
    }
  };

  const scrollToStart = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
    }
  };

  // Scroll to end when events load/change
  useEffect(() => {
    if (scrollRef.current && events.length > 0) {
      setTimeout(() => {
        scrollRef.current?.scrollTo({
          left: scrollRef.current.scrollWidth,
          behavior: 'instant'
        });
        handleScroll();
      }, 0);
    }
  }, [events]);

  return (
    <div className="fixed bottom-0 left-0 right-0">
      <Card className="rounded-none bg-slate-900/80 backdrop-blur-xl border-0 border-t border-white/50 shadow-[0_-8px_30px_rgba(0,0,0,0.3)]">
        <div className=" pt-2 pb-3 relative">
          {/* Left fade edge */}
          {showLeftArrow && (
            <div
              className="absolute left-0 top-0 bottom-0 w-16 z-10 bg-gradient-to-r from-slate-900 to-transparent pointer-events-none"
            />
          )}
          {/* Right fade edge */}
          {showRightArrow && (
            <div
              className="absolute right-0 top-0 bottom-0 w-16 z-10 bg-gradient-to-l from-slate-900 to-transparent pointer-events-none"
            />
          )}
          <div
            ref={scrollRef}
            onScroll={handleScroll}
            className="overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']"
          >
            <div className="flex flex-row gap-2.5 px-2.5" style={{ width: 'max-content' }}>
              {loading && !events.length ? (
                <LoadingState />
              ) : error ? (
                <DashboardErrorState error={`Failed to load event feed: ${error?.message}`} className="mx-4" />
              ) : !events || events.length === 0 ? (
                <div className="px-4">
                  <EmptyState />
                </div>
              ) : (
                [...events].reverse().map((event) => (
                  <EventCard 
                    key={event.id} 
                    event={event}
                  />
                ))
              )}
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default MiniEventFeed;

// Helper Functions
const formatCurrency = (amount) => {
  // Convert to number if it's a string
  const num = typeof amount === "string" ? parseFloat(amount) : amount;
  // Handle negative numbers
  const absNum = Math.abs(num);
  // Format to 2 decimal places and add negative sign if needed
  return `${num < 0 ? "-" : ""}$${absNum.toFixed(2)}`;
};

const formatShipMethodSimple = (method) => {
  if (!method) return "Digital";
  if (method.includes("usps")) return "USPS";
  if (method.includes("fedex")) return "FedEx";
  if (method.includes("ups")) return "UPS";
  return "Standard";
}; 