import React from "react";
import { __ } from "@wordpress/i18n";
import { decodeEntities } from "@wordpress/html-entities";
import {
  TrendingDown,
  BarChart3,
  Clock,
  CreditCard,
  Eye,
  ThumbsUp,
  Percent,
  DollarSign,
} from "lucide-react";

const CardSkeleton = () => (
  <div className="arraysubs-retention-cards__card arraysubs-retention-cards__card--loading">
    <div className="arraysubs-retention-cards__skeleton-icon" />
    <div className="arraysubs-retention-cards__skeleton-value" />
    <div className="arraysubs-retention-cards__skeleton-label" />
  </div>
);

const SummaryCards = ({ data, loading, currency }) => {
  if (loading || !data) {
    return (
      <div className="arraysubs-retention-cards">
        {Array.from({ length: 8 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    );
  }

  const formatCurrency = (amount) => {
    const currencySymbol = decodeEntities(currency || "$") || "$";

    if (!amount && amount !== 0) return `${currencySymbol}0.00`;
    const num = parseFloat(amount);
    return `${currencySymbol}${num.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  };

  const formatPercent = (value) => {
    if (!value && value !== 0) return "0%";
    return `${parseFloat(value).toFixed(1)}%`;
  };

  const cards = [
    {
      key: "cancellations",
      icon: TrendingDown,
      value: data.total_cancellations || 0,
      label: __("Total Cancellations", "arraysubs"),
      color: "#dc3545",
    },
    {
      key: "churn_rate",
      icon: Percent,
      value: formatPercent(data.churn_rate),
      label: __("Churn Rate", "arraysubs"),
      color: "#e67e22",
      isFormatted: true,
    },
    {
      key: "avg_age",
      icon: Clock,
      value: `${
        data.avg_subscription_age_days || data.avg_subscription_age || 0
      }d`,
      label: __("Avg. Age at Cancel", "arraysubs"),
      color: "#3498db",
      isFormatted: true,
    },
    {
      key: "avg_payments",
      icon: CreditCard,
      value: data.avg_payments_before_cancel || 0,
      label: __("Avg. Payments Before Cancel", "arraysubs"),
      color: "#9b59b6",
    },
    {
      key: "offers_shown",
      icon: Eye,
      value: data.offers_shown || 0,
      label: __("Offers Shown", "arraysubs"),
      color: "#2ecc71",
    },
    {
      key: "offers_accepted",
      icon: ThumbsUp,
      value: data.offers_accepted || 0,
      label: __("Offers Accepted", "arraysubs"),
      color: "#27ae60",
    },
    {
      key: "offer_success",
      icon: BarChart3,
      value: formatPercent(
        data.offer_acceptance_rate || data.offer_success_rate,
      ),
      label: __("Offer Success Rate", "arraysubs"),
      color: "#1abc9c",
      isFormatted: true,
    },
    {
      key: "retained_revenue",
      icon: DollarSign,
      value: formatCurrency(data.retained_revenue),
      label: __("Retained Revenue", "arraysubs"),
      color: "#16a085",
      isFormatted: true,
    },
  ];

  return (
    <div className="arraysubs-retention-cards">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <div key={card.key} className="arraysubs-retention-cards__card">
            <div
              className="arraysubs-retention-cards__icon"
              style={{ color: card.color }}
            >
              <Icon size={22} />
            </div>
            <div className="arraysubs-retention-cards__value">
              {card.isFormatted
                ? card.value
                : Number(card.value).toLocaleString()}
            </div>
            <div className="arraysubs-retention-cards__label">{card.label}</div>
          </div>
        );
      })}
    </div>
  );
};

export default SummaryCards;