import React, { useState } from "react";
import { useGetCustomersReportQuery } from "../../features/report/customersAPI";
import {
  BarChart,
  Bar,
  ResponsiveContainer,
  Tooltip,
  XAxis,
} from "recharts";
import { FiUsers, FiTrendingUp, FiChevronDown } from "react-icons/fi";

const CustomersReport = () => {
  const { data, isLoading, isError } = useGetCustomersReportQuery();
  const [activePeriod, setActivePeriod] = useState("weekly"); // default period

  if (isLoading)
    return <div className="p-6 text-center animate-pulse">Loading report...</div>;
  if (isError)
    return <p className="p-6 text-center text-red-500">Error loading data.</p>;

  const { newCustomers, repeatCustomers, graph } = data.data;

  const periods = Object.keys(graph);
  const selectedPeriod = graph[activePeriod] ?? graph[periods[0]];
  const totalCustomers = newCustomers + repeatCustomers;

  return (
    <div
      className="
        bg-white rounded-3xl shadow-xl border border-gray-100 p-6
        transition-all duration-300 hover:shadow-2xl
      "
      style={{ backdropFilter: "blur(12px)" }}
    >
      {/* TOP SECTION */}
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-start gap-4">
          <div
            className="
              w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-indigo-600
              flex items-center justify-center shadow-lg text-white text-2xl
              transform transition-all duration-300 hover:scale-105
            "
          >
            <FiUsers />
          </div>

          <div>
            <p className="text-sm text-gray-500">Total Customers</p>
            <h2 className="text-4xl font-extrabold tracking-tight">{totalCustomers}</h2>

            <div className="flex gap-6 mt-2 text-gray-600 text-sm">
              <span className="flex gap-1">
                <span className="font-semibold text-indigo-600">{newCustomers}</span> New
              </span>
              <span className="flex gap-1">
                <span className="font-semibold text-green-600">{repeatCustomers}</span> Repeat
              </span>
            </div>
          </div>
        </div>

        {/* PERIOD DROPDOWN RIGHT SIDE */}
        <div className="relative">
          <select
            className="
              appearance-none px-4 py-2 pr-10 rounded-full border border-gray-200 shadow-sm
              focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700
              hover:bg-gray-50 cursor-pointer
            "
            value={activePeriod}
            onChange={(e) => setActivePeriod(e.target.value)}
          >
            {periods.map((period) => (
              <option key={period} value={period}>
                {period.charAt(0).toUpperCase() + period.slice(1)}
              </option>
            ))}
          </select>
          <FiChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
        </div>
      </div>

      {/* GRAPH */}
      <div className="w-full h-48">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={selectedPeriod}>
            <XAxis dataKey="label" tick={{ fontSize: 12 }} />
            <Tooltip
              cursor={{ opacity: 0.2 }}
              contentStyle={{
                borderRadius: "10px",
                border: "none",
                boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
              }}
            />
            <defs>
              <linearGradient id="softGreen" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#34d399" stopOpacity="0.95" />
                <stop offset="100%" stopColor="#34d399" stopOpacity="0.3" />
              </linearGradient>
            </defs>
            <Bar dataKey="value" fill="url(#softGreen)" radius={[10, 10, 0, 0]} barSize={28} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default CustomersReport;
