import { ChevronDown } from 'lucide-react';

import { useState } from 'react';

import { Button } from '@/Components/ui/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/Components/ui/collapsible';

import SerpAnalysisMetrics from './SerpAnalysisMetrics';
import SerpResultRow from './SerpResultRow';

interface HeadingStructure {
  h1: number;
  h2: number;
  h3: number;
  h4: number;
  h5: number;
  h6: number;
}

interface SerpResult {
  position: number;
  domain: string;
  title: string;
  description: string;
  url: string;
  word_count: number;
  heading_structure: HeadingStructure;
}

interface Analysis {
  avg_word_count: number;
  word_count_range: {
    min: number;
    max: number;
  };
  common_h2_terms: string[];
  top_terms: Array<{ term: string; frequency: number }>;
}

interface SerpSnapshot {
  results: SerpResult[];
  analysis: Analysis;
}

interface Props {
  serpSnapshot: SerpSnapshot | null;
  keyword?: string | null;
  targetUrl?: string | null;
}

export default function SerpCompetitorPanel({ serpSnapshot, keyword, targetUrl }: Props) {
  const [isOpen, setIsOpen] = useState(false);

  if (!serpSnapshot) {
    return (
      <div className="rounded-lg border border-dashed p-4 text-center">
        <p className="text-sm text-muted-foreground">No SERP data available yet.</p>
        <p className="text-xs text-muted-foreground mt-1">
          Add a keyword to see what's ranking for this topic.
        </p>
      </div>
    );
  }

  const results = serpSnapshot.results || [];

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
      <CollapsibleTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="w-full justify-between px-0 py-2 hover:bg-transparent"
          aria-label={`${isOpen ? 'Close' : 'Open'} SERP competitor analysis panel`}
        >
          <div className="flex items-center gap-2">
            <span className="text-sm font-semibold">What's Ranking Now</span>
            {keyword && (
              <span className="text-xs bg-warning/10 text-warning-foreground px-2 py-0.5 rounded">
                {keyword}
              </span>
            )}
          </div>
          <ChevronDown
            className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
          />
        </Button>
      </CollapsibleTrigger>

      <CollapsibleContent className="space-y-4 pt-4">
        {/* Aggregate Metrics */}
        <div>
          <h3 className="text-xs font-semibold text-muted-foreground mb-3 uppercase">
            Competition Overview
          </h3>
          <SerpAnalysisMetrics analysis={serpSnapshot.analysis} />
        </div>

        {/* SERP Results */}
        <div>
          <h3 className="text-xs font-semibold text-muted-foreground mb-3 uppercase">
            Top {results.length} Results
          </h3>
          <div className="space-y-2 max-h-96 overflow-y-auto">
            {results.map((result, idx) => (
              <SerpResultRow key={idx} result={result} />
            ))}
          </div>
        </div>

        {/* Target Info */}
        {targetUrl && (
          <div className="text-xs text-muted-foreground border-t pt-3">
            <p>
              Target: <span className="font-mono text-xs">{targetUrl}</span>
            </p>
          </div>
        )}
      </CollapsibleContent>
    </Collapsible>
  );
}