import { ExternalLink } from 'lucide-react';

import DataCard from '@/Components/Shared/DataCard';
import { formatNumber, formatPercentRaw } from '@/lib/format';

interface TopicCluster {
  id: number;
  name: string;
  total_demand: number;
  coverage_percentage: number;
  hub_page_url: string | null;
  metadata: {
    representative_queries?: string[];
    [key: string]: unknown;
  };
}

interface TopicClusterMember {
  id: number;
  member_type: 'query' | 'page';
  member_value: string;
  clicks: number;
  impressions: number;
  position: number;
  is_hub: boolean;
}

interface ClusterOverviewProps {
  cluster: TopicCluster;
  members: TopicClusterMember[];
}

export default function ClusterOverview({ cluster, members }: ClusterOverviewProps) {
  const queryCount = members.filter((m) => m.member_type === 'query').length;
  const pageCount = members.filter((m) => m.member_type === 'page').length;

  return (
    <>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <DataCard
          title="Total Demand"
          value={formatNumber(cluster.total_demand)}
          subtitle="Clicks + Impressions"
        />
        <DataCard
          title="Coverage"
          value={formatPercentRaw(cluster.coverage_percentage, 1)}
          subtitle="Entity Coverage"
        />
        <DataCard
          title="Queries"
          value={formatNumber(queryCount)}
          subtitle={queryCount === 1 ? 'Query' : 'Queries'}
        />
        <DataCard
          title="Pages"
          value={formatNumber(pageCount)}
          subtitle={pageCount === 1 ? 'Page' : 'Pages'}
        />
      </div>

      {cluster.hub_page_url && (
        <div className="mb-6 p-4 rounded-lg border bg-card">
          <p className="text-sm font-medium text-muted-foreground mb-2">Hub Page</p>
          <a
            href={cluster.hub_page_url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary hover:underline flex items-center gap-2 break-all"
          >
            {cluster.hub_page_url}
            <ExternalLink className="h-4 w-4 shrink-0" />
          </a>
        </div>
      )}
    </>
  );
}