import {
  AlertTriangle,
  ArrowDown,
  Check,
  ChevronDown,
  Copy,
  ExternalLink,
  Info,
} from 'lucide-react';
import { toast } from 'sonner';

import { Fragment, useState } from 'react';

import MetricDelta from '@/Components/Shared/MetricDelta';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { formatNumber, formatPercentRaw } from '@/lib/format';
import { copied, couldnt } from '@/lib/messages';
import { cn } from '@/lib/utils';

interface Finding {
  id: number;
  page_url: string;
  delta_percent: number;
  recommendations_count?: number;
  supporting_data: {
    clicks_before: number;
    clicks_after: number;
    impressions_delta_pct?: number;
  };
}

interface WinnersLosersTableProps {
  winners: Finding[];
  losers: Finding[];
  siteId?: number;
}

function truncateUrl(url: string, maxLength: number): string {
  try {
    const parsed = new URL(url);
    const path = parsed.pathname + parsed.search;
    return path.length > maxLength ? path.slice(0, maxLength) + '...' : path;
  } catch {
    return url.length > maxLength ? url.slice(0, maxLength) + '...' : url;
  }
}

function getSeverityClasses(deltaPct: number, tab: 'losers' | 'winners'): string {
  const abs = Math.abs(deltaPct);
  if (abs < 20) return '';
  if (tab === 'losers') {
    return abs >= 50
      ? 'border-l-2 border-l-destructive bg-destructive/5'
      : 'border-l-2 border-l-warning bg-warning/5';
  }
  return abs >= 50
    ? 'border-l-2 border-l-success bg-success/5'
    : 'border-l-2 border-l-accent bg-accent/5';
}

function getSeverityLabel(
  deltaPct: number,
  tab: 'losers' | 'winners',
): { label: string; color: string; Icon: React.ComponentType<{ className?: string }> } {
  const abs = Math.abs(deltaPct);
  if (abs < 20) {
    return { label: 'Minor', color: 'text-muted-foreground', Icon: Info };
  }
  if (tab === 'losers') {
    return abs >= 50
      ? { label: 'Critical', color: 'text-destructive', Icon: AlertTriangle }
      : { label: 'Warning', color: 'text-warning', Icon: ArrowDown };
  }
  return { label: 'Gain', color: 'text-success', Icon: ArrowDown };
}

