import React from "react";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";
import "../styles/AnswersTrendChart.css";

const TITLES = {
  default: {
    title: "Form Submissions and Total Field Answers by Month",
    subtitle: "Blue = number of forms submitted per month; orange = total field-level answers across all forms. Higher area = more data. Hover for exact counts.",
  },
  auditsPerMonth: {
    title: "Audits per Month",
    subtitle: "Number of audits created (submitted) per month. Form submissions are not counted. Hover for exact counts.",
  },
  auditTrends: {
    title: "Audit Trends",
    subtitle: "Audit count over the selected year and time period (Daily, Monthly, Quarterly or Yearly). Hover for exact counts.",
  },
};

/**
 * Form submissions and answer submissions over time (default), or Audits per Month (variant: auditsPerMonth).
 * Audits per Month shows only audit count by month (no form submissions).
 */
const AnswersTrendChart = ({ data, variant = "default", widgetId, xAxisInterval, filterControls }) => {
  const { title, subtitle } = TITLES[variant] || TITLES.default;
  const isAuditsPerMonth = variant === "auditsPerMonth" || variant === "auditTrends";

  return (
    <div className="answers-trend-container chart-card chart-card--has-add-btn" tabIndex={-1}>
      {widgetId && <AddToPersonalizedButton widgetId={widgetId} />}
      <h2 className="answers-trend-title">{title}</h2>
      <p className="chart-subtitle">
        <strong>In short:</strong> {subtitle}
      </p>
      {filterControls && <div className="audit-trends-filters-wrap">{filterControls}</div>}
      <ResponsiveContainer width="100%" height={260}>
        <AreaChart
          data={data}
          margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
        >
          <defs>
            <linearGradient id="colorAnswers" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#f21b23" stopOpacity={0.4} />
              <stop offset="95%" stopColor="#f21b23" stopOpacity={0.05} />
            </linearGradient>
            <linearGradient id="colorSubmissions" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#2196f3" stopOpacity={0.4} />
              <stop offset="95%" stopColor="#2196f3" stopOpacity={0.05} />
            </linearGradient>
            <linearGradient id="colorAudits" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#f21b23" stopOpacity={0.4} />
              <stop offset="95%" stopColor="#f21b23" stopOpacity={0.05} />
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.06)" />
          <XAxis
            dataKey="month"
            tick={{ fontSize: 11, fill: "var(--text-secondary, #4d4d4f)" }}
            axisLine={{ stroke: "#e5e5e5" }}
            label={{ value: "Month", position: "insideBottom", offset: -5, fill: "var(--text-muted, #999)", fontSize: 11 }}
          />
          <YAxis
            tick={{ fontSize: 11, fill: "var(--text-secondary, #4d4d4f)" }}
            axisLine={false}
            tickLine={false}
            label={{ value: "Count", angle: -90, position: "insideLeft", fill: "var(--text-muted, #999)", fontSize: 11 }}
          />
          <Tooltip
            contentStyle={{
              borderRadius: "8px",
              border: "1px solid #e5e5e5",
              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            }}
            formatter={(value, name) => {
              if (isAuditsPerMonth) return [`${value} audits`, "Audits submitted"];
              return [
                name === "Form submissions" ? `${value} submissions` : `${value} answers`,
                name === "Form submissions" ? "Form submissions" : "Total field answers",
              ];
            }}
          />
          {isAuditsPerMonth ? (
            <Area
              type="monotone"
              dataKey="audits"
              stroke="#f21b23"
              strokeWidth={2}
              fillOpacity={1}
              fill="url(#colorAudits)"
              name="Audits submitted"
            />
          ) : (
            <>
              <Area
                type="monotone"
                dataKey="submissions"
                stroke="#2196f3"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorSubmissions)"
                name="Form submissions"
              />
              <Area
                type="monotone"
                dataKey="answers"
                stroke="#f21b23"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorAnswers)"
                name="Total field answers"
              />
            </>
          )}
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

export default AnswersTrendChart;
