import { ChevronRight, Lightbulb, Target } from 'lucide-react';

import { memo, useCallback, useState } from 'react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { formatNumber, formatPercent, formatPercentRaw } from '@/lib/format';
import { cn } from '@/lib/utils';

interface TopicGapSuggestion {
  id: number;
  suggestion_type: string;
  missing_entity: {
    entity_text: string;
    entity_type: string;
  };
  target_page_url: string | null;
  impact_score: number;
  confidence_score: number;
  effort_score: number;
  risk_score: number;
  title: string;
  reasoning: string;
  evidence: {
    entity_text: string;
    entity_type: string;
    demand_volume: number;
    coverage_strength: number;
    gap_severity: number;
    cluster_coverage: number;
    cluster_total_demand: number;
    source: string;
  };
}

interface GapSuggestionCardProps {
  suggestion: TopicGapSuggestion;
}

const SuggestionTypeBadge = memo(({ type }: { type: string }) => {
  const badges: Record<
    string,
    { label: string; variant: 'default' | 'secondary' | 'outline' | 'medium' }
  > = {
    expand_hub: { label: 'Expand Hub', variant: 'default' },
    create_page: { label: 'Create Page', variant: 'secondary' },
    add_section: { label: 'Add Section', variant: 'medium' },
    add_faq: { label: 'Add FAQ', variant: 'outline' },
  };
  const config = badges[type] || { label: type, variant: 'default' };
  return <Badge variant={config.variant}>{config.label}</Badge>;
});
SuggestionTypeBadge.displayName = 'SuggestionTypeBadge';

function ScoreBar({ score, label, max = 100 }: { score: number; label: string; max?: number }) {
  const percentage = Math.min((score / max) * 100, 100);
  const variant =
    percentage >= 70
      ? 'bg-green-500 dark:bg-green-400'
      : percentage >= 40
        ? 'bg-yellow-500 dark:bg-yellow-400'
        : 'bg-red-500 dark:bg-red-400';

  return (
    <div>
      <div className="flex items-center justify-between mb-1">
        <span className="text-sm text-muted-foreground">{label}</span>
        <span className="text-sm font-medium tabular-nums">{Math.round(score)}</span>
      </div>
      <div className="h-2 rounded-full bg-muted overflow-hidden">
        <div
          className={cn('h-full rounded-full transition-all duration-300', variant)}
          style={{ width: `${percentage}%` }}
          role="progressbar"
          aria-valuenow={score}
          aria-valuemin={0}
          aria-valuemax={max}
          aria-label={`${label}: ${score}`}
        />
      </div>
    </div>
  );
}

function GapSuggestionCard({ suggestion }: GapSuggestionCardProps) {
  const [evidenceOpen, setEvidenceOpen] = useState(false);

  const toggleEvidence = useCallback(() => {
    setEvidenceOpen((prev) => !prev);
  }, []);

  // Effort score is 0-1 scale, so multiply by 100 for percentage display
  const effortPercentage = suggestion.effort_score * 100;

  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 items-start gap-3 min-w-0 flex-1">
          <div className="flex flex-col gap-2">
            <SuggestionTypeBadge type={suggestion.suggestion_type} />
          </div>
          <div className="min-w-0 flex-1">
            <p className="font-medium">{suggestion.title}</p>
            <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
              <Lightbulb className="h-4 w-4 shrink-0" />
              <span className="line-clamp-1">{suggestion.missing_entity.entity_text}</span>
              <Badge variant="outline" className="shrink-0">
                {suggestion.missing_entity.entity_type}
              </Badge>
            </div>
            {suggestion.target_page_url && (
              <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
                <Target className="h-4 w-4 shrink-0" />
                <a
                  href={suggestion.target_page_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary hover:underline truncate"
                >
                  {suggestion.target_page_url}
                </a>
              </div>
            )}
            <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
              {suggestion.reasoning}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 sm:shrink-0">
          <div className="flex flex-col gap-2 min-w-[120px]">
            <ScoreBar score={suggestion.impact_score} label="Impact" />
            <ScoreBar score={effortPercentage} label="Effort" max={100} />
          </div>
          <div className="flex flex-col gap-2">
            <Button variant="outline" size="sm" disabled title="Brief creation coming soon">
              Generate Brief
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled
              title="Section draft generation coming soon"
            >
              Generate Draft
            </Button>
          </div>
        </div>
      </div>

      <button
        type="button"
        aria-expanded={evidenceOpen}
        onClick={toggleEvidence}
        className="mt-3 text-sm text-muted-foreground cursor-pointer hover:text-foreground flex items-center gap-1"
      >
        <ChevronRight
          className={cn('h-3 w-3 transition-transform duration-200', evidenceOpen && 'rotate-90')}
        />
        View evidence
      </button>
      <div
        className={cn(
          'grid transition-all duration-200 ease-in-out',
          evidenceOpen ? 'grid-rows-[1fr] opacity-100 mt-2' : 'grid-rows-[0fr] opacity-0',
        )}
      >
        <div className="overflow-hidden">
          <div className="space-y-3 text-sm">
            <div className="grid grid-cols-2 gap-3">
              <div>
                <span className="text-muted-foreground">Demand Volume</span>
                <p className="font-medium tabular-nums">
                  {formatNumber(suggestion.evidence.demand_volume)}
                </p>
              </div>
              <div>
                <span className="text-muted-foreground">Coverage Strength</span>
                <p className="font-medium tabular-nums">
                  {formatPercentRaw(suggestion.evidence.coverage_strength, 1)}
                </p>
              </div>
              <div>
                <span className="text-muted-foreground">Gap Severity</span>
                <p className="font-medium tabular-nums">
                  {formatPercentRaw(suggestion.evidence.gap_severity, 1)}
                </p>
              </div>
              <div>
                <span className="text-muted-foreground">Cluster Coverage</span>
                <p className="font-medium tabular-nums">
                  {formatPercentRaw(suggestion.evidence.cluster_coverage, 1)}
                </p>
              </div>
            </div>
            <div>
              <span className="text-muted-foreground">Source</span>
              <p className="font-medium">{suggestion.evidence.source}</p>
            </div>
            <div className="pt-2 border-t">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>Confidence</span>
                <span className="tabular-nums">
                  {formatPercent(suggestion.confidence_score, 0)}
                </span>
              </div>
              <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
                <span>Risk</span>
                <span className="tabular-nums">{formatPercent(suggestion.risk_score, 0)}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default memo(GapSuggestionCard);