import React, { useEffect, useRef } from 'react';

import { Head, Link, router } from '@inertiajs/react';


import SiteNav from '@/Components/Navigation/SiteNav';
import InertiaPagination from '@/Components/Shared/InertiaPagination';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { EmptyState } from '@/Components/ui/empty-state';
import { useSiteKeyboardShortcuts } from '@/hooks/useSiteKeyboardShortcuts';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { CANNIBALIZATION_VIEWED } from '@/lib/event-catalog';
import { cn } from '@/lib/utils';
import type { SiteBasic } from '@/types';

interface CannibalizationCase {
  id: number;
  query_cluster: string;
  competing_pages_count: number;
  lead_volatility_score: number;
  impact_score: number;
  confidence_score: number;
  primary_page_url: string | null;
  status: string;
  lifecycle_status: string;
  dismissed_at: string | null;
  created_at: string;
}

interface PaginatedCases {
  data: CannibalizationCase[];
  links: Array<{ url: string | null; label: string; active: boolean }>;
  current_page: number;
  last_page: number;
}

interface Props {
  site: SiteBasic;
  cannibalizationRun: { id: number; status: string; completed_at: string | null } | null;
  cases: PaginatedCases | CannibalizationCase[];
  filters: { status: string | null; min_impact: string | null };
  counts: {
    total: number;
    open: number;
    closed: number;
    dismissed: number;
    high_impact: number;
  };
  pagination?: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
  };
}

interface FilterPillProps {
  label: string;
  active: boolean;
  href: string;
}

const FilterPill = React.forwardRef<HTMLAnchorElement, FilterPillProps>(
  ({ label, active, href }, ref) => {
    return (
      <Link
        ref={ref}
        href={href}
        className={cn(
          'inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
          active
            ? 'bg-primary text-primary-foreground'
            : 'bg-muted text-muted-foreground hover:bg-muted/80',
        )}
      >
        {label}
      </Link>
    );
  },
);
FilterPill.displayName = 'FilterPill';

const StatusFilter = React.forwardRef<
  HTMLAnchorElement,
  {
    counts: { total: number; open: number; closed: number; dismissed: number };
    currentFilter: string | null;
    siteId: number;
  }
>(({ counts, currentFilter, siteId }, ref) => {
  const baseUrl = route('cannibalization.index', siteId);

  return (
    <div className="flex flex-wrap gap-2">
      <FilterPill
        ref={ref}
        label={`All (${counts.total})`}
        active={!currentFilter}
        href={baseUrl}
      />
      <FilterPill
        label={`Open (${counts.open})`}
        active={currentFilter === 'open'}
        href={`${baseUrl}?status=open`}
      />
      <FilterPill
        label={`Closed (${counts.closed})`}
        active={currentFilter === 'closed'}
        href={`${baseUrl}?status=closed`}
      />
      <FilterPill
        label={`Dismissed (${counts.dismissed})`}
        active={currentFilter === 'dismissed'}
        href={`${baseUrl}?status=dismissed`}
      />
    </div>
  );
});
StatusFilter.displayName = 'StatusFilter';

function ImpactBadge({ score }: { score: number }) {
  const variant = score >= 70 ? 'destructive' : score >= 40 ? 'default' : ('secondary' as const);
  const label = score >= 70 ? 'High' : score >= 40 ? 'Medium' : 'Low';

  return <Badge variant={variant}>{label}</Badge>;
}

function getSuggestedAction(impactScore: number): {
  text: string;
  severity: 'high' | 'medium' | 'low';
} {
  if (impactScore > 0.7) {
    return {
      text: 'Consider 301 redirect or content consolidation',
      severity: 'high',
    };
  } else if (impactScore >= 0.4) {
    return {
      text: 'Add canonical tag or differentiate content intent',
      severity: 'medium',
    };
  } else {
    return {
      text: 'Monitor — may resolve naturally with content updates',
      severity: 'low',
    };
  }
}

function VolatilityBadge({ score }: { score: number }) {
  if (score >= 0.7) {
    return <Badge variant="destructive">High Volatility</Badge>;
  }
  if (score >= 0.4) {
    return <Badge variant="default">Medium Volatility</Badge>;
  }
  return <Badge variant="secondary">Low Volatility</Badge>;
}

