import React, { useState, useEffect, useRef } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { DateTime } from "luxon";

// Helper functions for formatting
const formatRate = (value) => {
  if (typeof value !== "number") return "0.0%";
  return `${(value * 100).toFixed(1)}%`;
};

const formatCurrency = (value) => {
  if (typeof value !== "number") return "$0";
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value);
};

// Loading skeleton component
const TableSkeleton = () => (
  <div className="space-y-4">
    {[...Array(5)].map((_, i) => (
      <div
        key={i}
        className="h-16 bg-gray-100 dark:bg-gray-800 animate-pulse rounded"
      />
    ))}
  </div>
);

// Error alert component
const ErrorAlert = ({ description }) => (
  <div className="p-4 mb-4 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg">
    {description}
  </div>
);

// MetricCell component for displaying campaign metrics
const MetricCell = ({
  value,
  count,
  isMonetary = false,
  showConversionRate = false,
  totalRecipients = 0,
}) => (
  <td className="p-2 text-center">
    <div className="text-blue-600 dark:text-blue-400 text-lg font-semibold">
      {isMonetary ? formatCurrency(value) : formatRate(value)}
    </div>
    <div className="text-gray-600 dark:text-gray-400 text-sm">
      {count?.toLocaleString() || 0} {count === 1 ? "recipient" : "recipients"}
      {showConversionRate &&
        totalRecipients > 0 &&
        ` (${((count / totalRecipients) * 100).toFixed(2)}%)`}
    </div>
  </td>
);

