/**
 * RoleTable — Tanstack-table bulk editor for roles.
 *
 * Columns:
 *   - checkbox          (multi-select)
 *   - icon              (click to open IconPicker — deferred; currently read-only)
 *   - name              (inline editable via double-click)
 *   - role_id           (monospace, immutable)
 *   - reports_to        (dropdown)
 *   - tools             (count, clickable to open popover)
 *   - agent             (select)
 *   - employees         (count)
 *   - actions           (⋯ menu: Delete)
 *
 * Row click → selects the row in StructureEditor (opens Inspector).
 * Multi-select → bulk-edit bar at top ("Change agent for N roles", etc.)
 */
import { useMemo, useState, type ChangeEvent } from 'react'
import {
  useReactTable, getCoreRowModel, getSortedRowModel, flexRender,
  type ColumnDef, type SortingState,
} from '@tanstack/react-table'
import type { OrgRole, OrgEmployee } from '../types/visual'
import { resolveRoleIcon } from './roleIcons'

const EXTERNAL_AGENTS = ['codex', 'cursor', 'claude_code', 'opencode'] as const

interface RoleTableProps {
  roles: OrgRole[]
  employees: OrgEmployee[]
  selectedIds: string[]
  onSelectRow: (id: string) => void
  onUpdateRole: (roleId: string, updates: {
    name?: string
    reports_to?: string
    preferred_external_agent?: string | null
  }) => void
  onDeleteRole: (roleId: string) => void
  readOnly?: boolean
}

interface TableRow {
  role_id: string
  name: string
  icon: string | null
  reports_to: string
  toolCount: number
  agent: string | null
  employeeCount: number
}

/* ── RoleTable ───────────────────────────────────────────────── */

