// tdd-guard:skip — shared form primitives (combobox focus/blur state); no pure logic to test in isolation
'use client'

// Shared form primitives used in both Create and Edit modals.

import { useState } from'react'
import type { PlanningProject, AppointmentType, WorkMode } from'@/lib/planning-types'
import { WORK_MODE_COLORS, WORK_MODE_LABELS } from'@/lib/planning-config'

export const inputCls =
'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'

export const labelCls ='block text-[12px] font-medium text-foreground mb-1'

// ── Searchable project dropdown ───────────────────────────────────────────────

interface ProjectSelectProps {
 value: string
 onChange: (id: string, project: PlanningProject | null) => void
 projects: PlanningProject[]
 placeholder?: string
}

export function ProjectSelect({ value, onChange, projects, placeholder }: ProjectSelectProps) {
 const [search, setSearch] = useState('')
 const [open, setOpen] = useState(false)

 const filtered = search
 ? projects.filter(
 (p) =>
 p.code.toLowerCase().includes(search.toLowerCase()) ||
 p.name.toLowerCase().includes(search.toLowerCase()),
 )
 : projects

 const selected = projects.find((p) => p.id === value)

 function pick(p: PlanningProject | null) {
 onChange(p?.id ??'', p)
 setSearch('')
 setOpen(false)
 }

 return (
 <div className="relative">
 <input
 value={open ? search : selected ? `${selected.code} — ${selected.name}` :''}
 onChange={(e) => { setSearch(e.target.value); if (!open) setOpen(true) }}
 onFocus={() => setOpen(true)}
 onBlur={() => setTimeout(() => setOpen(false), 180)}
 placeholder={placeholder ??'Projekt suchen…'}
 autoComplete="off"
 className={inputCls}
 />
 {open && (
 <div className="absolute z-50 top-full left-0 right-0 mt-0.5 bg-card border border-muted rounded-lg shadow-lg max-h-48 overflow-y-auto">
 <div
 className="px-3 py-1.5 text-[12px] text-muted-foreground hover:bg-muted cursor-pointer"
 onMouseDown={(e) => e.preventDefault()}
 onClick={() => pick(null)}
 >
 — kein Projekt —
 </div>
 {filtered.length === 0 ? (
 <div className="px-3 py-2 text-[12px] text-muted-foreground italic">Keine Treffer</div>
 ) : (
 filtered.map((p) => (
 <div
 key={p.id}
 className={`px-3 py-1.5 text-[12px] hover:bg-muted cursor-pointer ${
 p.id === value ?'bg-[#EEF5FB] font-medium':''
 }`}
 onMouseDown={(e) => e.preventDefault()}
 onClick={() => pick(p)}
 >
 <span className="font-mono text-[11px] text-muted-foreground mr-1">{p.code}</span>
 {p.name}
 {p.location_label && (
 <span className="ml-1 text-muted-foreground">· {p.location_label}</span>
 )}
 </div>
 ))
 )}
 </div>
 )}
 </div>
 )
}

// ── Appointment type selector with color preview ──────────────────────────────

interface AppointmentTypeSelectProps {
 value: string
 onChange: (id: string) => void
 types: AppointmentType[]
}

export function AppointmentTypeSelect({ value, onChange, types }: AppointmentTypeSelectProps) {
 const selected = types.find((t) => t.id === value)
 return (
 <div className="flex items-center gap-2">
 <span
 className="w-4 h-4 rounded-sm shrink-0 border border-black/10"
 style={{ backgroundColor: selected?.color ??'#E5E5E5'}}
 />
 <select
 value={value}
 onChange={(e) => onChange(e.target.value)}
 className={`${inputCls} flex-1`}
 required
 >
 {types.map((t) => (
 <option key={t.id} value={t.id}>{t.label}</option>
 ))}
 </select>
 </div>
 )
}

// ── Work mode 3-button selector ───────────────────────────────────────────────

interface WorkModeSelectorProps {
 value: WorkMode
 onChange: (m: WorkMode) => void
}

export function WorkModeSelector({ value, onChange }: WorkModeSelectorProps) {
 const modes: WorkMode[] = ['onsite','homeoffice','remote']
 return (
 <div className="flex rounded border border-muted overflow-hidden h-8">
 {modes.map((mode, i) => (
 <button
 key={mode}
 type="button"
 onClick={() => onChange(mode)}
 className={[
'flex-1 text-[12px] font-medium flex items-center justify-center gap-1.5 transition-colors',
 i < modes.length - 1 ?'border-r border-muted':'',
 value === mode
 ?'bg-[#EEF5FB] text-primary'
 :'bg-card text-muted-foreground hover:bg-[#F7F7F7]',
 ].join('')}
 >
 <span
 className="w-2 h-2 rounded-full shrink-0"
 style={{ backgroundColor: value === mode ? WORK_MODE_COLORS[mode] :'#CCCCCC'}}
 />
 {WORK_MODE_LABELS[mode]}
 </button>
 ))}
 </div>
 )
}