import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
} from "recharts";
import "../styles/ComplianceLineChart.css";

/**
 * Compliance rate over time (from audit answers / completion).
 */
const ComplianceLineChart = ({ data }) => {
  return (
    <div className="compliance-line-container chart-card" tabIndex={-1}>
      <h2 className="compliance-line-title">Compliance Rate Over Time</h2>
      <p className="chart-subtitle">
        <strong>In short:</strong> Percentage of audits with at least one form submitted, by month. Green dashed line = 90% target. Line above it = on target; below = need more completed audits. Hover for exact percentage.
      </p>
      <ResponsiveContainer width="100%" height={260}>
        <LineChart
          data={data}
          margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
        >
          <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
            domain={[0, 100]}
            tick={{ fontSize: 11, fill: "var(--text-secondary, #4d4d4f)" }}
            axisLine={false}
            tickLine={false}
            tickFormatter={(v) => `${v}%`}
            label={{ value: "Compliance (%)", 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) => [`${value}% of audits with at least one form submitted`, "Compliance rate"]}
            labelFormatter={(label) => `${label}`}
          />
          <ReferenceLine y={90} stroke="#4caf50" strokeDasharray="4 4" label={{ value: "90% target", position: "right", fill: "#2e7d32", fontSize: 11 }} />
          <Line
            type="monotone"
            dataKey="rate"
            stroke="#f21b23"
            strokeWidth={2.5}
            dot={{ fill: "#f21b23", strokeWidth: 2, r: 4 }}
            activeDot={{ r: 6, fill: "#fff", stroke: "#f21b23", strokeWidth: 2 }}
            name="Compliance"
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default ComplianceLineChart;
