"use client";

import { GoalSummary } from "@fitai/shared";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface GoalsSummaryCardProps {
  goals: GoalSummary;
}

export function GoalsSummaryCard({ goals }: GoalsSummaryCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Fitness Goals</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Summary Stats */}
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-600">
              {goals.totalActive}
            </div>
            <div className="text-xs text-gray-600">Active Goals</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-green-600">
              {goals.totalCompleted}
            </div>
            <div className="text-xs text-gray-600">Completed</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-purple-600">
              {goals.averageProgress}%
            </div>
            <div className="text-xs text-gray-600">Avg Progress</div>
          </div>
        </div>

        {/* Active Goals */}
        {goals.active.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold">Active Goals</h4>
            <div className="space-y-2">
              {goals.active.map((goal) => (
                <div key={goal.id} className="border rounded-lg p-3">
                  <div className="flex justify-between items-start mb-2">
                    <div className="font-medium">{goal.title}</div>
                    <Badge
                      variant={
                        goal.priority === "high" ? "destructive" : "secondary"
                      }
                    >
                      {goal.priority}
                    </Badge>
                  </div>
                  <div className="text-xs text-gray-600 mb-2">
                    {goal.goalType.replace("_", " ")}
                  </div>
                  {/* Progress Bar */}
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-blue-600 h-2 rounded-full transition-all"
                      style={{ width: `${goal.progress}%` }}
                    />
                  </div>
                  <div className="text-xs text-gray-600 mt-1">
                    {goal.progress}% complete
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Completed Goals */}
        {goals.completed.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold">Completed Goals</h4>
            <div className="space-y-1">
              {goals.completed.map((goal) => (
                <div
                  key={goal.id}
                  className="flex justify-between items-center text-sm p-2 bg-green-50 rounded"
                >
                  <span className="font-medium">{goal.title}</span>
                  <span className="text-xs text-green-700">
                    ✓{" "}
                    {goal.completedDate
                      ? new Date(goal.completedDate).toLocaleDateString()
                      : "N/A"}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Empty State */}
        {goals.active.length === 0 && goals.completed.length === 0 && (
          <div className="text-center text-gray-500 py-8">
            No goals found for this period
          </div>
        )}
      </CardContent>
    </Card>
  );
}
