import { memo } from 'react';

import { Badge } from '@/Components/ui/badge';

interface CannibalizationCase {
  id: number;
  query_cluster: string;
  competing_pages_count: number;
  lead_volatility_score: number;
  impact_score: number;
  confidence_score: number;
  primary_page_url: string | null;
  status: string;
  lifecycle_status: string;
}

interface CaseCardProps {
  case: CannibalizationCase;
}

const VolatilityBadge = memo(({ score }: { score: number }) => {
  let variant: 'default' | 'medium' | 'destructive' = 'default';
  let label = 'Low';

  if (score >= 0.7) {
    variant = 'destructive';
    label = 'High';
  } else if (score >= 0.4) {
    variant = 'medium';
    label = 'Medium';
  }

  return <Badge variant={variant}>{label} Volatility</Badge>;
});
VolatilityBadge.displayName = 'VolatilityBadge';

function CaseCard({ case: cannibalizationCase }: CaseCardProps) {
  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div className="flex flex-col gap-2 min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <VolatilityBadge score={cannibalizationCase.lead_volatility_score} />
            {cannibalizationCase.status !== 'open' && (
              <Badge variant="outline">{cannibalizationCase.status}</Badge>
            )}
          </div>
          <div className="min-w-0">
            <p className="font-medium text-lg break-words">{cannibalizationCase.query_cluster}</p>
            <p className="text-sm text-muted-foreground mt-1">
              {cannibalizationCase.competing_pages_count} competing{' '}
              {cannibalizationCase.competing_pages_count === 1 ? 'page' : 'pages'}
            </p>
            {cannibalizationCase.primary_page_url && (
              <p
                className="text-xs text-muted-foreground mt-1 truncate"
                title={cannibalizationCase.primary_page_url}
              >
                Primary: {cannibalizationCase.primary_page_url}
              </p>
            )}
          </div>
        </div>
        <div className="flex items-center gap-4 sm:shrink-0">
          <div className="text-right">
            <p className="text-2xl font-bold">{Math.round(cannibalizationCase.impact_score)}</p>
            <p className="text-xs text-muted-foreground">Impact</p>
          </div>
          <div className="text-right">
            <p className="text-sm font-semibold">
              {Math.round(cannibalizationCase.confidence_score * 100)}%
            </p>
            <p className="text-xs text-muted-foreground">Confidence</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default memo(CaseCard);