'use client'

import { useState, useEffect } from'react'
import { createClient } from'@/lib/supabase/client'
import type { AppointmentType, AssignmentStatus, WorkMode } from'@/lib/planning-types'

interface Props {
 selectedIds: Set<string>
 appointmentTypes: AppointmentType[]
 onClose: () => void
 onSaved: () => void
 /** FB-36 (P0 compliance, composition profile): work_mode ("Arbeitsort") capture on/off. */
 workModeCapture: boolean
}

const cls ='w-full h-8 rounded border border-muted text-[13px] text-foreground px-2 bg-card focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary'
const lbl ='block text-[12px] font-medium text-foreground mb-1'

export default function BulkEditModal({ selectedIds, appointmentTypes, onClose, onSaved, workModeCapture }: Props) {
 const [typeId, setTypeId] = useState('')
 const [status, setStatus] = useState<AssignmentStatus |''>('')
 const [workMode, setWorkMode] = useState<WorkMode |''>('')
 const [saving, setSaving] = useState(false)
 const [error, setError] = useState<string | null>(null)

 useEffect(() => {
 const fn = (e: KeyboardEvent) => { if (e.key ==='Escape') onClose() }
 document.addEventListener('keydown', fn)
 return () => document.removeEventListener('keydown', fn)
 }, [onClose])

 async function handleSave() {
 const patch: Record<string, unknown> = { updated_at: new Date().toISOString() }
 if (typeId) patch.appointment_type_id = typeId
 if (status) patch.status = status
 // FB-36: capture disabled -> never write work_mode from the bulk-edit payload.
 if (workModeCapture && workMode) patch.work_mode = workMode
 if (Object.keys(patch).length === 1) return // nothing changed

 setSaving(true)
 setError(null)
 const supabase = createClient()
 const { data: { user } } = await supabase.auth.getUser()
 patch.updated_by = user?.id ?? null

 const { error: err } = await supabase
 .from('assignments')
 .update(patch)
 .in('id', Array.from(selectedIds))
 if (err) { setError(err.message); setSaving(false); return }
 onSaved()
 }

 return (
 <div
 className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4"
 onClick={(e) => e.target === e.currentTarget && onClose()}
 >
 <div className="bg-card text-foreground rounded-xl w-full max-w-sm flex flex-col">
 <div className="flex items-center justify-between px-5 py-3.5 border-b border-border shrink-0">
 <h2 className="font-semibold text-[15px] text-foreground">
 {selectedIds.size} Einsätze bearbeiten
 </h2>
 <button onClick={onClose} type="button"className="w-7 h-7 flex items-center justify-center rounded hover:bg-muted text-[#666]">✕</button>
 </div>

 <div className="px-5 py-4 space-y-3">
 <p className="text-[12px] text-[#666]">Nur ausgefüllte Felder werden überschrieben.</p>

 <div>
 <label className={lbl}>Auftragsart</label>
 <select value={typeId} onChange={(e) => setTypeId(e.target.value)} className={cls}>
 <option value="">— unverändert —</option>
 {appointmentTypes.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
 </select>
 </div>

 <div>
 <label className={lbl}>Status</label>
 <select value={status} onChange={(e) => setStatus(e.target.value as AssignmentStatus |'')} className={cls}>
 <option value="">— unverändert —</option>
 <option value="fixed">Fest</option>
 <option value="tentative">Vorläufig</option>
 <option value="critical">Kritisch</option>
 <option value="cancelled">Storniert</option>
 </select>
 </div>

 {/* FB-36: hidden entirely when capture is disabled by profile */}
 {workModeCapture && (
 <div>
 <label className={lbl}>Arbeitsort</label>
 <select value={workMode} onChange={(e) => setWorkMode(e.target.value as WorkMode |'')} className={cls}>
 <option value="">— unverändert —</option>
 <option value="onsite">Vor Ort</option>
 <option value="homeoffice">Homeoffice</option>
 <option value="remote">Remote</option>
 </select>
 </div>
 )}

 {error && (
 <p className="text-[12px] text-destructive bg-status-red-soft border border-status-red-strong rounded px-2.5 py-1.5">
 {error}
 </p>
 )}
 </div>

 <div className="flex justify-end gap-2 px-5 py-3 border-t border-border shrink-0">
 <button type="button"onClick={onClose}
 className="h-8 px-4 text-[13px] font-medium rounded border border-muted text-foreground hover:bg-muted">
 Abbrechen
 </button>
 <button type="button"onClick={handleSave} disabled={saving}
 className="h-8 px-4 text-[13px] font-medium rounded bg-primary text-white hover:bg-primary-dark disabled:opacity-50">
 {saving ?'Speichern…':'Änderungen speichern'}
 </button>
 </div>
 </div>
 </div>
 )
}