import { ColumnDef } from '@tanstack/react-table';
import { AlertCircle, BarChart3, FileText, TrendingDown, TrendingUp } from 'lucide-react';


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

import HealthScoreBadge from '@/Components/HealthScore/HealthScoreBadge';
import MetricDelta from '@/Components/Shared/MetricDelta';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { DataTable } from '@/Components/ui/data-table';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { formatNumber } from '@/lib/format';

interface SiteWithStats {
  id: number;
  name: string;
  domain: string;
  traffic_change_percent: number;
  pending_recommendations: number;
  last_analysis_date: string | null;
  attention_flags: {
    declining_traffic: boolean;
    stale_analysis: boolean;
    has_pending_recommendations: boolean;
  };
  latest_clicks: number;
  latest_impressions: number;
  health_score: number | null;
  recommendations_applied_count: number;
  clicks_gained: number;
  roi_trend: 'up' | 'flat' | 'down';
  active_alerts_count: number;
}

interface SiteComparisonTableProps {
  sites: SiteWithStats[];
}

function RoiTrendBadge({
  trend,
  clicksGained,
}: {
  trend: 'up' | 'flat' | 'down';
  clicksGained: number;
}) {
  if (trend === 'up') {
    return (
      <div className="flex items-center gap-1 text-green-600 dark:text-green-400">
        <TrendingUp className="h-4 w-4" />
        <span className="text-sm font-medium">+{formatNumber(clicksGained)}</span>
      </div>
    );
  }
  if (trend === 'down') {
    return (
      <div className="flex items-center gap-1 text-red-600 dark:text-red-400">
        <TrendingDown className="h-4 w-4" />
        <span className="text-sm font-medium">{formatNumber(clicksGained)}</span>
      </div>
    );
  }
  return <span className="text-muted-foreground text-sm">—</span>;
}

export default function SiteComparisonTable({ sites }: SiteComparisonTableProps) {
  const columns: ColumnDef<SiteWithStats>[] = [
    {
      accessorKey: 'name',
      header: 'Site Name',
      cell: ({ row }) => {
        const site = row.original;
        const hasAttention =
          site.attention_flags.declining_traffic ||
          site.attention_flags.stale_analysis ||
          site.attention_flags.has_pending_recommendations;

        return (
          <div className="flex items-center gap-2">
            <div>
              <div className="font-medium">{site.name}</div>
              <div className="text-xs text-muted-foreground">{site.domain}</div>
            </div>
            {hasAttention && (
              <TooltipProvider delayDuration={0}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <AlertCircle className="h-4 w-4 text-orange-500 dark:text-orange-400 shrink-0" />
                  </TooltipTrigger>
                  <TooltipContent>
                    <div className="text-sm space-y-1">
                      {site.attention_flags.declining_traffic && <div>• Declining traffic</div>}
                      {site.attention_flags.stale_analysis && (
                        <div>• Stale analysis (&gt;30 days)</div>
                      )}
                      {site.attention_flags.has_pending_recommendations && (
                        <div>• Pending recommendations</div>
                      )}
                    </div>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: 'traffic_change_percent',
      header: 'Traffic Change',
      cell: ({ row }) => {
        const value = row.original.traffic_change_percent;
        return <MetricDelta value={value} format="percent" />;
      },
    },
    {
      accessorKey: 'health_score',
      header: 'Health Score',
      cell: ({ row }) => {
        const score = row.original.health_score;
        return <HealthScoreBadge score={score} />;
      },
    },
    {
      accessorKey: 'recommendations_applied_count',
      header: 'Applied',
      cell: ({ row }) => {
        const count = row.original.recommendations_applied_count;
        if (count === 0) {
          return <span className="text-muted-foreground">—</span>;
        }
        return <Badge variant="secondary">{count}</Badge>;
      },
    },
    {
      accessorKey: 'clicks_gained',
      header: 'ROI (Clicks)',
      cell: ({ row }) => {
        const site = row.original;
        return <RoiTrendBadge trend={site.roi_trend} clicksGained={site.clicks_gained} />;
      },
    },
    {
      accessorKey: 'pending_recommendations',
      header: 'Pending Recs',
      cell: ({ row }) => {
        const count = row.original.pending_recommendations;
        if (count === 0) {
          return <span className="text-muted-foreground">—</span>;
        }
        return <Badge variant={count > 5 ? 'destructive' : 'secondary'}>{count}</Badge>;
      },
    },
    {
      accessorKey: 'last_analysis_date',
      header: 'Last Analysis',
      cell: ({ row }) => {
        const date = row.original.last_analysis_date;
        if (!date) {
          return <span className="text-muted-foreground">Never</span>;
        }

        const parsed = new Date(date);
        const isStale = row.original.attention_flags.stale_analysis;

        return (
          <span className={isStale ? 'text-orange-600 dark:text-orange-400' : ''}>
            {parsed.toLocaleDateString()}
          </span>
        );
      },
    },
    {
      id: 'actions',
      header: 'Actions',
      cell: ({ row }) => {
        const site = row.original;
        const hasAnalysis = site.last_analysis_date !== null;

        return (
          <div className="flex items-center gap-1">
            <TooltipProvider delayDuration={0}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    aria-label="Generate client report"
                    onClick={() => router.post(route('portfolio.generate-report', site.id))}
                  >
                    <FileText className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Generate Client Report</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
            {hasAnalysis && (
              <TooltipProvider delayDuration={0}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 w-8 p-0"
                      aria-label="View analysis"
                      onClick={() => router.visit(route('analyze.index', site.id))}
                    >
                      <BarChart3 className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>View Analysis</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <DataTable
      columns={columns}
      data={sites}
      pageSize={10}
      emptyState={{
        title: 'No sites found',
        description: 'Add sites to see them in your portfolio',
      }}
    />
  );
}