import React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";
import "../styles/AnswerTypesBarChart.css";

/**
 * Answer types distribution (from submissions/answers).
 */
const AnswerTypesBarChart = ({ data }) => {
  return (
    <div className="answer-types-bar-container chart-card" tabIndex={-1}>
      <h2 className="answer-types-bar-title">Response Count by Field Type</h2>
      <p className="chart-subtitle">
        <strong>In short:</strong> Number of responses per field type (Text, Yes/No, Number). Longer bar = more responses of that type. Hover for the exact count.
      </p>
      <ResponsiveContainer width="100%" height={260}>
        <BarChart
          data={data}
          layout="vertical"
          margin={{ top: 5, right: 20, left: 60, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.06)" horizontal={false} />
          <XAxis
            type="number"
            tick={{ fontSize: 11, fill: "var(--text-secondary, #4d4d4f)" }}
            axisLine={{ stroke: "#e5e5e5" }}
            label={{ value: "Count", position: "insideBottom", offset: -5, fill: "var(--text-muted, #999)", fontSize: 11 }}
          />
          <YAxis
            type="category"
            dataKey="name"
            width={55}
            tick={{ fontSize: 11, fill: "var(--text-secondary, #4d4d4f)" }}
            axisLine={false}
            tickLine={false}
          />
          <Tooltip
            formatter={(value) => [`${value} responses`, "Response count"]}
            contentStyle={{
              borderRadius: "8px",
              border: "1px solid #e5e5e5",
              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            }}
          />
          <Legend verticalAlign="bottom" height={36} formatter={() => "Response count"} />
          <Bar dataKey="count" name="Response count" fill="#f21b23" radius={[0, 4, 4, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default AnswerTypesBarChart;
