"use client";
import { API, authFetch } from "@/lib/api";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

export function OverviewChart() {
  const [data, setData] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedRange, setSelectedRange] = useState("daily");

  useEffect(() => {
    async function fetchChartData() {
      setIsLoading(true);
      try {
        const res = await authFetch(`${API}/dashboard/chart-data?range=${selectedRange}`);
        console.log("Chart API status:", res.status, res.statusText);
        const raw = await res.json();
        console.log("Chart API response:", raw);

        if (!raw || !Array.isArray(raw)) {
          console.error("Invalid chart data (not array):", raw);
          setData([]);
          return;
        }

        const transformed = raw.map((item: { label: string; totalPayroll: number; presentCount: number }) => ({
          label: item.label,
          employees: item.presentCount || 0,
          expense: Math.round((item.totalPayroll || 0) / 1000),
        }));

        setData(transformed);
      } catch (error) {
        console.error("Failed to fetch chart data:", error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchChartData();
  }, [selectedRange]);
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.3 }}
      className="col-span-1 lg:col-span-2 rounded-2xl bg-white p-6 shadow-sm border border-[#E2E8F0]"
    >
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">Growth & Salary Expense</h2>
          <p className="text-sm text-gray-500">Employee growth vs total salary payout (in thousands)</p>
        </div>
        <select 
          value={selectedRange}
          onChange={(e) => setSelectedRange(e.target.value)}
          className="rounded-lg border-gray-300 py-1.5 pl-3 pr-8 text-sm focus:border-gray-500 focus:ring-gray-500 outline-none ring-1 ring-gray-200 bg-gray-50"
        >
          <option value="daily">Daily (30 days)</option>
          <option value="weekly">Weekly (12 weeks)</option>
          <option value="monthly">Monthly (12 months)</option>
          <option value="3months">Monthly (3 months)</option>
          <option value="6months">Monthly (6 months)</option>
        </select>
      </div>
      
      <div className="h-[300px] w-full">
        {data.length === 0 && !isLoading && (
          <div className="h-full flex items-center justify-center text-gray-500">
            No chart data available
          </div>
        )}
        {data.length > 0 && (
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
            <defs>
              <linearGradient id="colorExpense" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#374151" stopOpacity={0.8} />
                <stop offset="95%" stopColor="#374151" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E7EB" />
            <XAxis dataKey="label" axisLine={false} tickLine={false} tick={{ fill: "#1F2937" }} />
            <YAxis axisLine={false} tickLine={false} tick={{ fill: "#6B7280" }} />
            <Tooltip
              contentStyle={{ borderRadius: "12px", border: "none", boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", color: "#1F2937" }}
              labelStyle={{ color: "#1F2937", fontWeight: 600 }}
              formatter={(value, name) => [name === "Expense" ? `${value}K` : value, name]}
            />
            <Area
              type="monotone"
              dataKey="employees"
              stroke="#6B7280"
              strokeWidth={2}
              fillOpacity={0.1}
              fill="#6B7280"
              name="Employees"
            />
            {data.some(d => d.expense > 0) && (
            <Area
              type="monotone"
              dataKey="expense"
              stroke="#1F2937"
              strokeWidth={3}
              fillOpacity={1}
              fill="url(#colorExpense)"
              name="Expense"
            />
            )}
          </AreaChart>
        </ResponsiveContainer>
        )}
      </div>
    </motion.div>
  );
}