"use client";

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

interface RecommendationsCardProps {
  recommendations: RecommendationSummary;
}

export function RecommendationsCard({
  recommendations,
}: RecommendationsCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>AI Recommendations</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-green-600">
              {recommendations.totalAccepted}
            </div>
            <div className="text-xs text-gray-600">Accepted</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-yellow-600">
              {recommendations.totalPending}
            </div>
            <div className="text-xs text-gray-600">Pending</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-red-600">
              {recommendations.totalRejected}
            </div>
            <div className="text-xs text-gray-600">Rejected</div>
          </div>
        </div>

        {/* Accepted Recommendations */}
        {recommendations.accepted.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold text-green-700">
              Accepted Recommendations
            </h4>
            <div className="space-y-2">
              {recommendations.accepted.map((rec) => (
                <div
                  key={rec.id}
                  className="border border-green-200 bg-green-50 rounded-lg p-3"
                >
                  <div className="flex justify-between items-start mb-2">
                    <Badge variant="default" className="bg-green-600">
                      Accepted
                    </Badge>
                    <span className="text-xs text-gray-500">
                      {new Date(rec.generatedAt).toLocaleDateString()}
                    </span>
                  </div>
                  <div className="text-sm">{rec.recommendationText}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Pending Recommendations */}
        {recommendations.pending.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold text-yellow-700">
              Pending Recommendations
            </h4>
            <div className="space-y-2">
              {recommendations.pending.map((rec) => (
                <div
                  key={rec.id}
                  className="border border-yellow-200 bg-yellow-50 rounded-lg p-3"
                >
                  <div className="flex justify-between items-start mb-2">
                    <Badge variant="secondary">Pending</Badge>
                    <span className="text-xs text-gray-500">
                      {new Date(rec.generatedAt).toLocaleDateString()}
                    </span>
                  </div>
                  <div className="text-sm">{rec.recommendationText}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Rejected Recommendations */}
        {recommendations.rejected.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold text-red-700">
              Rejected Recommendations
            </h4>
            <div className="space-y-2">
              {recommendations.rejected.map((rec) => (
                <div
                  key={rec.id}
                  className="border border-red-200 bg-red-50 rounded-lg p-3"
                >
                  <div className="flex justify-between items-start mb-2">
                    <Badge variant="destructive">Rejected</Badge>
                    <span className="text-xs text-gray-500">
                      {new Date(rec.generatedAt).toLocaleDateString()}
                    </span>
                  </div>
                  <div className="text-sm">{rec.recommendationText}</div>
                </div>
              ))}
            </div>
          </div>
        )}

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