'use client'

import { useState, useEffect, useMemo } from'react'
import { X, Trash2 } from'lucide-react'
import { createClient } from'@/lib/supabase/client'
import type { QuestionWithCategories, AssessmentMainCategory, AssessmentSubCategory } from'@/lib/assessment-types'

interface Props {
 question: QuestionWithCategories | null // null = create new
 mainCats: AssessmentMainCategory[]
 subCats: AssessmentSubCategory[]
 existingIndexes: Set<number>
 onClose: () => void
 onSaved: () => void
}

interface FormState {
 index_number: string
 main_category_id: string
 sub_category_id: string
 question_text: string
 answer_text_1: string
 answer_text_2: string
 answer_text_3: string
 answer_text_4: string
 is_active: boolean
}

const inputCls ='w-full rounded-lg border border-border text-[12px] text-foreground px-3 py-2 bg-card focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary'
const labelCls ='block text-[11px] font-medium text-muted-foreground mb-1'
const selectCls ='w-full h-9 rounded-lg border border-border text-[12px] text-foreground px-2.5 bg-card focus:outline-none focus:border-primary appearance-none'

function Field({ label, children }: { label: string; children: React.ReactNode }) {
 return (
 <div>
 <label className={labelCls}>{label}</label>
 {children}
 </div>
 )
}

