'use client';

import { useState, useMemo, Fragment } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  getExpandedRowModel,
  ColumnDef,
  flexRender,
  SortingState,
  Row,
} from '@tanstack/react-table';
import {
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  ChevronRight as ChevronRightIcon,
  FileText,
} from 'lucide-react';
import type { SpanItem, PaginatedSpans } from '../types';
import { VALENCE_LABELS, VALENCE_COLORS, INTENSITY_LABELS, DOMAIN_LABELS } from '../types';
import { ReviewModal } from './ReviewModal';

interface SpansTableProps {
  spans: PaginatedSpans;
  onPageChange?: (page: number) => void;
}

/**
 * Spans table with expandable rows and drill-down to full review.
 */
export function SpansTable({ spans, onPageChange }: SpansTableProps) {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
  const [selectedReview, setSelectedReview] = useState<{
    reviewId: string;
    spanId: string;
  } | null>(null);

  const columns = useMemo<ColumnDef<SpanItem>[]>(
    () => [
      {
        id: 'expander',
        header: '',
        cell: ({ row }) => (
          <button
            onClick={() => row.toggleExpanded()}
            className="p-1 hover:bg-gray-100 rounded transition-colors"
          >
            {row.getIsExpanded() ? (
              <ChevronDown className="w-4 h-4 text-gray-500" />
            ) : (
              <ChevronRightIcon className="w-4 h-4 text-gray-500" />
            )}
          </button>
        ),
      },
      {
        accessorKey: 'span_text',
        header: 'Text',
        cell: ({ row }) => (
          <div className="max-w-md">
            <p className="text-sm text-gray-800 line-clamp-2">
              {row.original.span_text}
            </p>
          </div>
        ),
      },
      {
        accessorKey: 'urt_primary',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            URT Code
            {column.getIsSorted() === 'asc' ? (
              <ArrowUp className="w-4 h-4" />
            ) : column.getIsSorted() === 'desc' ? (
              <ArrowDown className="w-4 h-4" />
            ) : (
              <ArrowUpDown className="w-4 h-4 opacity-50" />
            )}
          </button>
        ),
        cell: ({ row }) => (
          <span className="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-mono font-bold rounded border border-purple-300">
            {row.original.urt_primary || '-'}
          </span>
        ),
      },
      {
        accessorKey: 'valence',
        header: 'Sentiment',
        cell: ({ row }) => {
          const valence = row.original.valence;
          if (!valence) return <span className="text-gray-400">-</span>;
          return (
            <span
              className="px-2 py-1 text-xs font-bold rounded"
              style={{
                backgroundColor: `${VALENCE_COLORS[valence]}20`,
                color: VALENCE_COLORS[valence],
              }}
            >
              {VALENCE_LABELS[valence] || valence}
            </span>
          );
        },
      },
      {
        accessorKey: 'intensity',
        header: 'Intensity',
        cell: ({ row }) => (
          <span className="text-sm text-gray-600">
            {row.original.intensity
              ? INTENSITY_LABELS[row.original.intensity] || row.original.intensity
              : '-'}
          </span>
        ),
      },
      {
        accessorKey: 'review_time',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Date
            {column.getIsSorted() === 'asc' ? (
              <ArrowUp className="w-4 h-4" />
            ) : column.getIsSorted() === 'desc' ? (
              <ArrowDown className="w-4 h-4" />
            ) : (
              <ArrowUpDown className="w-4 h-4 opacity-50" />
            )}
          </button>
        ),
        cell: ({ row }) => (
          <span className="text-sm text-gray-600">
            {row.original.review_time
              ? new Date(row.original.review_time).toLocaleDateString()
              : '-'}
          </span>
        ),
      },
    ],
    []
  );

  const table = useReactTable({
    data: spans.items,
    columns,
    state: {
      sorting,
      expanded,
    },
    onSortingChange: setSorting,
    onExpandedChange: setExpanded as any,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getRowCanExpand: () => true,
    initialState: {
      pagination: { pageSize: 10 },
    },
  });

  const totalPages = Math.ceil(spans.total / spans.page_size);

  // Render expanded row content
  const renderExpandedRow = (row: Row<SpanItem>) => {
    const span = row.original;
    return (
      <tr>
        <td colSpan={columns.length} className="bg-gray-50 p-4">
          <div className="space-y-3">
            <div>
              <span className="text-sm font-semibold text-gray-700">Full Text</span>
              <p className="text-sm text-gray-800 mt-1 whitespace-pre-wrap">
                {span.span_text}
              </p>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
              <div>
                <span className="font-semibold text-gray-700">Span ID</span>
                <p className="text-gray-600 font-mono text-xs">{span.span_id}</p>
              </div>
              <div>
                <span className="font-semibold text-gray-700">Review ID</span>
                <p className="text-gray-600 font-mono text-xs">
                  {span.source_review_id || '-'}
                </p>
              </div>
              <div>
                <span className="font-semibold text-gray-700">Entity</span>
                <p className="text-gray-600">{span.entity || '-'}</p>
              </div>
              <div>
                <span className="font-semibold text-gray-700">Domain</span>
                <p className="text-gray-600">
                  {span.urt_primary
                    ? DOMAIN_LABELS[span.urt_primary[0]] || span.urt_primary[0]
                    : '-'}
                </p>
              </div>
            </div>
            {/* View Full Review Button */}
            {span.source_review_id && (
              <div className="pt-2">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setSelectedReview({
                      reviewId: span.source_review_id!,
                      spanId: span.span_id,
                    });
                  }}
                  className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-colors"
                >
                  <FileText className="w-4 h-4" />
                  View Full Review
                </button>
              </div>
            )}
          </div>
        </td>
      </tr>
    );
  };

  return (
    <div className="bg-white rounded-xl p-6 shadow-md border-2 border-gray-300">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-xl font-bold text-gray-900">Classified Spans</h3>
          <p className="text-sm text-gray-500">
            {spans.total} total spans - Click row to expand
          </p>
        </div>
      </div>

      {spans.items.length === 0 ? (
        <div className="flex items-center justify-center h-32 text-gray-500">
          No spans found
        </div>
      ) : (
        <>
          <div className="overflow-x-auto border-2 border-gray-200 rounded-lg">
            <table className="w-full">
              <thead className="bg-gray-50 border-b-2 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-gray-900"
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext()
                            )}
                      </th>
                    ))}
                  </tr>
                ))}
              </thead>
              <tbody className="divide-y divide-gray-200">
                {table.getRowModel().rows.map((row) => (
                  <Fragment key={row.id}>
                    <tr
                      className="hover:bg-blue-50 cursor-pointer transition-colors"
                      onClick={() => row.toggleExpanded()}
                    >
                      {row.getVisibleCells().map((cell) => (
                        <td key={cell.id} className="px-4 py-3">
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                          )}
                        </td>
                      ))}
                    </tr>
                    {row.getIsExpanded() && renderExpandedRow(row)}
                  </Fragment>
                ))}
              </tbody>
            </table>
          </div>

          {/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <div className="text-sm text-gray-700 font-medium">
              Page {spans.page} of {totalPages} ({spans.total} spans)
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => onPageChange?.(spans.page - 1)}
                disabled={spans.page <= 1}
                className="px-3 py-2 border-2 border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 font-semibold text-gray-900 flex items-center gap-1"
              >
                <ChevronLeft className="w-4 h-4" />
                Previous
              </button>
              <button
                onClick={() => onPageChange?.(spans.page + 1)}
                disabled={spans.page >= totalPages}
                className="px-3 py-2 border-2 border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 font-semibold text-gray-900 flex items-center gap-1"
              >
                Next
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </>
      )}

      {/* Review Modal for drill-down */}
      <ReviewModal
        reviewId={selectedReview?.reviewId ?? null}
        highlightSpanId={selectedReview?.spanId}
        onClose={() => setSelectedReview(null)}
      />
    </div>
  );
}