import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
import { Badge, Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';

export const SpoonAiReviewPanel = ({
  latestReview,
  reviews,
}: {
  latestReview?: Doc<'aiReviews'> | null;
  reviews: Doc<'aiReviews'>[];
}) => (
  <div className='space-y-4'>
    <Card className='shadow-none'>
      <CardHeader>
        <CardTitle className='text-base'>Latest compatibility review</CardTitle>
      </CardHeader>
      <CardContent>
        {latestReview ? (
          <div className='space-y-4'>
            <div className='flex flex-wrap gap-2'>
              <Badge>{latestReview.risk}</Badge>
              <Badge variant='outline'>{latestReview.recommendedAction}</Badge>
              {latestReview.requiresHumanReview ? (
                <Badge variant='secondary'>Human review required</Badge>
              ) : null}
            </div>
            <p className='text-sm'>
              {latestReview.outputSummary ?? latestReview.inputSummary}
            </p>
            {latestReview.reasoningSummary ? (
              <p className='text-muted-foreground text-sm'>
                {latestReview.reasoningSummary}
              </p>
            ) : null}
            {latestReview.potentialConflicts?.length ? (
              <div>
                <p className='text-sm font-medium'>Potential conflicts</p>
                <ul className='text-muted-foreground mt-2 list-disc space-y-1 pl-5 text-sm'>
                  {latestReview.potentialConflicts.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
            ) : null}
          </div>
        ) : (
          <p className='text-muted-foreground text-sm'>
            Run an AI review after a GitHub refresh to get compatibility notes.
          </p>
        )}
      </CardContent>
    </Card>
    <Card className='shadow-none'>
      <CardHeader>
        <CardTitle className='text-base'>Review history</CardTitle>
      </CardHeader>
      <CardContent className='space-y-3'>
        {reviews.length ? (
          reviews.map((review) => (
            <div key={review._id} className='border-border border p-3 text-sm'>
              <div className='flex flex-wrap gap-2'>
                <Badge variant='outline'>{review.status}</Badge>
                <Badge variant='secondary'>{review.risk}</Badge>
              </div>
              <p className='mt-2'>
                {review.outputSummary ?? review.inputSummary}
              </p>
            </div>
          ))
        ) : (
          <p className='text-muted-foreground text-sm'>No AI reviews yet.</p>
        )}
      </CardContent>
    </Card>
  </div>
);
