import Link from "next/link";
import { Card } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import type { GeneratedWeeklyPlan } from "@/lib/types";

interface PlanCardProps {
  plan: GeneratedWeeklyPlan;
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr + "T00:00:00");
  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

function getStatusVariant(
  status: string
): "success" | "warning" | "error" | "default" {
  switch (status) {
    case "completed":
      return "success";
    case "pending":
      return "warning";
    case "failed":
      return "error";
    default:
      return "default";
  }
}

export function PlanCard({ plan }: PlanCardProps) {
  const workoutDays = plan.generated_workouts.filter((w) => !w.is_rest_day);
  const dateRange = `${formatDate(plan.week_start_date)} - ${formatDate(plan.week_end_date)}`;

  return (
    <Link href={`/plans/${plan.id}`} className="block">
      <Card className="p-4 hover:bg-zinc-800/50 transition-colors duration-150">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-semibold text-zinc-100">{dateRange}</h3>
          <Badge variant={getStatusVariant(plan.status)}>
            {plan.status}
          </Badge>
        </div>
        <div className="flex items-center gap-4 text-xs text-zinc-400">
          <span>{workoutDays.length} workout{workoutDays.length !== 1 ? "s" : ""}</span>
          <span>{plan.generation_time_ms}ms</span>
        </div>
      </Card>
    </Link>
  );
}