"use client";

import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
} from "recharts";
import { TrendingUp } from "lucide-react";

interface TaskCompletionChartProps {
  data: { date: string; count: number }[];
}

export function TaskCompletionChart({ data }: TaskCompletionChartProps) {
  const hasData = data && data.length > 0;

  return (
    <div className="rounded-2xl border border-border bg-card overflow-hidden h-full">
      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
        <h3 className="font-heading font-semibold text-base">Your Progress</h3>
      </div>

      <div className="p-6">
        {hasData ? (
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={data}>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis
                dataKey="date"
                tick={{ fontSize: 12 }}
                className="text-muted-foreground"
              />
              <YAxis
                allowDecimals={false}
                tick={{ fontSize: 12 }}
                className="text-muted-foreground"
              />
              <Tooltip />
              <Area
                type="monotone"
                dataKey="count"
                stroke="#6B8F71"
                fill="#6B8F71"
                fillOpacity={0.1}
                strokeWidth={2}
              />
            </AreaChart>
          </ResponsiveContainer>
        ) : (
          <div className="flex flex-col items-center justify-center h-[300px] text-center">
            <div className="size-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3">
              <TrendingUp className="size-5 text-primary" />
            </div>
            <p className="text-sm font-medium text-foreground">Your progress chart lives here</p>
            <p className="text-xs text-muted-foreground mt-1 max-w-[260px] leading-relaxed">
              As you complete tasks, you&apos;ll see a visual history of everything you&apos;ve accomplished.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