export default function QuestionModal({ question, mainCats, subCats, existingIndexes, onClose, onSaved }: Props) {
 const isEdit = !!question

 const [form, setForm] = useState<FormState>({
 index_number: question ? String(question.index_number) :'',
 main_category_id: question?.main_category_id ?? mainCats[0]?.id ??'',
 sub_category_id: question?.sub_category_id ??'',
 question_text: question?.question_text ??'',
 answer_text_1: question?.answer_text_1 ??'',
 answer_text_2: question?.answer_text_2 ??'',
 answer_text_3: question?.answer_text_3 ??'',
 answer_text_4: question?.answer_text_4 ??'',
 is_active: question?.is_active ?? true,
 })

 const [saving, setSaving] = useState(false)
 const [deleting, setDeleting] = useState(false)
 const [confirmDelete, setConfirmDelete] = useState(false)
 const [errors, setErrors] = useState<Record<string, string>>({})
 const supabase = useMemo(() => createClient(), [])

 // Filter sub-cats to selected main cat
 const availableSubs = subCats.filter((s) => s.main_category_id === form.main_category_id)

 // Reset sub-category when main changes
 useEffect(() => {
 const valid = availableSubs.find((s) => s.id === form.sub_category_id)
 if (!valid) {
 setForm((prev) => ({ ...prev, sub_category_id: availableSubs[0]?.id ??''}))
 }
 }, [form.main_category_id]) // eslint-disable-line react-hooks/exhaustive-deps

 function set(key: keyof FormState, value: string | boolean) {
 setForm((prev) => ({ ...prev, [key]: value }))
 setErrors((prev) => { const n = { ...prev }; delete n[key]; return n })
 }

 function validate(): boolean {
 const errs: Record<string, string> = {}
 const idx = parseInt(form.index_number, 10)

 if (!form.index_number.trim() || isNaN(idx) || idx < 1) {
 errs.index_number ='Gültige positive Ganzzahl erforderlich'
 } else if (existingIndexes.has(idx) && (!isEdit || idx !== question?.index_number)) {
 errs.index_number = `Index ${idx} ist bereits vergeben`
 }
 if (!form.main_category_id) errs.main_category_id ='Pflichtfeld'
 if (!form.sub_category_id) errs.sub_category_id ='Pflichtfeld'
 if (!form.question_text.trim()) errs.question_text ='Pflichtfeld'
 if (!form.answer_text_1.trim()) errs.answer_text_1 ='Pflichtfeld'
 if (!form.answer_text_2.trim()) errs.answer_text_2 ='Pflichtfeld'
 if (!form.answer_text_3.trim()) errs.answer_text_3 ='Pflichtfeld'
 if (!form.answer_text_4.trim()) errs.answer_text_4 ='Pflichtfeld'

 setErrors(errs)
 return Object.keys(errs).length === 0
 }

 async function handleSave() {
 if (!validate()) return
 setSaving(true)
 const payload = {
 index_number: parseInt(form.index_number, 10),
 main_category_id: form.main_category_id,
 sub_category_id: form.sub_category_id,
 question_text: form.question_text.trim(),
 answer_text_1: form.answer_text_1.trim(),
 answer_text_2: form.answer_text_2.trim(),
 answer_text_3: form.answer_text_3.trim(),
 answer_text_4: form.answer_text_4.trim(),
 is_active: form.is_active,
 sort_order: parseInt(form.index_number, 10),
 updated_at: new Date().toISOString(),
 }

 let error
 if (isEdit) {
 const res = await supabase.from('assessment_questions').update(payload).eq('id', question!.id)
 error = res.error
 } else {
 const res = await supabase.from('assessment_questions').insert({ ...payload, created_at: new Date().toISOString() })
 error = res.error
 }

 setSaving(false)
 if (error) {
 setErrors({ _global: error.message })
 } else {
 onSaved()
 }
 }

 async function handleDelete() {
 if (!question) return
 setDeleting(true)
 const { error } = await supabase.from('assessment_questions').delete().eq('id', question.id)
 setDeleting(false)
 if (error) {
 setErrors({ _global: error.message })
 } else {
 onSaved()
 }
 }

 return (
 <div
 className="fixed inset-0 z-50 bg-black/40 flex items-start justify-center p-4 overflow-y-auto"
 onClick={(e) => e.target === e.currentTarget && onClose()}
 >
 <div className="bg-card text-foreground rounded-xl w-full max-w-2xl my-8">
 {/* Header */}
 <div className="flex items-center justify-between px-5 py-4 border-b border-border">
 <h2 className="font-semibold text-[15px] text-foreground">
 {isEdit ? `Frage #${question!.index_number} bearbeiten` :'Neue Frage anlegen'}
 </h2>
 <button onClick={onClose} className="w-7 h-7 flex items-center justify-center rounded hover:bg-background text-muted-foreground">
 <X size={16} />
 </button>
 </div>

 {/* Form */}
 <div className="px-5 py-5 space-y-4">
 {errors._global && (
 <p className="text-[12px] text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{errors._global}</p>
 )}

 {/* Index + Active row */}
 <div className="flex gap-4 items-start">
 <div className="w-32">
 <Field label="Index *">
 <input
 type="number"
 value={form.index_number}
 onChange={(e) => set('index_number', e.target.value)}
 min={1}
 className={`${inputCls} h-9 ${errors.index_number ?'border-red-400':''}`}
 />
 {errors.index_number && <p className="text-[10px] text-red-500 mt-0.5">{errors.index_number}</p>}
 </Field>
 </div>
 <div className="flex-1"/>
 <div className="flex items-center gap-2 pt-5">
 <label className="flex items-center gap-2 cursor-pointer select-none">
 <span className="text-[12px] text-muted-foreground">Aktiv</span>
 <button
 type="button"
 onClick={() => set('is_active', !form.is_active)}
 className={`w-10 h-5 rounded-full transition-colors relative ${form.is_active ?'bg-primary':'bg-border'}`}
 >
 <span className={`absolute top-0.5 w-4 h-4 bg-card rounded-full shadow transition-all ${form.is_active ?'left-5':'left-0.5'}`} />
 </button>
 </label>
 </div>
 </div>

 {/* Categories row */}
 <div className="grid grid-cols-2 gap-4">
 <Field label="Hauptkategorie *">
 <select
 value={form.main_category_id}
 onChange={(e) => set('main_category_id', e.target.value)}
 className={`${selectCls} ${errors.main_category_id ?'border-red-400':''}`}
 >
 {mainCats.map((m) => (
 <option key={m.id} value={m.id}>{m.code} — {m.label}</option>
 ))}
 </select>
 </Field>
 <Field label="Unterkategorie *">
 <select
 value={form.sub_category_id}
 onChange={(e) => set('sub_category_id', e.target.value)}
 className={`${selectCls} ${errors.sub_category_id ?'border-red-400':''}`}
 disabled={availableSubs.length === 0}
 >
 <option value="">Bitte wählen…</option>
 {availableSubs.map((s) => (
 <option key={s.id} value={s.id}>{s.code} — {s.label}</option>
 ))}
 </select>
 </Field>
 </div>

 {/* Question text */}
 <Field label="Frage *">
 <textarea
 value={form.question_text}
 onChange={(e) => set('question_text', e.target.value)}
 rows={3}
 className={`${inputCls} resize-none ${errors.question_text ?'border-red-400':''}`}
 placeholder="Fragetext eingeben…"
 />
 </Field>

 {/* Answer texts */}
 <div className="space-y-3">
 {([1, 2, 3, 4] as const).map((r) => {
 const key = `answer_text_${r}` as keyof FormState
 const labels = ['1 – Nicht erfüllt','2 – Teilweise','3 – Erfüllt','4 – Best Practice']
 const colors = ['text-red-600','text-amber-600','text-green-700','text-blue-700']
 return (
 <Field key={r} label={`Antwort ${labels[r - 1]} *`}>
 <textarea
 value={form[key] as string}
 onChange={(e) => set(key, e.target.value)}
 rows={2}
 className={`${inputCls} resize-none text-[11px] ${errors[key] ?'border-red-400':''}`}
 placeholder={`Antworttext für Bewertung ${r}…`}
 />
 {errors[key] && <p className="text-[10px] text-red-500 mt-0.5">{errors[key]}</p>}
 </Field>
 )
 })}
 </div>
 </div>

 {/* Footer */}
 <div className="flex items-center justify-between px-5 py-4 border-t border-border">
 {isEdit ? (
 confirmDelete ? (
 <div className="flex items-center gap-2">
 <span className="text-[12px] text-red-600">Wirklich löschen?</span>
 <button
 onClick={handleDelete}
 disabled={deleting}
 className="h-8 px-3 text-[12px] font-medium rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
 >
 {deleting ?'Lösche…':'Ja, löschen'}
 </button>
 <button onClick={() => setConfirmDelete(false)} className="h-8 px-3 text-[12px] font-medium rounded border border-border text-foreground hover:bg-background">
 Abbrechen
 </button>
 </div>
 ) : (
 <button
 onClick={() => setConfirmDelete(true)}
 className="flex items-center gap-1.5 h-8 px-3 text-[12px] font-medium rounded border border-red-200 text-red-600 hover:bg-red-50"
 >
 <Trash2 size={13} />
 Löschen
 </button>
 )
 ) : <div />}

 <div className="flex gap-2">
 <button
 onClick={onClose}
 className="h-9 px-4 text-[13px] font-medium rounded border border-border text-foreground hover:bg-background"
 >
 Abbrechen
 </button>
 <button
 onClick={handleSave}
 disabled={saving}
 className="h-9 px-4 text-[13px] font-medium rounded bg-primary text-white hover:bg-primary-dark disabled:opacity-50"
 >
 {saving ?'Speichere…': isEdit ?'Speichern':'Frage anlegen'}
 </button>
 </div>
 </div>
 </div>
 </div>
 )
}