'use client'

import { useState, useMemo, useEffect } from 'react'
import type { PRSummary } from '@/lib/types'
import { ArrowUpDown, ExternalLink, Clock, ChevronLeft, ChevronRight } from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'
import { Input, Select, StatusBadge, FailureTypeBadge } from './ui'
import { useTableData } from '@/lib/hooks'
import { getRepoName, formatFixTime } from '@/lib/utils'
import { CLASSES } from '@/lib/constants'

interface OverviewTableProps {
  prSummaries: PRSummary[]
}

type SortField = 'timestamp' | 'repo' | 'status' | 'failure_type' | 'fix_time_hours'

export default function OverviewTable({ prSummaries }: OverviewTableProps) {
  // Filter to bot fix entries only
  const botFixesOnly = prSummaries.filter(pr => pr.type === 'bot_fix')

  const {
    data: processedData,
    sortField,
    sortDirection,
    searchQuery,
    filters,
    filterOptions,
    handleSort,
    setSearchQuery,
    setFilter,
    totalCount,
    filteredCount,
  } = useTableData<PRSummary>(botFixesOnly, {
    initialSortField: 'timestamp',
    initialSortDirection: 'desc',
    searchFields: ['repo', 'title', 'author'],
    filterFields: ['status', 'failure_type'],
  })

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  // Calculate paginated data
  const { paginatedData, totalPages } = useMemo(() => {
    const startIndex = (currentPage - 1) * pageSize
    const endIndex = startIndex + pageSize
    const paginated = processedData.slice(startIndex, endIndex)

    return {
      paginatedData: paginated,
      totalPages: Math.ceil(processedData.length / pageSize),
    }
  }, [processedData, currentPage, pageSize])

  // Reset to page 1 when filters or search change
  useEffect(() => {
    setCurrentPage(1)
  }, [searchQuery, filters, sortField, sortDirection, pageSize])

  const SortIcon = ({ field }: { field: SortField }) => {
    if (sortField !== field) {
      return <ArrowUpDown className="w-4 h-4 opacity-30" />
    }
    return (
      <ArrowUpDown
        className={`w-4 h-4 ${sortDirection === 'desc' ? 'rotate-180' : ''} transition-transform`}
      />
    )
  }

  return (
    <div className="space-y-4">
      {/* Filters */}
      <div className="flex flex-wrap gap-4 items-end">
        <Input
          type="text"
          placeholder="Search repo, title, or author..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          showSearchIcon={true}
        />

        <div className="flex flex-col gap-1.5 min-w-[180px]">
          <label className="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide px-1">
            Status
          </label>
          <Select
            value={filters['status'] || 'all'}
            onChange={(e) => setFilter('status', e.target.value)}
            className="w-full"
          >
            <option value="all">All Statuses</option>
            {(filterOptions['status'] as string[] | undefined)?.map((status) => (
              <option key={status} value={status}>
                {status.replace('_', ' ')}
              </option>
            ))}
          </Select>
        </div>

        <div className="flex flex-col gap-1.5 min-w-[200px]">
          <label className="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide px-1">
            Failure Type
          </label>
          <Select
            value={filters['failure_type'] || 'all'}
            onChange={(e) => setFilter('failure_type', e.target.value)}
            className="w-full"
          >
            <option value="all">All Failure Types</option>
            {(filterOptions['failure_type'] as string[] | undefined)?.map((type) => (
              <option key={type} value={type}>
                {type}
              </option>
            ))}
          </Select>
        </div>

        <div className="flex flex-col gap-1.5 min-w-[120px]">
          <label className="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide px-1">
            Per page
          </label>
          <Select
            value={pageSize.toString()}
            onChange={(e) => setPageSize(Number(e.target.value))}
            className="w-full"
          >
            <option value={10}>10</option>
            <option value={25}>25</option>
            <option value={50}>50</option>
            <option value={100}>100</option>
          </Select>
        </div>
      </div>

      {/* Results count */}
      <p className="text-sm text-gray-600 dark:text-gray-400">
        Showing {filteredCount === 0 ? 0 : (currentPage - 1) * pageSize + 1}-
        {Math.min(currentPage * pageSize, filteredCount)} of {filteredCount} PRs
        {filteredCount < totalCount && ` (filtered from ${totalCount})`}
      </p>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead className="bg-gray-50 dark:bg-gray-900/50">
            <tr>
              <th
                onClick={() => handleSort('repo')}
                className={`${CLASSES.tableHeader} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800`}
              >
                <div className="flex items-center space-x-1">
                  <span>Repository</span>
                  <SortIcon field="repo" />
                </div>
              </th>
              <th className={CLASSES.tableHeader}>
                PR
              </th>
              <th
                onClick={() => handleSort('failure_type')}
                className={`${CLASSES.tableHeader} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800`}
              >
                <div className="flex items-center space-x-1">
                  <span>Type</span>
                  <SortIcon field="failure_type" />
                </div>
              </th>
              <th
                onClick={() => handleSort('status')}
                className={`${CLASSES.tableHeader} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800`}
              >
                <div className="flex items-center space-x-1">
                  <span>Status</span>
                  <SortIcon field="status" />
                </div>
              </th>
              <th
                onClick={() => handleSort('fix_time_hours')}
                className={`${CLASSES.tableHeader} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800`}
              >
                <div className="flex items-center space-x-1">
                  <span>Fix Time</span>
                  <SortIcon field="fix_time_hours" />
                </div>
              </th>
              <th
                onClick={() => handleSort('timestamp')}
                className={`${CLASSES.tableHeader} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800`}
              >
                <div className="flex items-center space-x-1">
                  <span>Time</span>
                  <SortIcon field="timestamp" />
                </div>
              </th>
              <th className={`${CLASSES.tableHeader} text-right`}>
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            {paginatedData.length === 0 ? (
              <tr>
                <td colSpan={7} className={`${CLASSES.tableCell} py-12 text-center text-gray-500 dark:text-gray-400`}>
                  No PRs found matching your filters
                </td>
              </tr>
            ) : (
              paginatedData.map((pr) => (
                <tr
                  key={`${pr.repo}-${pr.pr_number}-${pr.timestamp}`}
                  className={CLASSES.hoverRow}
                >
                  <td className={CLASSES.tableCell}>
                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                      {getRepoName(pr.repo)}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400 truncate max-w-xs">
                      {pr.title}
                    </div>
                  </td>
                  <td className={CLASSES.tableCell}>
                    <a
                      href={pr.pr_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`text-sm ${CLASSES.link} font-mono`}
                    >
                      #{pr.pr_number}
                    </a>
                  </td>
                  <td className={CLASSES.tableCell}>
                    <FailureTypeBadge type={pr.failure_type} />
                  </td>
                  <td className={CLASSES.tableCell}>
                    <StatusBadge status={pr.status} />
                  </td>
                  <td className={`${CLASSES.tableCell} text-sm text-gray-600 dark:text-gray-400`}>
                    {pr.fix_time_hours ? (
                      <div className="flex items-center space-x-1">
                        <Clock className="w-3 h-3" />
                        <span>{formatFixTime(pr.fix_time_hours)}</span>
                      </div>
                    ) : (
                      <span className="text-gray-400 dark:text-gray-600">-</span>
                    )}
                  </td>
                  <td className={`${CLASSES.tableCell} text-sm text-gray-600 dark:text-gray-400`}>
                    {formatDistanceToNow(new Date(pr.timestamp), { addSuffix: true })}
                  </td>
                  <td className={`${CLASSES.tableCell} text-right text-sm font-medium`}>
                    <a
                      href={`/aieng-bot/pr/${encodeURIComponent(pr.repo)}/${pr.pr_number}`}
                      className={`${CLASSES.link} hover:text-blue-800 dark:hover:text-blue-300 inline-flex items-center space-x-1`}
                    >
                      <span>Details</span>
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Pagination Controls */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
          <div className="text-sm text-gray-600 dark:text-gray-400">
            Page {currentPage} of {totalPages}
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setCurrentPage(1)}
              disabled={currentPage === 1}
              className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-700 dark:text-gray-300 disabled:text-gray-400 dark:disabled:text-gray-600 rounded-md border border-gray-300 dark:border-gray-600 transition-all"
            >
              First
            </button>
            <button
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage === 1}
              className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-700 dark:text-gray-300 disabled:text-gray-400 dark:disabled:text-gray-600 rounded-md border border-gray-300 dark:border-gray-600 transition-all flex items-center gap-1"
            >
              <ChevronLeft className="w-4 h-4" />
              Previous
            </button>
            <button
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
              className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-700 dark:text-gray-300 disabled:text-gray-400 dark:disabled:text-gray-600 rounded-md border border-gray-300 dark:border-gray-600 transition-all flex items-center gap-1"
            >
              Next
              <ChevronRight className="w-4 h-4" />
            </button>
            <button
              onClick={() => setCurrentPage(totalPages)}
              disabled={currentPage === totalPages}
              className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-gray-700 dark:text-gray-300 disabled:text-gray-400 dark:disabled:text-gray-600 rounded-md border border-gray-300 dark:border-gray-600 transition-all"
            >
              Last
            </button>
          </div>

          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
            <span>Jump to:</span>
            <input
              type="number"
              min={1}
              max={totalPages}
              value={currentPage}
              onChange={(e) => {
                const page = Number(e.target.value)
                if (page >= 1 && page <= totalPages) {
                  setCurrentPage(page)
                }
              }}
              className="w-16 px-2 py-1 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-vector-violet"
            />
          </div>
        </div>
      )}
    </div>
  )
}
