import React from "react";
import { useNavigate } from "react-router-dom";
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";

const OrdersByStatusCard = ({ ordersByStatus = [] }) => {
  const navigate = useNavigate();

  return (
    <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300 flex flex-col">
      {/* Header */}
      <div className="flex items-start justify-between mb-6">
        <div>
          <h2 className="text-xl font-bold text-gray-900">Orders by Status</h2>
          <p className="text-gray-500 text-sm mt-1">Current distribution</p>
        </div>
        <button
          onClick={() => navigate("/orders-by-status")}
          className="flex items-center gap-1.5 bg-[#704F38] hover:bg-[#5d3f2c] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors duration-200 whitespace-nowrap shadow-sm"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          View All
        </button>
      </div>

      {/* Pie Chart */}
      <ResponsiveContainer width="100%" height={220}>
        <PieChart>
          <Pie
            data={ordersByStatus}
            cx="50%"
            cy="50%"
            labelLine={false}
            label={({ label, percent }) => `${label} ${(percent * 100).toFixed(0)}%`}
            outerRadius={80}
            dataKey="count"
          >
            {ordersByStatus.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>

      {/* Legend List */}
      <div className="mt-4 space-y-2 flex-1">
        {ordersByStatus.map((status, index) => (
          <div key={index} className="flex items-center justify-between text-sm">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: status.color }} />
              <span className="text-gray-700">{status.label}</span>
            </div>
            <span className="font-semibold text-gray-900">{status.count}</span>
          </div>
        ))}
      </div>

      {/* Bottom CTA */}
      <button
        onClick={() => navigate("/orders-by-status")}
        className="mt-4 w-full border-2 border-[#704F38] text-[#704F38] hover:bg-[#704F38] hover:text-white text-sm font-semibold py-2.5 rounded-xl transition-all duration-200"
      >
        View Detailed Breakdown →
      </button>
    </div>
  );
};

export default OrdersByStatusCard;