breakpilot-lehrer/studio-v2/app/stundenplan/_components/plan/PlanView.tsx

'use client'

import { useState, useEffect, useCallback, useMemo } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { solutionsApi, subjectsApi } from '@/lib/stundenplan/api'
import type { TimetableLesson, TimetableSubject } from '@/app/stundenplan/types'

interface PlanViewProps {
  solutionId: string
}

const DAYS = [
  { v: 1, label: 'Mo' },
  { v: 2, label: 'Di' },
  { v: 3, label: 'Mi' },
  { v: 4, label: 'Do' },
  { v: 5, label: 'Fr' },
]

type Perspective = 'class' | 'teacher' | 'room'

const PERSPECTIVE_LABEL: Record<Perspective, string> = {
  class: 'Klasse',
  teacher: 'Lehrer',
  room: 'Raum',
}

interface Resource {
  id: string
  label: string
}

export function PlanView({ solutionId }: PlanViewProps) {
  const { isDark } = useTheme()
  const [lessons, setLessons] = useState<TimetableLesson[]>([])
  const [subjects, setSubjects] = useState<TimetableSubject[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [perspective, setPerspective] = useState<Perspective>('class')
  const [selectedResource, setSelectedResource] = useState<string>('')

  const load = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const [ls, sub] = await Promise.all([
        solutionsApi.lessons(solutionId),
        subjectsApi.list(),
      ])
      setLessons(ls || [])
      setSubjects(sub || [])
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Laden fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [solutionId])

  useEffect(() => { load() }, [load])

  // Unique resources for the chosen perspective.
  const resources: Resource[] = useMemo(() => {
    const seen = new Map<string, Resource>()
    for (const l of lessons) {
      let id = ''
      let label = ''
      if (perspective === 'class') {
        id = l.class_id
        label = l.class_name || id.slice(0, 8)
      } else if (perspective === 'teacher') {
        id = l.teacher_id
        label = l.teacher_name || id.slice(0, 8)
      } else if (perspective === 'room') {
        id = l.room_id || 'kein-raum'
        label = l.room_name || (l.room_id ? l.room_id.slice(0, 8) : '— kein Raum —')
      }
      if (!seen.has(id)) seen.set(id, { id, label })
    }
    return Array.from(seen.values()).sort((a, b) => a.label.localeCompare(b.label))
  }, [lessons, perspective])

  // Reset selected resource when perspective changes or list refreshes.
  useEffect(() => {
    if (resources.length > 0 && !resources.some(r => r.id === selectedResource)) {
      setSelectedResource(resources[0].id)
    }
  }, [resources, selectedResource])

  const visibleLessons = useMemo(() => {
    if (!selectedResource) return []
    return lessons.filter(l => {
      if (perspective === 'class') return l.class_id === selectedResource
      if (perspective === 'teacher') return l.teacher_id === selectedResource
      return (l.room_id || 'kein-raum') === selectedResource
    })
  }, [lessons, perspective, selectedResource])

  const subjectColor = useCallback((id: string): string => {
    const s = subjects.find(x => x.id === id)
    return s?.color || (isDark ? '#475569' : '#cbd5e1')
  }, [subjects, isDark])

  const periodIndices = useMemo(() => {
    const set = new Set<number>()
    for (const l of lessons) set.add(l.period_index)
    return Array.from(set).sort((a, b) => a - b)
  }, [lessons])

  const cellLesson = (day: number, periodIdx: number): TimetableLesson | undefined =>
    visibleLessons.find(l => l.day_of_week === day && l.period_index === periodIdx)

  const cardClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white/80 border-black/10 text-slate-900'
  const selectClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'

  return (
    <div className="space-y-4" data-testid="plan-view">
      <div className={`p-4 rounded-2xl border backdrop-blur-xl ${cardClass}`}>
        <div className="flex flex-wrap items-center gap-3">
          <div>
            <label className="block text-xs mb-1 opacity-70">Perspektive</label>
            <div className="flex gap-1">
              {(['class', 'teacher', 'room'] as Perspective[]).map(p => (
                <button
                  key={p}
                  onClick={() => setPerspective(p)}
                  data-testid={`perspective-${p}`}
                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
                    perspective === p
                      ? isDark ? 'bg-indigo-500 text-white' : 'bg-indigo-600 text-white'
                      : isDark ? 'bg-white/10 text-white/70 hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                  }`}
                >
                  {PERSPECTIVE_LABEL[p]}
                </button>
              ))}
            </div>
          </div>
          <div className="flex-1 min-w-[200px]">
            <label className="block text-xs mb-1 opacity-70">{PERSPECTIVE_LABEL[perspective]}</label>
            <select value={selectedResource} onChange={e => setSelectedResource(e.target.value)} className={`w-full px-3 py-1.5 rounded-lg border ${selectClass}`}>
              {resources.length === 0 && <option value="">— keine Daten —</option>}
              {resources.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
            </select>
          </div>
        </div>
      </div>

      {error && <div className="p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">{error}</div>}

      {loading ? (
        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Laedt…</div>
      ) : lessons.length === 0 ? (
        <div className={`text-center py-8 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>
          Keine Lessons in diesem Plan.
        </div>
      ) : (
        <div className={`rounded-2xl border backdrop-blur-xl overflow-hidden ${cardClass}`}>
          <table className="w-full">
            <thead className={isDark ? 'bg-white/5' : 'bg-slate-100'}>
              <tr>
                <th className="text-left px-3 py-3 text-sm font-medium opacity-70 w-16">Stunde</th>
                {DAYS.map(d => (
                  <th key={d.v} className="text-left px-3 py-3 text-sm font-medium opacity-70">{d.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {periodIndices.map(idx => (
                <tr key={idx} className={isDark ? 'border-t border-white/10' : 'border-t border-slate-200'}>
                  <td className="px-3 py-2 font-medium text-sm">{idx}.</td>
                  {DAYS.map(d => {
                    const lesson = cellLesson(d.v, idx)
                    if (!lesson) {
                      return <td key={d.v} className="px-3 py-2 opacity-20 text-xs">—</td>
                    }
                    const color = subjectColor(lesson.subject_id)
                    return (
                      <td key={d.v} className="px-2 py-1">
                        <div
                          className="rounded-md p-2 text-xs space-y-0.5"
                          style={{ backgroundColor: color + (isDark ? '40' : '30'), borderLeft: `3px solid ${color}` }}
                          data-testid={`cell-${d.v}-${idx}`}
                        >
                          <div className="font-semibold">{lesson.subject_name || '?'}</div>
                          {perspective !== 'class' && lesson.class_name && (
                            <div className="opacity-80">{lesson.class_name}</div>
                          )}
                          {perspective !== 'teacher' && lesson.teacher_name && (
                            <div className="opacity-70">{lesson.teacher_name.split(',')[0]}</div>
                          )}
                          {perspective !== 'room' && lesson.room_name && (
                            <div className="opacity-60">{lesson.room_name}</div>
                          )}
                        </div>
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}