export function RoleTable({
  roles, employees, selectedIds, onSelectRow,
  onUpdateRole, onDeleteRole, readOnly,
}: RoleTableProps) {
  const [sorting, setSorting] = useState<SortingState>([])
  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({})
  const [editingCell, setEditingCell] = useState<{ rowId: string; col: 'name' } | null>(null)
  const [nameBuffer, setNameBuffer] = useState('')

  const data: TableRow[] = useMemo(() => {
    const countByRole = new Map<string, number>()
    for (const e of employees) {
      const roleIds = e.role_ids?.length ? e.role_ids : [e.role_id]
      for (const roleId of roleIds) {
        if (roleId) countByRole.set(roleId, (countByRole.get(roleId) ?? 0) + 1)
      }
    }
    return roles.map(r => ({
      role_id: r.role_id,
      name: r.name,
      icon: r.icon ?? null,
      reports_to: r.reports_to,
      toolCount: r.tools?.length ?? 0,
      agent: r.preferred_external_agent ?? null,
      employeeCount: countByRole.get(r.role_id) ?? 0,
    }))
  }, [roles, employees])

  const reportsToOptions = useMemo(
    () => [{ id: 'owner', name: 'Owner' }, ...roles.map(r => ({ id: r.role_id, name: r.name }))],
    [roles],
  )

  const commitName = (rowId: string) => {
    const trimmed = nameBuffer.trim()
    if (trimmed && trimmed !== roles.find(r => r.role_id === rowId)?.name) {
      onUpdateRole(rowId, { name: trimmed })
    }
    setEditingCell(null)
    setNameBuffer('')
  }

  const columns: ColumnDef<TableRow>[] = useMemo(() => [
    {
      id: 'select',
      header: ({ table }) => (
        <input
          type="checkbox"
          checked={table.getIsAllRowsSelected()}
          ref={el => { if (el) el.indeterminate = table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected() }}
          onChange={table.getToggleAllRowsSelectedHandler()}
          disabled={readOnly}
          aria-label="Select all"
        />
      ),
      cell: ({ row }) => (
        <input
          type="checkbox"
          checked={row.getIsSelected()}
          onChange={row.getToggleSelectedHandler()}
          disabled={readOnly}
          aria-label={`Select ${row.original.role_id}`}
          onClick={e => e.stopPropagation()}
        />
      ),
      size: 32,
      enableSorting: false,
    },
    {
      id: 'icon',
      header: '',
      cell: ({ row }) => (
        <img src={resolveRoleIcon(row.original.icon)} alt="" className="rt-cell-icon" />
      ),
      size: 32,
      enableSorting: false,
    },
    {
      id: 'name',
      header: 'Name',
      accessorKey: 'name',
      cell: ({ row }) => {
        const r = row.original
        const isEditing = editingCell?.rowId === r.role_id && editingCell.col === 'name'
        if (isEditing) {
          return (
            <input
              autoFocus
              className="rt-inline-input"
              value={nameBuffer}
              onChange={e => setNameBuffer(e.target.value)}
              onBlur={() => commitName(r.role_id)}
              onKeyDown={e => {
                if (e.key === 'Enter') commitName(r.role_id)
                else if (e.key === 'Escape') { setEditingCell(null); setNameBuffer('') }
              }}
              onClick={e => e.stopPropagation()}
            />
          )
        }
        return (
          <span
            className="rt-cell-name"
            onDoubleClick={e => {
              if (readOnly) return
              e.stopPropagation()
              setNameBuffer(r.name)
              setEditingCell({ rowId: r.role_id, col: 'name' })
            }}
            title="Double-click to edit"
          >
            {r.name}
          </span>
        )
      },
    },
    {
      id: 'role_id',
      header: 'ID',
      accessorKey: 'role_id',
      cell: ({ row }) => <code className="rt-cell-id">{row.original.role_id}</code>,
    },
    {
      id: 'reports_to',
      header: 'Reports to',
      accessorKey: 'reports_to',
      cell: ({ row }) => {
        const r = row.original
        return (
          <select
            className="rt-cell-select"
            value={r.reports_to}
            onChange={(e: ChangeEvent<HTMLSelectElement>) => onUpdateRole(r.role_id, { reports_to: e.target.value })}
            disabled={readOnly}
            onClick={e => e.stopPropagation()}
          >
            {reportsToOptions.filter(o => o.id !== r.role_id).map(o => (
              <option key={o.id} value={o.id}>{o.name}</option>
            ))}
          </select>
        )
      },
    },
    {
      id: 'toolCount',
      header: 'Tools',
      accessorKey: 'toolCount',
      cell: ({ row }) => (
        <span className="rt-cell-count">{row.original.toolCount}</span>
      ),
      size: 64,
    },
    {
      id: 'agent',
      header: 'Agent',
      accessorKey: 'agent',
      cell: ({ row }) => {
        const r = row.original
        return (
          <select
            className="rt-cell-select"
            value={r.agent ?? ''}
            onChange={(e: ChangeEvent<HTMLSelectElement>) => onUpdateRole(r.role_id, { preferred_external_agent: e.target.value || null })}
            disabled={readOnly}
            onClick={e => e.stopPropagation()}
          >
            <option value="">(auto)</option>
            {EXTERNAL_AGENTS.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
        )
      },
    },
    {
      id: 'employeeCount',
      header: 'People',
      accessorKey: 'employeeCount',
      cell: ({ row }) => <span className="rt-cell-count">{row.original.employeeCount}</span>,
      size: 64,
    },
    {
      id: 'actions',
      header: '',
      cell: ({ row }) => (
        <button
          className="rt-cell-action"
          onClick={e => {
            e.stopPropagation()
            if (readOnly) return
            if (confirm(`Delete role "${row.original.name}"?`)) onDeleteRole(row.original.role_id)
          }}
          disabled={readOnly}
          title="Delete"
        >✕</button>
      ),
      size: 40,
      enableSorting: false,
    },
  ], [editingCell, nameBuffer, readOnly, reportsToOptions, onUpdateRole, onDeleteRole])

  const table = useReactTable({
    data,
    columns,
    state: { sorting, rowSelection },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
    enableRowSelection: true,
    getRowId: (row) => row.role_id,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })

  const selectedCount = Object.values(rowSelection).filter(Boolean).length
  const selectedRoleIds = Object.keys(rowSelection).filter(id => rowSelection[id])

  /* ── Bulk actions ────────────────────────────────────────── */
  const bulkSetAgent = (agent: string | null) => {
    if (readOnly) return
    selectedRoleIds.forEach(id => onUpdateRole(id, { preferred_external_agent: agent }))
    setRowSelection({})
  }
  const bulkDelete = () => {
    if (readOnly) return
    if (!confirm(`Delete ${selectedCount} roles? This cannot be undone.`)) return
    selectedRoleIds.forEach(id => onDeleteRole(id))
    setRowSelection({})
  }

  return (
    <div className="rt-container">
      {selectedCount > 0 && !readOnly && (
        <div className="rt-bulk-bar">
          <span className="rt-bulk-count">{selectedCount} selected</span>
          <select
            className="rt-bulk-select"
            defaultValue=""
            onChange={e => { const v = e.target.value; if (v) bulkSetAgent(v === '__auto__' ? null : v) }}
          >
            <option value="" disabled>Change agent…</option>
            <option value="__auto__">(auto)</option>
            {EXTERNAL_AGENTS.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
          <button className="btn btn-danger btn-sm" onClick={bulkDelete}>Delete selected</button>
          <button className="btn btn-ghost btn-sm" onClick={() => setRowSelection({})}>Clear</button>
        </div>
      )}

      <div className="rt-table-wrap">
        <table className="rt-table">
          <thead>
            {table.getHeaderGroups().map(hg => (
              <tr key={hg.id}>
                {hg.headers.map(h => (
                  <th
                    key={h.id}
                    style={{ width: h.getSize() }}
                    className={h.column.getCanSort() ? 'rt-th-sortable' : ''}
                    onClick={h.column.getToggleSortingHandler()}
                  >
                    {flexRender(h.column.columnDef.header, h.getContext())}
                    {h.column.getIsSorted() === 'asc' && <span className="rt-sort-caret"> ▲</span>}
                    {h.column.getIsSorted() === 'desc' && <span className="rt-sort-caret"> ▼</span>}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows.length === 0 && (
              <tr><td colSpan={9} className="rt-empty">No roles. Add one via the "+ Add role" button.</td></tr>
            )}
            {table.getRowModel().rows.map(row => {
              const isSelected = selectedIds.includes(row.original.role_id)
              return (
                <tr
                  key={row.id}
                  className={`rt-row${row.getIsSelected() ? ' rt-row-checked' : ''}${isSelected ? ' rt-row-active' : ''}`}
                  onClick={() => onSelectRow(row.original.role_id)}
                >
                  {row.getVisibleCells().map(cell => (
                    <td key={cell.id} style={{ width: cell.column.getSize() }}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                  ))}
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}