import { useState } from 'react'
import { format, addDays, startOfWeek } from 'date-fns'
import { de } from 'date-fns/locale'
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
import { PageHeader, Card, Button } from '../components/ui'

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 = (dir) => setCurrentWeek((prev) => addDays(prev, dir * 7))

  return (
    <div className="page">
      <PageHeader
        title="Planboard"
        subtitle="Wochenplanung"
        actions={
          <div className="flex gap-2 items-center">
            <Button variant="ghost" onClick={() => navigateWeek(-1)}><FaChevronLeft /></Button>
            <span className="muted" style={{ minWidth: 200, textAlign: 'center' }}>
              {format(currentWeek, 'dd.MM.yyyy')} - {format(addDays(currentWeek, 6), 'dd.MM.yyyy')}
            </span>
            <Button variant="ghost" onClick={() => navigateWeek(1)}><FaChevronRight /></Button>
          </div>
        }
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12 }}>
        {weekDays.map((day) => (
          <Card key={day.toISOString()} pad={false}>
            <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column' }}>
              <strong style={{ fontSize: 13 }}>{format(day, 'EEEE', { locale: de })}</strong>
              <span className="faint" style={{ fontSize: 12 }}>{format(day, 'dd.MM')}</span>
            </div>
            <div style={{ padding: 12, minHeight: 120 }}>
              <p className="faint" style={{ fontSize: 12 }}>Keine Termine</p>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}
