import ContextualHelp from '@/Components/Shared/ContextualHelp';
import DataCard from '@/Components/Shared/DataCard';
import { formatDecimal, formatNumber, formatPercent } from '@/lib/format';
import { SEO_GLOSSARY } from '@/lib/seo-glossary';

interface Summary {
  overall: {
    clicks_after: number;
    clicks_delta_pct: number;
    impressions_after: number;
    impressions_delta_pct: number;
    ctr_after: number;
    ctr_delta_pct: number;
    position_after: number;
    position_delta_pct: number;
  };
}

interface MetricsOverviewProps {
  summary: Summary;
}

export default function MetricsOverview({ summary }: MetricsOverviewProps) {
  const { overall } = summary;

  return (
    <div
      className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"
      role="region"
      aria-label="Site performance metrics overview"
    >
      <div aria-label={`Clicks: ${formatNumber(overall.clicks_after)}`}>
        <span className="sr-only">
          Total clicks for the analysis period: {formatNumber(overall.clicks_after)}
        </span>
        <DataCard
          title="Clicks"
          titleExtra={<ContextualHelp>{SEO_GLOSSARY.clicks}</ContextualHelp>}
          value={formatNumber(overall.clicks_after)}
          delta={overall.clicks_delta_pct}
          deltaFormat="percent"
        />
      </div>
      <div aria-label={`Impressions: ${formatNumber(overall.impressions_after)}`}>
        <span className="sr-only">
          Total impressions for the analysis period: {formatNumber(overall.impressions_after)}
        </span>
        <DataCard
          title="Impressions"
          titleExtra={<ContextualHelp>{SEO_GLOSSARY.impressions}</ContextualHelp>}
          value={formatNumber(overall.impressions_after)}
          delta={overall.impressions_delta_pct}
          deltaFormat="percent"
        />
      </div>
      <div aria-label={`Average click-through rate: ${formatPercent(overall.ctr_after, 1)}`}>
        <span className="sr-only">
          Average click-through rate for the analysis period: {formatPercent(overall.ctr_after, 1)}
        </span>
        <DataCard
          title="Avg CTR"
          titleExtra={<ContextualHelp>{SEO_GLOSSARY.ctr}</ContextualHelp>}
          value={formatPercent(overall.ctr_after, 1)}
          delta={overall.ctr_delta_pct}
          deltaFormat="percent"
        />
      </div>
      <div aria-label={`Average position: ${formatDecimal(overall.position_after, 1)}`}>
        <span className="sr-only">
          Average search result position for the analysis period: {formatDecimal(overall.position_after, 1)}
        </span>
        <DataCard
          title="Avg Position"
          titleExtra={<ContextualHelp>{SEO_GLOSSARY.position}</ContextualHelp>}
          value={formatDecimal(overall.position_after, 1)}
          delta={overall.position_delta_pct}
          deltaFormat="percent"
        />
      </div>
    </div>
  );
}