import { ChevronRight, Layers, TrendingUp } from 'lucide-react';

import { memo, useCallback, useState } from 'react';

import { Link } from '@inertiajs/react';

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

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

interface ClusterCardProps {
  cluster: TopicCluster;
  siteId: number;
}

const CoverageBadge = memo(({ coverage }: { coverage: number }) => {
  const variant = coverage >= 70 ? 'default' : coverage >= 30 ? 'medium' : 'destructive';
  return <Badge variant={variant}>{Math.round(coverage)}% Coverage</Badge>;
});
CoverageBadge.displayName = 'CoverageBadge';

function ClusterCard({ cluster, siteId }: ClusterCardProps) {
  const [missingEntitiesOpen, setMissingEntitiesOpen] = useState(false);

  const toggleMissingEntities = useCallback(() => {
    setMissingEntitiesOpen((prev) => !prev);
  }, []);

  const topQueries = cluster.metadata.representative_queries?.slice(0, 3) || [];

  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div className="flex items-start gap-3 min-w-0 flex-1">
          <div className="flex flex-col gap-2 min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="font-medium text-lg">{cluster.name}</h3>
              <CoverageBadge coverage={cluster.coverage_percentage} />
            </div>
            <div className="flex items-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-1">
                <TrendingUp className="h-4 w-4" />
                <span className="tabular-nums">{formatNumber(cluster.total_demand)}</span>
                <span>demand</span>
              </div>
              <div className="flex items-center gap-1">
                <Layers className="h-4 w-4" />
                <span className="tabular-nums">{cluster.page_count}</span>
                <span>{cluster.page_count === 1 ? 'page' : 'pages'}</span>
              </div>
            </div>
            {topQueries.length > 0 && (
              <div className="text-sm text-muted-foreground mt-1">
                <span className="font-medium">Top queries: </span>
                <span className="line-clamp-1">{topQueries.join(', ')}</span>
              </div>
            )}
          </div>
        </div>
        <div className="flex items-center gap-4 sm:shrink-0">
          <div className="text-right">
            <p className="text-2xl font-bold">{cluster.gap_count}</p>
            <p className="text-xs text-muted-foreground">Gaps</p>
          </div>
          <Button variant="outline" size="sm" asChild>
            <Link href={route('topic-clusters.show', [siteId, cluster.id])}>View Details</Link>
          </Button>
        </div>
      </div>

      {cluster.hub_page_url && (
        <button
          type="button"
          aria-expanded={missingEntitiesOpen}
          onClick={toggleMissingEntities}
          className="mt-3 text-sm text-muted-foreground cursor-pointer hover:text-foreground flex items-center gap-1"
        >
          <ChevronRight
            className={cn(
              'h-3 w-3 transition-transform duration-200',
              missingEntitiesOpen && 'rotate-90',
            )}
          />
          Hub page
        </button>
      )}
      <div
        className={cn(
          'grid transition-all duration-200 ease-in-out',
          missingEntitiesOpen && cluster.hub_page_url
            ? 'grid-rows-[1fr] opacity-100 mt-2'
            : 'grid-rows-[0fr] opacity-0',
        )}
      >
        <div className="overflow-hidden">
          {cluster.hub_page_url && (
            <div className="text-sm">
              <a
                href={cluster.hub_page_url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline break-all"
              >
                {cluster.hub_page_url}
              </a>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default memo(ClusterCard);