frontend/src/App.tsx

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

function App() {
  const [count, setCount] = useState<number>(0)
  const [csvRows, setCsvRows] = useState<string[][]>([])
  const [csvHeader, setCsvHeader] = useState<string[]>([])
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    API.fetchStaticFile('data/ravdess_1k_audio_benchmark.csv')
      .then((csvText) => {
        const rows = csvText.trim().split('\n').map(row => row.split(','))
        setCsvHeader(rows[0])
        setCsvRows(rows.slice(1))
        setLoading(false)
      })
      .catch((err) => {
        setError('Failed to fetch CSV: ' + err.message)
        setLoading(false)
      })
  }, [])

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <div className="card w-11/12 max-w-4xl bg-base-100 shadow-xl mb-8">
        <div className="card-body">
          <h2 className="card-title">Flask + React + Docker</h2>
          <p>Simple proof of concept with Flask backend serving a React frontend.</p>
          <div className="card-actions justify-center mt-4">
            <button
              className="btn btn-primary"
              onClick={() => setCount((count: number) => count + 1)}
            >
              Count is {count}
            </button>
          </div>
        </div>
      </div>
      <div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 overflow-auto">
        <h3 className="font-bold mb-2">ravdess_1k_audio_benchmark.csv</h3>
        {loading && <div>Loading...</div>}
        {error && <div className="text-red-500">{error}</div>}
        {!loading && !error && (
          <div className="overflow-x-auto">
            <table className="table table-zebra w-full text-xs">
              <thead>
                <tr>
                  {csvHeader.map((col, idx) => (
                    <th key={idx}>{col}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {csvRows.map((row, i) => (
                  <tr key={i}>
                    {row.map((cell, j) => (
                      <td key={j}>{cell}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}

export default App