import { ChevronDown } from 'lucide-react';

import { useState } from 'react';

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/Components/ui/collapsible';
import { Skeleton } from '@/Components/ui/skeleton';
import { cn } from '@/lib/utils';

import QualityMetricCard from './QualityMetricCard';
import type { GeoPillarMetrics } from './QualityScoreSidebar';

interface GeoScorePanelProps {
  overallScore: number | null | undefined;
  directAnswers: GeoPillarMetrics | null | undefined;
  faqStructure: GeoPillarMetrics | null | undefined;
  structuredData: GeoPillarMetrics | null | undefined;
  conceptClarity: GeoPillarMetrics | null | undefined;
  citationReadiness: GeoPillarMetrics | null | undefined;
  schemaOpportunities: GeoPillarMetrics | null | undefined;
  isLoading?: boolean;
  className?: string;
}

function getScoreStatus(
  score: number | null | undefined,
): 'good' | 'warning' | 'error' | 'neutral' {
  if (score == null) return 'neutral';
  if (score >= 70) return 'good';
  if (score >= 40) return 'warning';
  return 'error';
}

function getScoreSuggestion(
  score: number | null | undefined,
  pillarName: string,
): string | undefined {
  if (score == null) return undefined;
  if (score >= 70) return `Strong ${pillarName} signals detected`;
  if (score >= 40) return `${pillarName} signals present but could be strengthened`;
  return `Weak ${pillarName} signals — improvement recommended`;
}

function getOverallLabel(score: number | null | undefined): string {
  if (score == null) return 'N/A';
  if (score >= 70) return 'Strong';
  if (score >= 40) return 'Moderate';
  return 'Weak';
}

interface PillarDetailProps {
  pillar: GeoPillarMetrics;
  name: string;
}

function PillarDetail({ pillar, name }: PillarDetailProps) {
  const [isOpen, setIsOpen] = useState(false);

  if (pillar.suggestions.length === 0 && pillar.detected.length === 0) {
    return null;
  }

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger asChild>
        <button
          type="button"
          className="flex w-full items-center justify-between text-xs text-muted-foreground hover:text-foreground py-2.5 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors duration-150 hover:bg-accent/50"
        >
          <span>
            {name}: {pillar.signal_count} signal{pillar.signal_count !== 1 ? 's' : ''}
          </span>
          <ChevronDown
            className={cn('h-3 w-3 transition-transform duration-200', isOpen && 'rotate-180')}
          />
        </button>
      </CollapsibleTrigger>
      <CollapsibleContent className="space-y-1 pb-2">
        {pillar.suggestions.map((suggestion, i) => (
          <p key={i} className="text-xs text-muted-foreground border-l-2 border-amber-500/50 pl-2">
            {suggestion}
          </p>
        ))}
        {pillar.detected.length > 0 && (
          <div className="text-xs text-muted-foreground border-l-2 border-green-500/50 pl-2">
            Detected: {pillar.detected.slice(0, 3).join(', ')}
            {pillar.detected.length > 3 && ` +${pillar.detected.length - 3} more`}
          </div>
        )}
      </CollapsibleContent>
    </Collapsible>
  );
}

export default function GeoScorePanel({
  overallScore,
  directAnswers,
  faqStructure,
  structuredData,
  conceptClarity,
  citationReadiness,
  schemaOpportunities,
  isLoading = false,
  className,
}: GeoScorePanelProps) {
  if (isLoading) {
    return (
      <div className={className}>
        <div className="mb-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium text-muted-foreground">GEO Signals</h3>
            <Skeleton className="h-4 w-12" />
          </div>
        </div>
        <div className="space-y-3">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-16 w-full rounded-lg" />
          ))}
        </div>
      </div>
    );
  }

  if (overallScore == null) {
    return (
      <div className={className}>
        <h3 className="text-sm font-medium text-muted-foreground">GEO Signals</h3>
        <p className="text-xs text-muted-foreground mt-1">Start typing to see GEO analysis</p>
      </div>
    );
  }

  return (
    <div className={className}>
      <div className="mb-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium text-muted-foreground">GEO Signals</h3>
          <span
            className={cn(
              'text-xs font-medium',
              overallScore >= 70
                ? 'text-success'
                : overallScore >= 40
                  ? 'text-warning'
                  : 'text-destructive',
            )}
          >
            {getOverallLabel(overallScore)}
          </span>
        </div>
      </div>

      <div className="space-y-3">
        <QualityMetricCard
          label="Overall GEO"
          value={overallScore}
          format="number"
          status={getScoreStatus(overallScore)}
          description="AI citation readiness across 6 pillars"
          suggestion={
            overallScore < 40
              ? 'Content lacks GEO signals. Optimize for AI search visibility.'
              : overallScore < 70
                ? 'GEO signals present. Strengthen for better AI citation.'
                : 'Strong GEO signals support AI search visibility.'
          }
        />

        <QualityMetricCard
          label="Direct Answers"
          value={directAnswers?.score ?? null}
          format="number"
          status={getScoreStatus(directAnswers?.score)}
          description={`${directAnswers?.signal_count ?? 0} question headings & definitions`}
          suggestion={getScoreSuggestion(directAnswers?.score, 'direct answer')}
        />

        <QualityMetricCard
          label="FAQ Structure"
          value={faqStructure?.score ?? null}
          format="number"
          status={getScoreStatus(faqStructure?.score)}
          description={`${faqStructure?.signal_count ?? 0} Q&A patterns`}
          suggestion={getScoreSuggestion(faqStructure?.score, 'FAQ')}
        />

        <QualityMetricCard
          label="Structured Data"
          value={structuredData?.score ?? null}
          format="number"
          status={getScoreStatus(structuredData?.score)}
          description={`${structuredData?.signal_count ?? 0} tables, lists & structures`}
          suggestion={getScoreSuggestion(structuredData?.score, 'structured data')}
        />

        <QualityMetricCard
          label="Concept Clarity"
          value={conceptClarity?.score ?? null}
          format="number"
          status={getScoreStatus(conceptClarity?.score)}
          description={`${conceptClarity?.signal_count ?? 0} clarity signals`}
          suggestion={getScoreSuggestion(conceptClarity?.score, 'concept clarity')}
        />

        <QualityMetricCard
          label="Citation Readiness"
          value={citationReadiness?.score ?? null}
          format="number"
          status={getScoreStatus(citationReadiness?.score)}
          description={`${citationReadiness?.signal_count ?? 0} attributions & references`}
          suggestion={getScoreSuggestion(citationReadiness?.score, 'citation')}
        />

        <QualityMetricCard
          label="Schema Markup"
          value={schemaOpportunities?.score ?? null}
          format="number"
          status={getScoreStatus(schemaOpportunities?.score)}
          description={`${schemaOpportunities?.signal_count ?? 0} JSON-LD schema blocks`}
          suggestion={getScoreSuggestion(schemaOpportunities?.score, 'schema')}
        />
      </div>

      {/* Pillar details (expandable) */}
      <div className="mt-3 space-y-1">
        {directAnswers && <PillarDetail pillar={directAnswers} name="Direct Answers" />}
        {faqStructure && <PillarDetail pillar={faqStructure} name="FAQ Structure" />}
        {structuredData && <PillarDetail pillar={structuredData} name="Structured Data" />}
        {conceptClarity && <PillarDetail pillar={conceptClarity} name="Concept Clarity" />}
        {citationReadiness && <PillarDetail pillar={citationReadiness} name="Citations" />}
        {schemaOpportunities && <PillarDetail pillar={schemaOpportunities} name="Schema" />}
      </div>
    </div>
  );
}