'use client'

import { useState } from 'react'
import { Plus, Trash2, BookOpen, Calendar } from 'lucide-react'
import { Homework } from '@/lib/companion/types'

interface HomeworkSectionProps {
  homeworkList: Homework[]
  onAdd: (title: string, dueDate: string) => void
  onRemove: (id: string) => void
}

export function HomeworkSection({ homeworkList, onAdd, onRemove }: HomeworkSectionProps) {
  const [newTitle, setNewTitle] = useState('')
  const [newDueDate, setNewDueDate] = useState('')
  const [isAdding, setIsAdding] = useState(false)

  // Default due date to next week
  const getDefaultDueDate = () => {
    const date = new Date()
    date.setDate(date.getDate() + 7)
    return date.toISOString().split('T')[0]
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!newTitle.trim()) return

    onAdd(newTitle.trim(), newDueDate || getDefaultDueDate())
    setNewTitle('')
    setNewDueDate('')
    setIsAdding(false)
  }

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    return date.toLocaleDateString('de-DE', {
      weekday: 'short',
      day: 'numeric',
      month: 'short',
    })
  }

  return (
    <div className="bg-white border border-slate-200 rounded-xl p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-slate-900 flex items-center gap-2">
          <BookOpen className="w-5 h-5 text-slate-400" />
          Hausaufgaben
        </h3>
        {!isAdding && (
          <button
            onClick={() => setIsAdding(true)}
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
          >
            <Plus className="w-4 h-4" />
            Hinzufuegen
          </button>
        )}
      </div>

      {/* Add Form */}
      {isAdding && (
        <form onSubmit={handleSubmit} className="mb-4 p-4 bg-blue-50 rounded-xl">
          <div className="space-y-3">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Aufgabe
              </label>
              <input
                type="text"
                value={newTitle}
                onChange={(e) => setNewTitle(e.target.value)}
                placeholder="z.B. Aufgabe 1-5 auf S. 42..."
                className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                autoFocus
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Faellig am
              </label>
              <input
                type="date"
                value={newDueDate}
                onChange={(e) => setNewDueDate(e.target.value)}
                min={new Date().toISOString().split('T')[0]}
                className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
            </div>

            <div className="flex gap-2">
              <button
                type="submit"
                disabled={!newTitle.trim()}
                className="flex-1 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Speichern
              </button>
              <button
                type="button"
                onClick={() => {
                  setIsAdding(false)
                  setNewTitle('')
                  setNewDueDate('')
                }}
                className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
              >
                Abbrechen
              </button>
            </div>
          </div>
        </form>
      )}

      {/* Homework List */}
      {homeworkList.length === 0 ? (
        <div className="text-center py-8">
          <BookOpen className="w-10 h-10 text-slate-300 mx-auto mb-2" />
          <p className="text-slate-500">Keine Hausaufgaben eingetragen</p>
          <p className="text-sm text-slate-400 mt-1">
            Fuegen Sie Hausaufgaben hinzu, um sie zu dokumentieren
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {homeworkList.map((hw) => (
            <div
              key={hw.id}
              className="flex items-start gap-3 p-4 bg-slate-50 rounded-xl group"
            >
              <div className="flex-1">
                <p className="font-medium text-slate-900">{hw.title}</p>
                <div className="flex items-center gap-2 mt-1 text-sm text-slate-500">
                  <Calendar className="w-3 h-3" />
                  <span>Faellig: {formatDate(hw.dueDate)}</span>
                </div>
              </div>
              <button
                onClick={() => onRemove(hw.id)}
                className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg opacity-0 group-hover:opacity-100 transition-all"
                title="Entfernen"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}