'use client'

import { useState } from 'react'

export interface DisplayRow {
  key: string
  submissionNum: number
  isFirstInGroup: boolean
  date: string
  code: string
  prompt: string
  rendered: string | null
  zone: string
  sector: string
}

export function ResponsesTable({ rows }: { rows: DisplayRow[] }) {
  const [expanded, setExpanded] = useState<Set<number>>(new Set())

  function toggle(submissionNum: number) {
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(submissionNum)) next.delete(submissionNum)
      else next.add(submissionNum)
      return next
    })
  }

  return (
    <table className="admin-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Fecha</th>
          <th>Código</th>
          <th>Pregunta</th>
          <th>Valor</th>
          <th className="admin-col-optional">Departamento</th>
          <th className="admin-col-optional">Sector</th>
        </tr>
      </thead>
      <tbody>
        {rows
          .filter((row) => row.isFirstInGroup || expanded.has(row.submissionNum))
          .map((row) => {
            const groupClass =
              row.submissionNum % 2 === 0 ? 'admin-group-even' : 'admin-group-odd'
            const isExpanded = expanded.has(row.submissionNum)
            const trClass = row.isFirstInGroup
              ? `${groupClass} admin-group-start admin-row-toggle`
              : groupClass

            return (
              <tr
                key={row.key}
                className={trClass}
                onClick={row.isFirstInGroup ? () => toggle(row.submissionNum) : undefined}
                onKeyDown={
                  row.isFirstInGroup
                    ? (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault()
                          toggle(row.submissionNum)
                        }
                      }
                    : undefined
                }
                role={row.isFirstInGroup ? 'button' : undefined}
                tabIndex={row.isFirstInGroup ? 0 : undefined}
                aria-expanded={row.isFirstInGroup ? isExpanded : undefined}
              >
                <td>
                  {row.isFirstInGroup && (
                    <span className="admin-toggle-icon" aria-hidden="true">
                      {isExpanded ? '▼' : '▶'}
                    </span>
                  )}
                  {row.submissionNum}
                </td>
                <td>{row.date}</td>
                <td>{row.code}</td>
                <td className="admin-prompt">{row.prompt}</td>
                <td>
                  {row.rendered === null ? (
                    <span className="admin-nodata">sin dato</span>
                  ) : (
                    row.rendered
                  )}
                </td>
                <td className="admin-col-optional">{row.zone}</td>
                <td className="admin-col-optional">{row.sector}</td>
              </tr>
            )
          })}
      </tbody>
    </table>
  )
}