import { AlertTriangle, CheckCircle2, TrendingDown } from 'lucide-react';

import { Badge } from '@/Components/ui/badge';
import type { CompetitiveGap } from '@/hooks/useContentScore';
import { cn } from '@/lib/utils';

interface CompetitiveGapPanelProps {
  gap: CompetitiveGap | null | undefined;
  isLoading?: boolean;
}

function coverageLabel(pct: number): { label: string; colorClass: string } {
  if (pct >= 80) return { label: 'Good coverage', colorClass: 'text-success' };
  if (pct >= 50) return { label: 'Partial coverage', colorClass: 'text-warning' };
  return { label: 'Low coverage', colorClass: 'text-destructive' };
}

/**
 * R6PROD-011 — Surface competitive entity/heading coverage gaps in the content editor.
 *
 * Shows which headings and entities top-ranking competitor pages cover that the
 * current draft is missing, helping the blogger understand "why are they outranking me".
 * Gap lists shrink as the user writes and the content score refreshes.
 */
export default function CompetitiveGapPanel({ gap, isLoading = false }: CompetitiveGapPanelProps) {
  if (isLoading) {
    return (
      <div className="space-y-3 animate-pulse">
        <div className="h-4 bg-muted rounded w-3/4" />
        <div className="h-3 bg-muted rounded w-1/2" />
        <div className="h-3 bg-muted rounded w-2/3" />
      </div>
    );
  }

  if (!gap) {
    return (
      <p className="text-xs text-muted-foreground">
        Run a SERP analysis to see what top competitors cover that you don&apos;t.
      </p>
    );
  }

  const { missing_headings, missing_entities, coverage_pct } = gap;
  const hasGaps = missing_headings.length > 0 || missing_entities.length > 0;
  const { label: covLabel, colorClass: covColor } = coverageLabel(coverage_pct);

  return (
    <div className="space-y-4">
      {/* Coverage summary */}
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-muted-foreground">Entity coverage vs competitors</span>
        <span className={cn('text-xs font-data tabular-nums font-semibold', covColor)}>
          {coverage_pct}%{' '}
          <span className="font-normal text-muted-foreground">— {covLabel}</span>
        </span>
      </div>

      {!hasGaps && (
        <div className="flex items-center gap-2 text-xs text-success">
          <CheckCircle2 className="size-3.5 shrink-0" />
          <span>No coverage gaps detected — your content covers all competitor topics.</span>
        </div>
      )}

      {/* Missing headings */}
      {missing_headings.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <TrendingDown className="size-3.5 text-warning shrink-0" />
            <span className="text-xs font-medium">Missing sections</span>
            <Badge variant="outline" className="text-[10px] py-0 px-1.5 ml-auto">
              {missing_headings.length}
            </Badge>
          </div>
          <p className="text-[11px] text-muted-foreground leading-relaxed">
            Competitors use these headings. Adding H2/H3 sections on these topics may improve your ranking.
          </p>
          <ul className="space-y-1">
            {missing_headings.map((heading) => (
              <li
                key={heading}
                className="flex items-start gap-1.5 text-xs text-foreground/80"
              >
                <span className="mt-0.5 h-1.5 w-1.5 rounded-full bg-warning shrink-0" />
                <span>{heading}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Missing entities */}
      {missing_entities.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <AlertTriangle className="size-3.5 text-destructive shrink-0" />
            <span className="text-xs font-medium">Missing entities</span>
            <Badge variant="outline" className="text-[10px] py-0 px-1.5 ml-auto">
              {missing_entities.length}
            </Badge>
          </div>
          <p className="text-[11px] text-muted-foreground leading-relaxed">
            High-importance topics competitors cover that aren&apos;t in your content yet.
          </p>
          <div className="flex flex-wrap gap-1.5">
            {missing_entities.map((entity) => (
              <span
                key={entity}
                className="inline-flex items-center rounded-md border border-destructive/30 bg-destructive/5 px-2 py-0.5 text-[11px] text-destructive/80"
              >
                {entity}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}