'use client'

import { useState } from'react'
import Link from'next/link'
import { ArrowLeft, RefreshCw } from'lucide-react'
import { createClient } from'@/lib/supabase/client'
import type { QuestionWithCategories, AssessmentMainCategory, AssessmentSubCategory } from'@/lib/assessment-types'
import { RoleGuard } from'@/components/auth/permission-guard'
import QuestionsTab from'./questions-tab'
import CategoriesTab from'./categories-tab'
import ImportExportTab from'./import-export-tab'

type Tab ='questions'|'categories'|'import'

interface Props {
 initialQuestions: QuestionWithCategories[]
 initialMainCategories: AssessmentMainCategory[]
 initialSubCategories: AssessmentSubCategory[]
}

export default function AdminShell({ initialQuestions, initialMainCategories, initialSubCategories }: Props) {
 const [activeTab, setActiveTab] = useState<Tab>('questions')
 const [questions, setQuestions] = useState(initialQuestions)
 const [mainCats, setMainCats] = useState(initialMainCategories)
 const [subCats, setSubCats] = useState(initialSubCategories)
 const [refreshing, setRefreshing] = useState(false)

 async function refreshAll() {
 setRefreshing(true)
 try {
 const supabase = createClient()
 const [{ data: qs }, { data: mcs }, { data: scs }] = await Promise.all([
 supabase
 .from('assessment_questions')
 .select('*, main_category:assessment_main_categories(*), sub_category:assessment_sub_categories(*)')
 .order('index_number'),
 supabase.from('assessment_main_categories').select('*').order('sort_order'),
 supabase.from('assessment_sub_categories').select('*').order('sort_order'),
 ])
 if (qs) setQuestions(qs as QuestionWithCategories[])
 if (mcs) setMainCats(mcs as AssessmentMainCategory[])
 if (scs) setSubCats(scs as AssessmentSubCategory[])
 } finally {
 setRefreshing(false)
 }
 }

 const tabs: { key: Tab; label: string }[] = [
 { key:'questions', label:'Fragen'},
 { key:'categories', label:'Kategorien'},
 { key:'import', label:'Import / Export'},
 ]

 return (
 <div className="min-h-screen bg-background">

 {/* Header */}
 <header className="bg-primary-dark text-white shadow-lg">
 <div className="h-14 px-5 flex items-center gap-3">
 <Link href="/fabrikanalyse"className="w-10 h-10 flex items-center justify-center rounded-xl text-white/70 hover:text-white hover:bg-card/10 transition-colors shrink-0">
 <ArrowLeft size={20} />
 </Link>
 <div className="flex-1 min-w-0">
 <p className="font-semibold text-[14px]">Assessment-Verwaltung</p>
 <p className="text-[11px] text-white/55">{questions.length} Fragen · {mainCats.length} Hauptkategorien · {subCats.length} Unterkategorien</p>
 </div>
 <button
 onClick={refreshAll}
 disabled={refreshing}
 className="flex items-center gap-1.5 h-8 px-3 rounded-lg bg-card/10 hover:bg-card/20 text-white text-[12px] font-medium transition-colors disabled:opacity-50"
 >
 <RefreshCw size={13} className={refreshing ?'animate-spin':''} />
 Aktualisieren
 </button>
 </div>

 {/* Tab bar */}
 <div className="px-5 flex gap-0 border-t border-white/10">
 {tabs.map(({ key, label }) => (
 <button
 key={key}
 onClick={() => setActiveTab(key)}
 className={`px-5 py-2.5 text-[13px] font-medium transition-colors border-b-2 ${
 activeTab === key
 ?'text-white border-white'
 :'text-white/55 border-transparent hover:text-white/80'
 }`}
 >
 {label}
 </button>
 ))}
 </div>
 </header>

 {/* Tab content */}
 <div className="max-w-[1400px] mx-auto px-5 py-6">
 {activeTab ==='questions'&& (
 <QuestionsTab
 questions={questions}
 mainCats={mainCats}
 subCats={subCats}
 onRefresh={refreshAll}
 />
 )}
 {activeTab ==='categories'&& (
 <CategoriesTab
 mainCats={mainCats}
 subCats={subCats}
 questions={questions}
 onRefresh={refreshAll}
 />
 )}
 {activeTab ==='import'&& (
 <RoleGuard
 minimumRole="admin"
 fallback={
 <div className="flex flex-col items-center justify-center py-24 gap-3 text-muted-foreground">
 <p className="font-medium text-foreground">Kein Zugriff</p>
 <p className="text-sm">Der Import-Bereich ist nur für Administratoren zugänglich.</p>
 </div>
 }
 >
 <ImportExportTab
 questions={questions}
 mainCats={mainCats}
 subCats={subCats}
 onRefresh={refreshAll}
 />
 </RoleGuard>
 )}
 </div>
 </div>
 )
}