import { useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { api } from '../api.js'
import { useAuth } from '../context/AuthContext.jsx'

function todayLocal() {
  const now = new Date()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `${now.getFullYear()}-${month}-${day}`
}

export default function JournalSpacePage() {
  const { spaceId } = useParams()
  const navigate = useNavigate()
  const { session } = useAuth()
  const [space, setSpace] = useState(null)
  const [days, setDays] = useState([])
  const [date, setDate] = useState(todayLocal())
  const [error, setError] = useState('')

  useEffect(() => {
    api(`/api/journal/spaces/${spaceId}`, { token: session.token })
      .then((data) => {
        setSpace(data.space)
        setDays(data.days || [])
      })
      .catch((err) => setError(err.message))
  }, [session.token, spaceId])

  const openDay = async (calendarDate) => {
    setError('')
    try {
      const payload = await api(`/api/journal/spaces/${spaceId}/days`, {
        token: session.token,
        method: 'POST',
        body: { calendar_date: calendarDate }
      })
      navigate(`/journal/${spaceId}/${payload.day.id}`)
    } catch (err) {
      setError(err.message)
    }
  }

  return (
    <section className="card">
      <p className="muted"><Link to="/journal">Alle Spaces</Link></p>
      <h1>{space?.title || 'Space'}</h1>
      <p className="lede">Tage chronologisch. Der Kalendertag ist nicht die Dialogzeit.</p>
      {error && <p className="error">{error}</p>}
      <form
        className="stack"
        onSubmit={(event) => {
          event.preventDefault()
          openDay(date)
        }}
      >
        <label>
          Tag öffnen
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} required />
        </label>
        <button type="submit">Tag öffnen</button>
      </form>
      <ul className="stack">
        {days.map((item) => (
          <li key={item.id} className="row-item">
            <Link to={`/journal/${spaceId}/${item.id}`}>
              {item.calendar_date}
              {item.entry_title ? ` · ${item.entry_title}` : ''}
              {item.entry_count > 1 ? ` (${item.entry_count})` : ''}
            </Link>
          </li>
        ))}
      </ul>
    </section>
  )
}