import { formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

interface QualityScoresCardProps {
  scores: {
    flesch_kincaid_grade: number | null;
    avg_sentence_length: number | null;
    paragraph_count: number | null;
    passive_voice_percentage: number | null;
    word_count: number | null;
    h1_count: number | null;
    h2_count: number | null;
    h3_count: number | null;
    h4_count: number | null;
    h5_count: number | null;
    h6_count: number | null;
    image_count: number | null;
    internal_link_count: number | null;
    external_link_count: number | null;
  };
  className?: string;
}

interface MetricItemProps {
  label: string;
  value: number | null;
  format?: 'number' | 'decimal' | 'percent' | 'grade';
}

function formatValue(value: number | null, format: MetricItemProps['format'] = 'number'): string {
  if (value === null) {
    return 'N/A';
  }

  switch (format) {
    case 'decimal':
      return value.toFixed(1);
    case 'percent':
      return `${value.toFixed(1)}%`;
    case 'grade':
      return `Grade ${value.toFixed(1)}`;
    case 'number':
    default:
      return formatNumber(Math.round(value));
  }
}

function MetricItem({ label, value, format = 'number' }: MetricItemProps) {
  return (
    <div className="flex items-center justify-between py-2">
      <span className="text-sm text-muted-foreground">{label}</span>
      <span className="text-sm font-medium tabular-nums">{formatValue(value, format)}</span>
    </div>
  );
}

export default function QualityScoresCard({ scores, className }: QualityScoresCardProps) {
  const hasReadabilityScores =
    scores.flesch_kincaid_grade !== null ||
    scores.avg_sentence_length !== null ||
    scores.paragraph_count !== null ||
    scores.passive_voice_percentage !== null;

  const hasStructureScores =
    scores.word_count !== null ||
    scores.h1_count !== null ||
    scores.image_count !== null ||
    scores.internal_link_count !== null;

  if (!hasReadabilityScores && !hasStructureScores) {
    return (
      <div className={cn('rounded-lg border bg-card p-4', className)}>
        <p className="text-sm text-muted-foreground">No quality scores available</p>
      </div>
    );
  }

  return (
    <div className={cn('rounded-lg border bg-card p-4', className)}>
      <div className="space-y-4">
        {/* Readability Metrics */}
        {hasReadabilityScores && (
          <div>
            <h3 className="text-sm font-semibold mb-2">Readability</h3>
            <div className="space-y-1 divide-y divide-border">
              {scores.flesch_kincaid_grade !== null && (
                <MetricItem
                  label="Reading Level"
                  value={scores.flesch_kincaid_grade}
                  format="grade"
                />
              )}
              {scores.avg_sentence_length !== null && (
                <MetricItem
                  label="Avg. Sentence Length"
                  value={scores.avg_sentence_length}
                  format="decimal"
                />
              )}
              {scores.paragraph_count !== null && (
                <MetricItem label="Paragraphs" value={scores.paragraph_count} format="number" />
              )}
              {scores.passive_voice_percentage !== null && (
                <MetricItem
                  label="Passive Voice"
                  value={scores.passive_voice_percentage}
                  format="percent"
                />
              )}
            </div>
          </div>
        )}

        {/* Content Structure */}
        {hasStructureScores && (
          <div>
            <h3 className="text-sm font-semibold mb-2">Content Structure</h3>
            <div className="space-y-1 divide-y divide-border">
              {scores.word_count !== null && (
                <MetricItem label="Word Count" value={scores.word_count} format="number" />
              )}
              {(scores.h1_count !== null ||
                scores.h2_count !== null ||
                scores.h3_count !== null) && (
                <div className="flex items-center justify-between py-2">
                  <span className="text-sm text-muted-foreground">Headings</span>
                  <span className="text-sm font-medium tabular-nums">
                    {[
                      scores.h1_count !== null && `H1: ${scores.h1_count}`,
                      scores.h2_count !== null && `H2: ${scores.h2_count}`,
                      scores.h3_count !== null && `H3: ${scores.h3_count}`,
                      scores.h4_count !== null && `H4: ${scores.h4_count}`,
                      scores.h5_count !== null && `H5: ${scores.h5_count}`,
                      scores.h6_count !== null && `H6: ${scores.h6_count}`,
                    ]
                      .filter(Boolean)
                      .join(', ')}
                  </span>
                </div>
              )}
              {scores.image_count !== null && (
                <MetricItem label="Images" value={scores.image_count} format="number" />
              )}
              {scores.internal_link_count !== null && (
                <MetricItem
                  label="Internal Links"
                  value={scores.internal_link_count}
                  format="number"
                />
              )}
              {scores.external_link_count !== null && (
                <MetricItem
                  label="External Links"
                  value={scores.external_link_count}
                  format="number"
                />
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}