"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
import { useGetEmployeeTaskTrend } from "../hooks/dashboard.hooks";


const RANGE_OPTIONS = [
  { label: "7D", value: 7 },
  { label: "30D", value: 30 },
  { label: "90D", value: 90 },
];

export function EmployeeTaskTrendChart() {
  const [days, setDays] = useState(7);
  const { data, isLoading } = useGetEmployeeTaskTrend(days);

  return (
    <Card className="border-border shadow-sm h-full">
      <CardHeader className="py-4 px-5 border-b border-border flex flex-row items-center justify-between gap-3">
        <div>
          <p className="text-sm font-semibold text-foreground">My Task Activity</p>
          <p className="text-xs text-muted-foreground">Assigned vs completed, day by day</p>
        </div>
        <div className="flex items-center gap-1 rounded-lg border border-border p-0.5">
          {RANGE_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              onClick={() => setDays(opt.value)}
              className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
                days === opt.value
                  ? "bg-[#002b49] text-white"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              {opt.label}
            </button>
          ))}
        </div>
      </CardHeader>
      <CardContent className="p-5">
        {isLoading ? (
          <Skeleton className="h-72 w-full rounded-lg" />
        ) : !data || data.length === 0 ? (
          <div className="h-72 flex items-center justify-center text-sm text-muted-foreground">
            No activity in this range
          </div>
        ) : (
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data} margin={{ top: 5, right: 10, left: -10, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
              <XAxis
                dataKey="date"
                tick={{ fontSize: 11 }}
                interval={days > 30 ? Math.floor(days / 10) : "preserveStartEnd"}
              />
              <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
              <Tooltip />
              <Legend wrapperStyle={{ fontSize: "11px" }} />
              <Line type="monotone" dataKey="assigned" name="Assigned" stroke="#002b49" strokeWidth={2} dot={false} />
              <Line type="monotone" dataKey="completed" name="Completed" stroke="#B48639" strokeWidth={2} dot={false} />
            </LineChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  );
}