"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 { useGetTaskTrend } from "../hooks/dashboard.hooks";

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

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

  return (
    <Card className="border-border shadow-sm">
      <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">Task Activity</p>
          <p className="text-xs text-muted-foreground">Created 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"> */}
<CardContent className="h-[350px] p-4">
        {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="created"
                name="Created"
                stroke="#002b49"
                strokeWidth={2}
                dot={false}
              />
              <Line
                type="monotone"
                dataKey="completed"
                name="Completed"
                stroke="#B48639"
                strokeWidth={2}
                dot={false}
              />
            </LineChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  );
}