export default function WinnersLosersTable({ winners, losers, siteId }: WinnersLosersTableProps) {
  const [activeTab, setActiveTab] = useState<'losers' | 'winners'>('losers');
  const [copiedFindingId, setCopiedFindingId] = useState<number | null>(null);
  const [expandedRowId, setExpandedRowId] = useState<number | null>(null);
  const items = activeTab === 'losers' ? losers : winners;

  const handleCopyUrl = (url: string, findingId: number) => {
    navigator.clipboard
      .writeText(url)
      .then(() => {
        setCopiedFindingId(findingId);
        toast.success(copied('URL'));
        setTimeout(() => setCopiedFindingId(null), 2000);
      })
      .catch(() => {
        toast.error(couldnt('copy', 'URL'));
      });
  };

  const toggleRow = (findingId: number) => {
    setExpandedRowId(expandedRowId === findingId ? null : findingId);
  };

  return (
    <div className="mb-6">
      <div role="tablist" aria-label="Traffic changes" className="flex gap-2 mb-4">
        <Button
          role="tab"
          aria-selected={activeTab === 'losers'}
          aria-controls="losers-panel"
          id="losers-tab"
          variant={activeTab === 'losers' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setActiveTab('losers')}
        >
          Losers ({losers.length})
        </Button>
        <Button
          role="tab"
          aria-selected={activeTab === 'winners'}
          aria-controls="winners-panel"
          id="winners-tab"
          variant={activeTab === 'winners' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setActiveTab('winners')}
        >
          Winners ({winners.length})
        </Button>
      </div>

      {items.length === 0 ? (
        <p id={`${activeTab}-panel`} role="tabpanel" aria-labelledby={`${activeTab}-tab`} className="text-sm text-muted-foreground py-4">No {activeTab} found in this analysis.</p>
      ) : (
        <div id={`${activeTab}-panel`} role="tabpanel" aria-labelledby={`${activeTab}-tab`} className="overflow-x-auto rounded-lg border">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b bg-muted/50">
                <th scope="col" className="text-left p-3 font-medium w-8 md:hidden"></th>
                <th scope="col" className="text-left p-3 font-medium">Page</th>
                <th scope="col" className="text-right p-3 font-medium hidden md:table-cell">Clicks Before</th>
                <th scope="col" className="text-right p-3 font-medium hidden md:table-cell">Clicks After</th>
                <th scope="col" className="text-right p-3 font-medium">Change</th>
                <th scope="col" className="text-right p-3 font-medium">Impressions Change</th>
              </tr>
            </thead>
            <tbody>
              {items.map((finding) => {
                const severity = getSeverityLabel(finding.delta_percent, activeTab);
                const SeverityIcon = severity.Icon;
                const isExpanded = expandedRowId === finding.id;
                return (
                  <Fragment key={finding.id}>
                    <tr
                      className={cn(
                        'group hover:bg-muted/50 transition-colors',
                        getSeverityClasses(finding.delta_percent, activeTab),
                        isExpanded ? '' : 'border-b last:border-0',
                      )}
                      aria-label={`Page ${truncateUrl(finding.page_url, 50)} ${finding.delta_percent >= 0 ? '+' : ''}${formatPercentRaw(finding.delta_percent, 1)} — ${severity.label} severity`}
                    >
                      <td className="p-3 md:hidden">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-6 w-6 p-0"
                          onClick={() => toggleRow(finding.id)}
                          aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
                        >
                          <ChevronDown
                            className={cn(
                              'h-4 w-4 transition-transform duration-200',
                              isExpanded && 'rotate-180',
                            )}
                          />
                        </Button>
                      </td>
                      <td className="p-3">
                        <div className="flex flex-col gap-1">
                          <div className="inline-flex items-center gap-2">
                            <TooltipProvider delayDuration={300}>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <a
                                    href={finding.page_url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center gap-1 text-primary hover:underline"
                                    title={finding.page_url}
                                  >
                                    {truncateUrl(finding.page_url, 50)}
                                    <ExternalLink className="h-3 w-3 shrink-0" />
                                  </a>
                                </TooltipTrigger>
                                <TooltipContent side="bottom" className="max-w-xs break-all">
                                  {finding.page_url}
                                </TooltipContent>
                              </Tooltip>
                            </TooltipProvider>
                            <TooltipProvider delayDuration={0}>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 focus:opacity-100"
                                    onClick={() => handleCopyUrl(finding.page_url, finding.id)}
                                    aria-label="Copy URL"
                                  >
                                    {copiedFindingId === finding.id ? (
                                      <Check className="h-3 w-3 text-emerald-500" />
                                    ) : (
                                      <Copy className="h-3 w-3" />
                                    )}
                                  </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                  <p>{copiedFindingId === finding.id ? 'Copied!' : 'Copy URL'}</p>
                                </TooltipContent>
                              </Tooltip>
                            </TooltipProvider>
                          </div>
                          {activeTab === 'losers' &&
                            siteId &&
                            (finding.recommendations_count ?? 0) > 0 && (
                              <a
                                href={`${route('recommendations.index', siteId)}?page_url=${encodeURIComponent(finding.page_url)}`}
                                className="text-xs text-muted-foreground hover:text-primary hover:underline w-fit"
                              >
                                View {finding.recommendations_count} recommendation
                                {(finding.recommendations_count ?? 0) > 1 ? 's' : ''}
                              </a>
                            )}
                        </div>
                      </td>
                      <td className="text-right p-3 hidden md:table-cell">
                        {formatNumber(finding.supporting_data.clicks_before)}
                      </td>
                      <td className="text-right p-3 hidden md:table-cell">
                        {formatNumber(finding.supporting_data.clicks_after)}
                      </td>
                      <td className="text-right p-3">
                        <div className="flex items-center justify-end gap-2">
                          <MetricDelta value={finding.delta_percent} format="percent" />
                          <div className="inline-flex items-center gap-1">
                            <SeverityIcon className={cn('h-4 w-4', severity.color)} />
                            <span className={cn('text-xs font-medium', severity.color)}>
                              {severity.label}
                            </span>
                          </div>
                        </div>
                      </td>
                      <td className="text-right p-3">
                        {finding.supporting_data.impressions_delta_pct !== undefined && (
                          <MetricDelta
                            value={finding.supporting_data.impressions_delta_pct}
                            format="percent"
                          />
                        )}
                      </td>
                    </tr>
                    {isExpanded && (
                      <tr className="md:hidden border-b last:border-0">
                        <td colSpan={6} className="p-3 pt-0">
                          <Card className="shadow-none">
                            <CardContent className="p-4 space-y-2">
                              <div className="flex justify-between items-center">
                                <span className="text-sm text-muted-foreground">
                                  Clicks Before:
                                </span>
                                <span className="font-medium">
                                  {formatNumber(finding.supporting_data.clicks_before)}
                                </span>
                              </div>
                              <div className="flex justify-between items-center">
                                <span className="text-sm text-muted-foreground">Clicks After:</span>
                                <span className="font-medium">
                                  {formatNumber(finding.supporting_data.clicks_after)}
                                </span>
                              </div>
                            </CardContent>
                          </Card>
                        </td>
                      </tr>
                    )}
                  </Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}