function CaseCard({ case: caseData, siteId }: { case: CannibalizationCase; siteId: number }) {
  const suggestedAction = getSuggestedAction(caseData.impact_score);

  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0">
            <CardTitle className="text-lg wrap-break-word">{caseData.query_cluster}</CardTitle>
            <CardDescription className="mt-1">
              {caseData.competing_pages_count} competing page
              {caseData.competing_pages_count !== 1 ? 's' : ''}
            </CardDescription>
          </div>
          <div className="flex flex-col gap-2 items-end shrink-0">
            <ImpactBadge score={caseData.impact_score} />
            <VolatilityBadge score={caseData.lead_volatility_score} />
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-3">
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <div className="text-muted-foreground">Impact Score</div>
              <div className="font-semibold">{caseData.impact_score.toFixed(1)}</div>
            </div>
            <div>
              <div className="text-muted-foreground">Confidence</div>
              <div className="font-semibold">{caseData.confidence_score.toFixed(1)}</div>
            </div>
          </div>

          {caseData.primary_page_url && (
            <div className="text-sm">
              <div className="text-muted-foreground mb-1">Primary Page</div>
              <div className="truncate text-xs bg-muted px-2 py-1 rounded">
                {caseData.primary_page_url}
              </div>
            </div>
          )}

          <div className="rounded-md bg-muted/50 p-3 border border-muted-foreground/20">
            <div className="text-xs text-muted-foreground font-medium mb-1">Suggested Action</div>
            <p
              className={cn(
                'text-sm font-medium',
                suggestedAction.severity === 'high' && 'text-destructive',
                suggestedAction.severity === 'medium' && 'text-amber-600 dark:text-amber-400',
                suggestedAction.severity === 'low' && 'text-muted-foreground',
              )}
            >
              {suggestedAction.text}
            </p>
          </div>

          <div className="flex items-center justify-between pt-2 border-t">
            <div className="text-xs text-muted-foreground">
              Status: <span className="font-medium">{caseData.status}</span>
            </div>
            <Button asChild size="sm" variant="outline">
              <Link href={route('cannibalization.show', [siteId, caseData.id])}>View Details</Link>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export default function CannibalizationIndex({
  site,
  cannibalizationRun,
  cases,
  filters,
  counts,
  pagination,
}: Props) {
  useEffect(() => {
    trackProductEvent(CANNIBALIZATION_VIEWED, { site_id: String(site.id) });
  }, [site.id]);

  // Normalize cases data structure
  const casesData = Array.isArray(cases) ? cases : cases.data;
  const casesLinks = Array.isArray(cases) ? [] : cases.links;
  const currentPage = pagination?.current_page || (Array.isArray(cases) ? 1 : cases.current_page);
  const lastPage = pagination?.last_page || (Array.isArray(cases) ? 1 : cases.last_page);

  const firstFilterRef = useRef<HTMLAnchorElement>(null);

  // Keyboard shortcuts
  useSiteKeyboardShortcuts({
    onSearch: () => firstFilterRef.current?.focus(),
    onNextPage:
      currentPage < lastPage
        ? () => {
            const params = new URLSearchParams();
            if (filters.status) params.set('status', filters.status);
            if (filters.min_impact) params.set('min_impact', filters.min_impact);
            params.set('page', String(currentPage + 1));
            router.visit(`${route('cannibalization.index', site.id)}?${params.toString()}`);
          }
        : undefined,
    onPrevPage:
      currentPage > 1
        ? () => {
            const params = new URLSearchParams();
            if (filters.status) params.set('status', filters.status);
            if (filters.min_impact) params.set('min_impact', filters.min_impact);
            params.set('page', String(currentPage - 1));
            router.visit(`${route('cannibalization.index', site.id)}?${params.toString()}`);
          }
        : undefined,
  });

  return (
    <>
      <Head title={`${site.name} - Cannibalization Cases`} />

      <div className="container py-6">
        <SiteNav
          siteId={site.id}
          canAnalyze
          canRecommend
          canCannibalization
          canOpportunityMap
          canGeographic
          canDevice
        />

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
          <h1 className="text-2xl font-bold tracking-tight">Cannibalization Cases</h1>
        </div>

        {!cannibalizationRun && (
          <EmptyState
            title="No cannibalization analysis"
            description="Run a cannibalization detection to identify competing pages."
            action={
              <Button asChild>
                <Link href={route('analyze.index', site.id)}>Go to Analysis</Link>
              </Button>
            }
          />
        )}

        {cannibalizationRun && counts.total === 0 && (
          <EmptyState
            title="No cannibalization cases found"
            description="Great news! No competing pages were detected for the same queries. Your site structure looks good."
            action={
              <Button variant="outline" asChild>
                <Link href={route('analyze.index', site.id)}>Run Analysis Again</Link>
              </Button>
            }
          />
        )}

        {cannibalizationRun && counts.total > 0 && (
          <>
            <StatusFilter
              ref={firstFilterRef}
              counts={counts}
              currentFilter={filters.status}
              siteId={site.id}
            />

            <div className="mt-4 space-y-4">
              {casesData.map((caseData) => (
                <CaseCard key={caseData.id} case={caseData} siteId={site.id} />
              ))}
            </div>

            {casesLinks.length > 0 && (
              <InertiaPagination links={casesLinks} currentPage={currentPage} lastPage={lastPage} />
            )}
          </>
        )}
      </div>
    </>
  );
}

CannibalizationIndex.layout = (page: React.ReactNode) => <DashboardLayout>{page}</DashboardLayout>;