import { useState } from 'react'
import { format, addDays, startOfWeek } from 'date-fns'

export default function PlanboardPage() {
  const [currentWeek, setCurrentWeek] = useState(startOfWeek(new Date(), { weekStartsOn: 1 }))

  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(currentWeek, i))

  const navigateWeek = (direction) => {
    setCurrentWeek(prev => addDays(prev, direction * 7))
  }

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Planboard</h2>
      </header>

      <div className="planboard-nav text-center mb-2">
        <button className="btn btn-dark" onClick={() => navigateWeek(-1)}>← Previous Week</button>
        <span className="mx-2">
          {format(currentWeek, 'dd.MM.yyyy')} - {format(addDays(currentWeek, 6), 'dd.MM.yyyy')}
        </span>
        <button className="btn btn-dark" onClick={() => navigateWeek(1)}>Next Week →</button>
      </div>

      <div className="planboard-grid">
        {weekDays.map(day => (
          <div key={day.toISOString()} className="planboard-day">
            <div className="day-header">
              <strong>{format(day, 'EEEE')}</strong>
              <span>{format(day, 'dd.MM')}</span>
            </div>
            <div className="day-content">
              <p className="text-grey text-small">No tasks scheduled</p>
            </div>
          </div>
        ))}
      </div>

      <div className="text-center mt-4 text-grey">
        <p>Drag and drop tickets to schedule them on the planboard.</p>
      </div>
    </div>
  )
}
