import { useState, useEffect } from 'react'
import { api } from '../api'

export default function Records({ source }) {
  const [rows, setRows] = useState([])
  const [exists, setExists] = useState(null)
  const [offset, setOffset] = useState(0)
  const [loading, setLoading] = useState(false)
  const LIMIT = 100

  useEffect(() => {
    if (!source) return
    setOffset(0)
    load(0)
  }, [source])

  async function load(off) {
    setLoading(true)
    try {
      const res = await api.getViewData(source, LIMIT, off)
      setExists(res.exists)
      setRows(res.rows)
    } catch (err) {
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  function prev() { const o = Math.max(0, offset - LIMIT); setOffset(o); load(o) }
  function next() { const o = offset + LIMIT; setOffset(o); load(o) }

  if (!source) return <div className="p-6 text-sm text-gray-400">Select a source first.</div>

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-4">
        <h1 className="text-xl font-semibold text-gray-800">Records — {source}</h1>
        {exists && rows.length > 0 && (
          <span className="text-xs text-gray-400 font-mono">dfv.{source}</span>
        )}
      </div>

      {loading && <p className="text-sm text-gray-400">Loading…</p>}

      {!loading && exists === false && (
        <p className="text-sm text-gray-400">
          No view generated yet. Go to <span className="font-medium text-gray-600">Sources</span>, check fields as <span className="font-medium text-gray-600">In view</span>, then click <span className="font-medium text-gray-600">Generate view</span>.
        </p>
      )}

      {!loading && exists && rows.length === 0 && (
        <p className="text-sm text-gray-400">View exists but no transformed records yet. Import data and run a transform first.</p>
      )}

      {!loading && exists && rows.length > 0 && (
        <>
          <div className="bg-white border border-gray-200 rounded overflow-auto mb-4">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-xs text-gray-400 border-b border-gray-100 bg-gray-50">
                  {Object.keys(rows[0]).map(col => (
                    <th key={col} className="px-3 py-2 font-medium whitespace-nowrap">{col}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((row, i) => (
                  <tr key={i} className="border-t border-gray-50 hover:bg-gray-50">
                    {Object.values(row).map((val, j) => (
                      <td key={j} className="px-3 py-2 text-xs text-gray-600 whitespace-nowrap max-w-48 truncate">
                        {val === null ? <span className="text-gray-300">—</span> : String(val)}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="flex items-center gap-3 text-sm text-gray-500">
            <button onClick={prev} disabled={offset === 0}
              className="px-3 py-1 border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-40">
              ← Prev
            </button>
            <span>{offset + 1}–{offset + rows.length}</span>
            <button onClick={next} disabled={rows.length < LIMIT}
              className="px-3 py-1 border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-40">
              Next →
            </button>
          </div>
        </>
      )}
    </div>
  )
}