const KlaviyoCampaigns = ({ className, timeRange = "last7days" }) => {
  const [campaigns, setCampaigns] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [sortConfig, setSortConfig] = useState({
    key: "send_time",
    direction: "desc",
  });
  const fetchInProgress = useRef(false);

  const fetchCampaigns = async () => {
    console.log("Component fetching campaigns...", {
      timeRange,
      timestamp: new Date().toISOString()
    });
    
    try {
      setIsLoading(true);
      const response = await fetch(`/api/klaviyo/campaigns/${timeRange}`);
      
      if (!response.ok) {
        const errorText = await response.text();
        console.error("Campaign fetch error response:", errorText);
        throw new Error(`Failed to fetch campaigns: ${response.status}`);
      }
      
      const data = await response.json();
      console.log("Received campaign data:", {
        type: data?.type,
        count: data?.data?.length,
        sample: data?.data?.[0],
        structure: {
          topLevel: Object.keys(data || {}),
          firstCampaign: data?.data?.[0] ? Object.keys(data.data[0]) : null,
          stats: data?.data?.[0]?.stats ? Object.keys(data.data[0].stats) : null
        }
      });
  
      // Handle the new data structure
      const campaignsData = data?.data || [];
      if (!Array.isArray(campaignsData)) {
        throw new Error('Invalid campaign data format received');
      }
  
      // Process campaigns to ensure consistent structure
      const processedCampaigns = campaignsData.map(campaign => ({
        id: campaign.id,
        name: campaign.name || "Unnamed Campaign",
        subject: campaign.subject || "",
        send_time: campaign.send_time,
        stats: {
          delivery_rate: campaign.stats?.delivery_rate || 0,
          delivered: campaign.stats?.delivered || 0,
          recipients: campaign.stats?.recipients || 0,
          open_rate: campaign.stats?.open_rate || 0,
          opens_unique: campaign.stats?.opens_unique || 0,
          opens: campaign.stats?.opens || 0,
          clicks_unique: campaign.stats?.clicks_unique || 0,
          click_rate: campaign.stats?.click_rate || 0,
          click_to_open_rate: campaign.stats?.click_to_open_rate || 0,
          conversion_value: campaign.stats?.conversion_value || 0,
          conversion_uniques: campaign.stats?.conversion_uniques || 0
        }
      }));
  
      console.log("Processed campaigns:", {
        count: processedCampaigns.length,
        sample: processedCampaigns[0]
      });
  
      setCampaigns(processedCampaigns);
      setError(null);
    } catch (err) {
      console.error("Error fetching campaigns:", err);
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCampaigns();
    const interval = setInterval(fetchCampaigns, 10 * 60 * 1000); // Refresh every 10 minutes
    return () => clearInterval(interval);
  }, [timeRange]);

  // Add this to debug render
  console.log("Rendering campaigns:", {
    count: campaigns?.length,
    isLoading,
    error
  });

  // Sort campaigns
  const sortedCampaigns = [...campaigns].sort((a, b) => {
    const direction = sortConfig.direction === "desc" ? -1 : 1;

    if (sortConfig.key === "send_time") {
      return (
        direction *
        (DateTime.fromISO(a.send_time) - DateTime.fromISO(b.send_time))
      );
    }

    // Handle nested stats properties
    if (sortConfig.key.startsWith("stats.")) {
      const statKey = sortConfig.key.split(".")[1];
      return direction * (a.stats[statKey] - b.stats[statKey]);
    }

    return direction * (a[sortConfig.key] - b[sortConfig.key]);
  });

  // Filter campaigns by search term
  const filteredCampaigns = sortedCampaigns.filter(
    (campaign) =>
      campaign &&
      campaign.name && // verify campaign and name exist
      campaign.name.toLowerCase().includes((searchTerm || "").toLowerCase())
  );

  if (isLoading) {
    return (
      <Card className="h-full bg-white dark:bg-gray-900">
        <CardHeader>
          <div className="h-6 w-48 bg-gray-200 dark:bg-gray-700 animate-pulse rounded" />
        </CardHeader>
        <CardContent className="overflow-y-auto pl-4 max-h-[350px]">
          <TableSkeleton />
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="h-full bg-white dark:bg-gray-900">
      {error && <ErrorAlert description={error} />}
      <CardHeader className="pb-2">
        <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
          Email Campaigns
        </CardTitle>
      </CardHeader>
      <CardContent className="overflow-y-auto pl-4 max-h-[350px] mb-4">
        <table className="w-full">
          <thead>
            <tr>
              <th className="p-2 text-left font-medium sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                Campaign
              </th>
              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                Delivery
              </th>
              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                Opens
              </th>
              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                Clicks
              </th>
              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                CTR
              </th>
              <th className="p-2 font-medium text-center sticky top-0 bg-white dark:bg-gray-900 z-10 text-gray-900 dark:text-gray-100">
                Orders
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
            {filteredCampaigns.map(
              (campaign) =>
                campaign && (
                  <tr
                    key={campaign.id}
                    className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                  >
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <td className="p-2 align-top">
                            <div className="font-medium text-gray-900 dark:text-gray-100">
                              {campaign.name || "Unnamed Campaign"}
                            </div>
                            <div className="text-sm text-gray-500 dark:text-gray-400 truncate max-w-[300px]">
                              {campaign.subject || "No subject"}
                            </div>
                            <div className="text-xs text-gray-400 dark:text-gray-500">
                              {campaign.send_time
                                ? DateTime.fromISO(
                                    campaign.send_time
                                  ).toLocaleString(DateTime.DATETIME_MED)
                                : "No date"}
                            </div>
                          </td>
                        </TooltipTrigger>
                        <TooltipContent
                          side="top"
                          className="break-words bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border dark:border-gray-700"
                        >
                          <p className="font-medium">
                            {campaign.name || "Unnamed Campaign"}
                          </p>
                          <p>{campaign.subject || "No subject"}</p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">
                            {campaign.send_time
                              ? DateTime.fromISO(
                                  campaign.send_time
                                ).toLocaleString(DateTime.DATETIME_MED)
                              : "No date"}
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                    <MetricCell
                      value={campaign.stats.delivery_rate}
                      count={campaign.stats.delivered}
                      totalRecipients={campaign.stats.recipients}
                    />
                    <MetricCell
                      value={campaign.stats.open_rate}
                      count={campaign.stats.opens_unique}
                      totalRecipients={campaign.stats.recipients}
                    />
                    <MetricCell
                      value={campaign.stats.click_rate}
                      count={campaign.stats.clicks_unique}
                      totalRecipients={campaign.stats.recipients}
                    />
                    <MetricCell
                      value={campaign.stats.click_to_open_rate}
                      count={campaign.stats.clicks_unique}
                      totalRecipients={campaign.stats.opens_unique}
                    />
                    <MetricCell
                      value={campaign.stats.conversion_value}
                      count={campaign.stats.conversion_uniques}
                      isMonetary={true}
                      showConversionRate={true}
                      totalRecipients={campaign.stats.recipients}
                    />
                  </tr>
                )
            )}
          </tbody>
        </table>
      </CardContent>
    </Card>
  );
};

export default KlaviyoCampaigns;