import React from "react";
import { __ } from "@wordpress/i18n";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts";

const TrendChart = ({ data, loading }) => {
  if (loading) {
    return (
      <div className="arraysubs-retention-trend arraysubs-retention-trend--loading">
        <div className="arraysubs-retention-trend__skeleton" />
      </div>
    );
  }

  const chartData = data && data.length > 0 ? data : [];

  if (chartData.length === 0) {
    return (
      <div className="arraysubs-retention-trend">
        <h3 className="arraysubs-retention-trend__title">
          {__("Cancellation Trends", "arraysubs")}
        </h3>
        <div className="arraysubs-retention-trend__empty">
          {__("No trend data for this period.", "arraysubs")}
        </div>
      </div>
    );
  }

  const CustomTooltip = ({ active, payload, label }) => {
    if (!active || !payload || !payload.length) return null;

    return (
      <div className="arraysubs-retention-trend__tooltip">
        <p className="arraysubs-retention-trend__tooltip-date">{label}</p>
        {payload.map((item) => (
          <p
            key={item.dataKey}
            className="arraysubs-retention-trend__tooltip-item"
            style={{ color: item.color }}
          >
            {item.name}: {item.value}
          </p>
        ))}
      </div>
    );
  };

  return (
    <div className="arraysubs-retention-trend">
      <h3 className="arraysubs-retention-trend__title">
        {__("Cancellation Trends", "arraysubs")}
      </h3>
      <div className="arraysubs-retention-trend__container">
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis
              dataKey="period"
              tick={{ fontSize: 12 }}
              tickLine={false}
              axisLine={{ stroke: "#ddd" }}
            />
            <YAxis
              allowDecimals={false}
              tick={{ fontSize: 12 }}
              tickLine={false}
              axisLine={{ stroke: "#ddd" }}
            />
            <Tooltip content={<CustomTooltip />} />
            <Legend />
            <Line
              type="monotone"
              dataKey="cancellations"
              name={__("Cancellations", "arraysubs")}
              stroke="#e74c3c"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="offers_shown"
              name={__("Offers Shown", "arraysubs")}
              stroke="#3498db"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="offers_accepted"
              name={__("Offers Accepted", "arraysubs")}
              stroke="#27ae60"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="new_subscriptions"
              name={__("New Subscriptions", "arraysubs")}
              stroke="#9b59b6"
              strokeWidth={2}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default TrendChart;