import { useEffect, useState } from 'react'

interface BatchSummary {
  stage: string
  count: number
}

export default function Dashboard() {
  const [summary, setSummary] = useState<BatchSummary[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/batches')
      .then(res => res.json())
      .then(batches => {
        const counts: Record<string, number> = {}
        batches.forEach((b: { stage: string }) => {
          counts[b.stage] = (counts[b.stage] || 0) + 1
        })
        setSummary(
          Object.entries(counts).map(([stage, count]) => ({ stage, count }))
        )
        setLoading(false)
      })
      .catch(() => setLoading(false))
  }, [])

  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1>Sahel Noix -- Production Dashboard</h1>

      <h2>Batches by Processing Stage</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
          {summary.map(({ stage, count }) => (
            <div key={stage} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem', textAlign: 'center' }}>
              <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>{count}</div>
              <div style={{ textTransform: 'capitalize', color: '#666' }}>{stage}</div>
            </div>
          ))}
        </div>
      )}

      <h2 style={{ marginTop: '2rem' }}>Today&apos;s Schedule</h2>
      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
        <thead>
          <tr>
            <th style={{ border: '1px solid #ddd', padding: '0.5rem', textAlign: 'left' }}>Time</th>
            <th style={{ border: '1px solid #ddd', padding: '0.5rem', textAlign: 'left' }}>Activity</th>
          </tr>
        </thead>
        <tbody>
          <tr><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>06:00 - 08:00</td><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>Raw cashew reception</td></tr>
          <tr><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>08:00 - 12:00</td><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>Shelling and grading</td></tr>
          <tr><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>12:00 - 13:00</td><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>Break</td></tr>
          <tr><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>13:00 - 17:00</td><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>Roasting and packaging</td></tr>
          <tr><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>17:00 - 19:00</td><td style={{ border: '1px solid #ddd', padding: '0.5rem' }}>Quality checks</td></tr>
        </tbody>
      </table>
    </div>
  )
}