import { useMemo } from "react";
import type { Work } from "@shared/schema";
import { formatTypeName } from "./utils";
import { Progress } from "@/components/ui/progress";
import { StatCard, StatGroup } from "@/components/ui/stat-card";
import { cn } from "@/lib/utils";

interface AuthorReadingStatsProps {
  works: Work[];
  workTypes: string[];
  languages: string[];
  className?: string;
  heading?: string; // allow overriding default heading label
}

/**
 * Displays high-level reading / catalog statistics for an author's works.
 * NOTE: Current progress values are placeholder constants; replace with
 * real analytics once backend endpoints are available.
 */
export function AuthorReadingStats({
  works,
  workTypes,
  languages,
  className,
  heading = "Reading Statistics",
}: AuthorReadingStatsProps) {
  // Derive most recent work (assuming works are returned sorted by recency; fallback to first)
  const mostRecentTitle = useMemo(() => works[0]?.title || "N/A", [works]);
  const popularType = useMemo(
    () => (workTypes[0] ? formatTypeName(workTypes[0]) : "N/A"),
    [workTypes]
  );
  const primaryLanguage = useMemo(() => languages[0] || "N/A", [languages]);

  return (
    <section
      className={cn("mt-8", className)}
      aria-labelledby="reading-stats-heading"
    >
      <h3
        id="reading-stats-heading"
        className="text-lg font-medium text-navy dark:text-cream mb-4"
      >
        {heading}
      </h3>
      <StatGroup cols={3} className="mb-2">
        <StatCard
          title="Most Recent"
          value={mostRecentTitle}
          footer={<Progress value={85} className="h-2" />}
          variant="ghost"
          size="sm"
        />
        <StatCard
          title="Most Popular Type"
          value={popularType}
          footer={<Progress value={70} className="h-2" />}
          variant="ghost"
          size="sm"
        />
        <StatCard
          title="Primary Language"
          value={primaryLanguage}
          footer={<Progress value={60} className="h-2" />}
          variant="ghost"
          size="sm"
        />
      </StatGroup>
      {/* TODO(P2, medium): Replace placeholder progress values + order with real analytics (popularity, completion, etc.) */}
    </section>
  );
}
