import React from "react";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";

const StreetStatsChart = ({ data }) => {
  if (!data) return null;

  const adoptionData = [
    { name: "Adopted", value: data.adoption.adoptedStreets, color: "#198754" },
    { name: "Available", value: data.adoption.availableStreets, color: "#6c757d" },
  ];

  const taskData = [
    { name: "Completed", value: data.tasks.completedTasks, color: "#0d6efd" },
    { name: "Pending", value: data.tasks.pendingTasks, color: "#ffc107" },
    { name: "In Progress", value: data.tasks.inProgressTasks, color: "#fd7e14" },
  ];

  const RADIAN = Math.PI / 180;
  const renderCustomizedLabel = ({
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    percent,
  }) => {
    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);

    return (
      <text
        x={x}
        y={y}
        fill="white"
        textAnchor={x > cx ? "start" : "end"}
        dominantBaseline="central"
        fontWeight="bold"
      >
        {`${(percent * 100).toFixed(0)}%`}
      </text>
    );
  };

  return (
    <div>
      <div className="row mb-4">
        <div className="col-md-4">
          <div className="stat-highlight">
            <h3>{data.adoption.adoptionRate}%</h3>
            <p className="text-muted">Adoption Rate</p>
          </div>
        </div>
        <div className="col-md-4">
          <div className="stat-highlight">
            <h3>{data.tasks.completionRate}%</h3>
            <p className="text-muted">Task Completion Rate</p>
          </div>
        </div>
        <div className="col-md-4">
          <div className="stat-highlight">
            <h3>{data.adoption.totalStreets}</h3>
            <p className="text-muted">Total Streets</p>
          </div>
        </div>
      </div>

      <div className="row">
        <div className="col-md-6">
          <h6 className="text-center mb-3">Street Adoption</h6>
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie
                data={adoptionData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={renderCustomizedLabel}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {adoptionData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>

        <div className="col-md-6">
          <h6 className="text-center mb-3">Task Status</h6>
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie
                data={taskData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={renderCustomizedLabel}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {taskData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      {data.topStreets && data.topStreets.length > 0 && (
        <div className="mt-4">
          <h6>Top Streets by Task Completion</h6>
          <div className="list-group">
            {data.topStreets.slice(0, 5).map((street, index) => (
              <div key={street.streetId} className="list-group-item d-flex justify-content-between align-items-center">
                <span>
                  <strong>#{index + 1}</strong> {street.streetName}
                </span>
                <span className="badge bg-primary rounded-pill">{street.count} tasks</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default StreetStatsChart;
