'use client';

import React, { useState, useMemo } from 'react';
import Link from 'next/link';
import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  ColumnDef,
  flexRender,
  SortingState,
  ColumnFiltersState,
} from '@tanstack/react-table';
import { ExecutionStatus } from '@/lib/pipeline-types';
import { JobStatus } from './ScraperTest';

interface ReportsViewProps {
  executions: ExecutionStatus[];
  jobsMap: Map<string, JobStatus>;
  onRefresh?: () => void;
}

// Helper to format duration
function formatDuration(ms: number | null | undefined): string {
  if (!ms) return '-';
  if (ms < 1000) return `${ms}ms`;
  const seconds = ms / 1000;
  if (seconds < 60) return `${seconds.toFixed(1)}s`;
  const mins = Math.floor(seconds / 60);
  const secs = Math.round(seconds % 60);
  return `${mins}m ${secs}s`;
}

// Sort icon component
function SortIcon({ sorted }: { sorted: false | 'asc' | 'desc' }) {
  if (!sorted) {
    return (
      <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
      </svg>
    );
  }
  return (
    <svg className={`w-4 h-4 ${sorted === 'asc' ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
    </svg>
  );
}

// Extract business name from execution using jobs map
function extractBusinessName(execution: ExecutionStatus, jobsMap: Map<string, JobStatus>): string {
  // First try to get from the linked job
  if (execution.job_id) {
    const job = jobsMap.get(execution.job_id);
    if (job?.business_name) return job.business_name;
  }
  // Try to get from result_summary
  if (execution.result_summary) {
    const summary = execution.result_summary as Record<string, unknown>;
    if (summary.business_name) return String(summary.business_name);
  }
  // Try to get from input_summary
  if (execution.input_summary) {
    const summary = execution.input_summary as Record<string, unknown>;
    if (summary.business_name) return String(summary.business_name);
  }
  // Fallback to business_id
  if (execution.business_id) return execution.business_id;
  return 'Unknown Business';
}

// Extract review count from execution using jobs map
function extractReviewCount(execution: ExecutionStatus, jobsMap: Map<string, JobStatus>): number | null {
  // First try to get from the linked job
  if (execution.job_id) {
    const job = jobsMap.get(execution.job_id);
    if (job?.reviews_count) return job.reviews_count;
  }
  if (execution.result_summary) {
    const summary = execution.result_summary as Record<string, unknown>;
    if (typeof summary.review_count === 'number') return summary.review_count;
    if (typeof summary.reviews_processed === 'number') return summary.reviews_processed;
  }
  if (execution.input_summary) {
    const summary = execution.input_summary as Record<string, unknown>;
    if (typeof summary.review_count === 'number') return summary.review_count;
  }
  return null;
}

export default function ReportsView({ executions, jobsMap, onRefresh }: ReportsViewProps) {
  const [sorting, setSorting] = useState<SortingState>([{ id: 'created_at', desc: true }]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [globalFilter, setGlobalFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  // Filter executions by status
  const filteredExecutions = useMemo(() => {
    if (statusFilter === 'all') return executions;
    return executions.filter(e => e.status === statusFilter);
  }, [executions, statusFilter]);

  // Status counts for filter badges
  const statusCounts = useMemo(() => {
    const counts: Record<string, number> = { all: executions.length };
    executions.forEach(e => {
      counts[e.status] = (counts[e.status] || 0) + 1;
    });
    return counts;
  }, [executions]);

  // Calculate summary stats
  const stats = useMemo(() => {
    const completed = executions.filter(e => e.status === 'completed');
    const failed = executions.filter(e => e.status === 'failed');
    const running = executions.filter(e => e.status === 'running');

    const totalReviews = completed.reduce((sum, e) => {
      const count = extractReviewCount(e, jobsMap);
      return sum + (count || 0);
    }, 0);

    const avgDuration = completed.length > 0
      ? completed.reduce((sum, e) => sum + (e.total_duration_ms || 0), 0) / completed.length
      : 0;

    const successRate = executions.length > 0
      ? (completed.length / executions.length) * 100
      : 0;

    // Reports today
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const reportsToday = executions.filter(e => new Date(e.created_at || '') >= today).length;

    return {
      total: executions.length,
      completed: completed.length,
      failed: failed.length,
      running: running.length,
      totalReviews,
      avgDuration,
      successRate,
      reportsToday,
    };
  }, [executions, jobsMap]);

  const columns = useMemo<ColumnDef<ExecutionStatus>[]>(
    () => [
      {
        accessorKey: 'business',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Business
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        accessorFn: (row) => extractBusinessName(row, jobsMap),
        cell: ({ row }) => {
          const name = extractBusinessName(row.original, jobsMap);
          const reviewCount = extractReviewCount(row.original, jobsMap);
          return (
            <div className="max-w-xs">
              <div className="font-semibold text-gray-900 truncate" title={name}>
                {name}
              </div>
              {reviewCount !== null && (
                <div className="text-xs text-gray-500">
                  {reviewCount.toLocaleString()} reviews analyzed
                </div>
              )}
            </div>
          );
        },
      },
      {
        accessorKey: 'job_id',
        header: 'Job',
        cell: ({ row }) => {
          const jobId = row.original.job_id;
          if (!jobId) return <span className="text-gray-400">-</span>;
          return (
            <Link
              href={`/jobs/${jobId}`}
              className="text-blue-600 hover:text-blue-800 text-xs font-mono bg-blue-50 px-2 py-1 rounded"
              onClick={(e) => e.stopPropagation()}
            >
              {jobId.slice(0, 8)}...
            </Link>
          );
        },
      },
      {
        accessorKey: 'status',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Status
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const status = row.original.status;
          return (
            <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${
              status === 'completed' ? 'bg-green-100 text-green-800' :
              status === 'running' ? 'bg-blue-100 text-blue-800' :
              status === 'failed' ? 'bg-red-100 text-red-800' :
              status === 'cancelled' ? 'bg-gray-100 text-gray-800' :
              'bg-yellow-100 text-yellow-800'
            }`}>
              {status === 'running' && (
                <div className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
              )}
              {status.charAt(0).toUpperCase() + status.slice(1)}
            </span>
          );
        },
      },
      {
        accessorKey: 'stages_completed',
        header: 'Stages',
        cell: ({ row }) => {
          const requested = row.original.stages_requested || [];
          const completed = row.original.stages_completed || [];
          return (
            <div className="flex items-center gap-1">
              {requested.map((stage) => (
                <span
                  key={stage}
                  className={`px-1.5 py-0.5 text-xs rounded ${
                    completed.includes(stage)
                      ? 'bg-green-100 text-green-700'
                      : row.original.current_stage === stage
                        ? 'bg-blue-100 text-blue-700'
                        : 'bg-gray-100 text-gray-500'
                  }`}
                  title={stage}
                >
                  {stage.slice(0, 3)}
                </span>
              ))}
            </div>
          );
        },
      },
      {
        accessorKey: 'total_duration_ms',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Duration
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => (
          <span className="text-sm text-gray-600 font-medium">
            {formatDuration(row.original.total_duration_ms)}
          </span>
        ),
      },
      {
        accessorKey: 'created_at',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Created
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const dateStr = row.original.created_at;
          if (!dateStr) return <span className="text-gray-400">-</span>;
          const date = new Date(dateStr);
          const isToday = new Date().toDateString() === date.toDateString();
          return (
            <div>
              <div className="font-medium text-gray-900">
                {isToday ? 'Today' : date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
              </div>
              <div className="text-xs text-gray-500">
                {date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
              </div>
            </div>
          );
        },
        sortingFn: (rowA, rowB) => {
          const dateA = rowA.original.created_at ? new Date(rowA.original.created_at).getTime() : 0;
          const dateB = rowB.original.created_at ? new Date(rowB.original.created_at).getTime() : 0;
          return dateA - dateB;
        },
      },
      {
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => {
          const execution = row.original;
          const isCompleted = execution.status === 'completed';
          const hasJobId = !!execution.job_id;

          return (
            <div className="flex items-center gap-2">
              {/* View Report - only for completed with job_id */}
              {isCompleted && hasJobId && (
                <Link
                  href={`/pipelines/reviewiq/analytics?job_id=${execution.job_id}`}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs font-semibold rounded-lg transition-colors"
                  onClick={(e) => e.stopPropagation()}
                  title="View Report"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  View Report
                </Link>
              )}

              {/* Metrics button */}
              <Link
                href={`/pipelines/reviewiq/executions/${execution.id}`}
                className="inline-flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded transition-colors"
                onClick={(e) => e.stopPropagation()}
                title="View Execution Details"
              >
                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Details
              </Link>
            </div>
          );
        },
      },
    ],
    [jobsMap]
  );

  const table = useReactTable({
    data: filteredExecutions,
    columns,
    state: {
      sorting,
      columnFilters,
      globalFilter,
    },
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      pagination: {
        pageSize: 10,
      },
    },
  });

  return (
    <div className="space-y-6">
      {/* Summary Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500 mb-1">Total Reports</div>
          <div className="text-2xl font-bold text-gray-900">{stats.total}</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500 mb-1">Success Rate</div>
          <div className="text-2xl font-bold text-green-600">{stats.successRate.toFixed(0)}%</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500 mb-1">Reviews Analyzed</div>
          <div className="text-2xl font-bold text-blue-600">{stats.totalReviews.toLocaleString()}</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
          <div className="text-sm text-gray-500 mb-1">Today</div>
          <div className="text-2xl font-bold text-purple-600">{stats.reportsToday}</div>
        </div>
      </div>

      {/* Filters */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          {['all', 'completed', 'running', 'failed', 'pending'].map((status) => (
            <button
              key={status}
              onClick={() => setStatusFilter(status)}
              className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
                statusFilter === status
                  ? status === 'completed' ? 'bg-green-600 text-white' :
                    status === 'running' ? 'bg-blue-600 text-white' :
                    status === 'failed' ? 'bg-red-600 text-white' :
                    'bg-gray-800 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {status.charAt(0).toUpperCase() + status.slice(1)}
              {statusCounts[status] !== undefined && (
                <span className="ml-1.5 text-xs opacity-80">({statusCounts[status]})</span>
              )}
            </button>
          ))}
        </div>

        {onRefresh && (
          <button
            onClick={onRefresh}
            className="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh
          </button>
        )}
      </div>

      {/* Table */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              {table.getHeaderGroups().map((headerGroup) => (
                <tr key={headerGroup.id}>
                  {headerGroup.headers.map((header) => (
                    <th
                      key={header.id}
                      className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(header.column.columnDef.header, header.getContext())}
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody className="divide-y divide-gray-100">
              {table.getRowModel().rows.length === 0 ? (
                <tr>
                  <td colSpan={columns.length} className="px-4 py-12 text-center text-gray-500">
                    <div className="flex flex-col items-center gap-2">
                      <svg className="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                      <span>No reports found</span>
                      <span className="text-sm text-gray-400">Run a pipeline to generate reports</span>
                    </div>
                  </td>
                </tr>
              ) : (
                table.getRowModel().rows.map((row) => (
                  <tr
                    key={row.id}
                    className="hover:bg-gray-50 transition-colors"
                  >
                    {row.getVisibleCells().map((cell) => (
                      <td key={cell.id} className="px-4 py-3">
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </td>
                    ))}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        <div className="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
          <div className="text-sm text-gray-600">
            Showing {table.getRowModel().rows.length} of {filteredExecutions.length} reports
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
              className="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Previous
            </button>
            <span className="text-sm text-gray-600">
              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
            </span>
            <button
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
              className="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}