import React from 'react'
import { useNavigate } from '@tanstack/react-router'
import { EmptyState, ToolDot, Spark } from '../../primitives'
import type { Project } from '../../api/adapters'

interface ProjectsTableProps {
  projects: Project[]
  cursor: number
  onCursor: (i: number) => void
  onOpen: (p: Project) => void
}

const COLS = '1fr 90px 90px 110px 110px 90px'

// Format TOK: 12400 → "12.4k"; small numbers unchanged
function formatTok(n: number): string {
  if (n >= 1000) {
    return (n / 1000).toFixed(1) + 'k'
  }
  return String(n)
}

// Format lastActive ISO string: recent = "Apr 25 11:08"; empty = "—"
function formatLastActive(iso: string): string {
  if (!iso) return '—'
  const d = new Date(iso)
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  const h24 = 24 * 60 * 60 * 1000

  if (diffMs <= h24) {
    return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
  }
  return (
    d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) +
    ' ' +
    d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
  )
}

export function ProjectsTable({ projects, cursor, onCursor, onOpen }: ProjectsTableProps): React.JSX.Element {
  const navigate = useNavigate()

  if (projects.length === 0) {
    return (
      <div className="body body-pad">
        <EmptyState glyph="∅" copy="no projects match these filters" />
      </div>
    )
  }

  function handleOpen(p: Project) {
    onOpen(p)
    // Route /project/$ is added in Phase 4; cast needed until routeTree is regenerated.
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    void (navigate as any)({ to: '/project/$', params: { _splat: encodeURIComponent(p.cwd) } })
  }

  const maxSessions = Math.max(...projects.map(p => p.sessions), 1)

  return (
    <div className="projects-table body">
      <div className="projects-thead projects-cols" style={{ gridTemplateColumns: COLS }}>
        <span>cwd</span>
        <span className="right">sessions</span>
        <span className="right">tok</span>
        <span className="right">last</span>
        <span>top tool</span>
        <span className="right">activity</span>
      </div>
      {projects.map((p, i) => {
        const isCursor = i === cursor
        // Build a minimal sparkline: normalise sessions relative to max, scaled to 0–12px height
        const sparkPoints = [0, (p.sessions / maxSessions) * 12]
        return (
          <div
            key={p.cwd}
            className={'projects-row projects-cols' + (isCursor ? ' cursor' : '')}
            style={{ gridTemplateColumns: COLS }}
            onClick={() => { onCursor(i); handleOpen(p) }}
            onMouseEnter={() => onCursor(i)}
          >
            <span className="mono truncate">{p.cwd}</span>
            <span className="right mono">{p.sessions}</span>
            <span className="right mono muted">{formatTok(p.tokensIn + p.tokensOut)}</span>
            <span className="right mono muted">{formatLastActive(p.lastActive)}</span>
            <span className="mono">
              {p.topTool ? (
                <>
                  <ToolDot tool={p.topTool} />
                  {' '}{p.topTool}
                </>
              ) : (
                <span className="muted">—</span>
              )}
            </span>
            <span className="right">
              <Spark points={sparkPoints} w={70} h={12} accent={i === 0} />
            </span>
          </div>
        )
      })}
    </div>
  )
}