import dayjs from "dayjs";
import { useMemo, useState } from "react";
import { MonthCalendar } from "@/components/ActivityCalendar";
import { useDateFilterNavigation } from "@/hooks";
import type { StatisticsData } from "@/types/statistics";
import { MonthNavigator } from "./MonthNavigator";

interface Props {
  statisticsData: StatisticsData;
}

const StatisticsView = (props: Props) => {
  const { statisticsData } = props;
  const { activityStats } = statisticsData;
  const navigateToDateFilter = useDateFilterNavigation();
  const [visibleMonthString, setVisibleMonthString] = useState(() => dayjs().format("YYYY-MM"));

  const maxCount = useMemo(() => {
    const counts = Object.values(activityStats);
    return Math.max(...counts, 1);
  }, [activityStats]);

  return (
    <div className="group w-full mt-2 flex flex-col text-muted-foreground animate-fade-in">
      {/* Calendar card with subtle glass effect */}
      <div className="rounded-xl border border-border/50 bg-card/50 backdrop-blur-sm p-3 shadow-sm hover:shadow-md transition-shadow duration-300">
        <MonthNavigator visibleMonth={visibleMonthString} onMonthChange={setVisibleMonthString} activityStats={activityStats} />

        <div className="w-full animate-scale-in">
          <MonthCalendar month={visibleMonthString} data={activityStats} maxCount={maxCount} onClick={navigateToDateFilter} />
        </div>

        {/* Activity legend */}
        <div className="mt-3 pt-2 border-t border-border/30 flex items-center justify-between text-[10px] text-muted-foreground/60">
          <span>Less</span>
          <div className="flex items-center gap-1">
            <div className="w-3 h-3 rounded bg-secondary/40" />
            <div className="w-3 h-3 rounded bg-amber-300/40" />
            <div className="w-3 h-3 rounded bg-amber-400/70" />
            <div className="w-3 h-3 rounded bg-gradient-to-br from-amber-400 to-orange-500" />
            <div className="w-3 h-3 rounded bg-gradient-to-br from-amber-500 to-orange-600" />
          </div>
          <span>More</span>
        </div>
      </div>
    </div>
  );
};

export default StatisticsView;
