'use client'

/**
 * Companion Module Developer Dashboard
 *
 * Zentrales Dashboard fuer die Entwicklung des Companion/Lesson-Modus:
 * - Entwicklungsroadmap mit Phasen
 * - Feature Tracking
 * - Lehrer-Feedback Sammlung
 * - Backlog Management
 * - System-Infos
 */

import AdminLayout from '@/components/admin/AdminLayout'
import SystemInfoSection from '@/components/admin/SystemInfoSection'
import { useCompanionDev } from './_components/useCompanionDev'
import { companionSystemInfo } from './_components/system-info'
import StatsOverview from './_components/StatsOverview'
import RoadmapTab from './_components/RoadmapTab'
import FeaturesTab from './_components/FeaturesTab'
import FeedbackTab from './_components/FeedbackTab'
import BacklogTab from './_components/BacklogTab'

const TAB_CONFIG = [
  { id: 'roadmap', label: 'Roadmap', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
  { id: 'features', label: 'Features', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
  { id: 'feedback', label: 'Lehrer-Feedback', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
  { id: 'backlog', label: 'Backlog', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
] as const

export default function CompanionDevPage() {
  const {
    features,
    activeTab,
    setActiveTab,
    selectedPhase,
    setSelectedPhase,
    feedbackFilter,
    setFeedbackFilter,
    phaseStats,
    featureStats,
    feedbackStats,
    updateFeatureStatus,
    updateFeedbackStatus,
    filteredFeedback,
  } = useCompanionDev()

  return (
    <AdminLayout
      title="Companion Module Development"
      description="Entwicklungs-Dashboard fuer den Lesson-Modus"
    >
      <StatsOverview
        phaseStats={phaseStats}
        featureStats={featureStats}
        feedbackStats={feedbackStats}
      />

      {/* Tab Navigation */}
      <div className="bg-white rounded-xl border border-slate-200 mb-6">
        <div className="border-b border-slate-200">
          <nav className="flex">
            {TAB_CONFIG.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as typeof activeTab)}
                className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === tab.id
                    ? 'border-primary-600 text-primary-600'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={tab.icon} />
                </svg>
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {activeTab === 'roadmap' && <RoadmapTab />}

          {activeTab === 'features' && (
            <FeaturesTab
              features={features}
              selectedPhase={selectedPhase}
              setSelectedPhase={setSelectedPhase}
              updateFeatureStatus={updateFeatureStatus}
            />
          )}

          {activeTab === 'feedback' && (
            <FeedbackTab
              features={features}
              filteredFeedback={filteredFeedback}
              feedbackFilter={feedbackFilter}
              setFeedbackFilter={setFeedbackFilter}
              updateFeedbackStatus={updateFeedbackStatus}
            />
          )}

          {activeTab === 'backlog' && <BacklogTab features={features} />}
        </div>
      </div>

      {/* System Info Section */}
      <div className="border-t border-slate-200 pt-8">
        <SystemInfoSection config={companionSystemInfo} />
      </div>
    </AdminLayout>
  )
}