'use client'

import { useState } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { SolutionList } from './SolutionList'
import { PlanView } from './PlanView'

export function PlanHub() {
  const { isDark } = useTheme()
  const [selected, setSelected] = useState<string | null>(null)

  return (
    <div className="space-y-6" data-testid="plan-hub">
      <SolutionList onView={setSelected} selectedId={selected} />

      {selected ? (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
              Plan-Ansicht
            </h3>
            <button
              onClick={() => setSelected(null)}
              className={`text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'}`}
            >
              Schliessen
            </button>
          </div>
          <PlanView solutionId={selected} />
        </div>
      ) : (
        <div className={`rounded-2xl border backdrop-blur-xl p-6 text-center text-sm ${
          isDark ? 'bg-white/5 border-white/10 text-white/60' : 'bg-white/80 border-black/10 text-slate-500'
        }`}>
          Waehle einen abgeschlossenen Plan oben, um die Wochenansicht zu sehen.
        </div>
      )}
    </div>
  )
}