'use client'
// tdd-guard:skip — interactive client modal (form state + supabase writes); role-label logic is unit-tested in lib/auth/role-labels.ts

import { useState } from'react'
import { X, Lock } from'lucide-react'
import type { DepartmentMasterData } from'@/lib/repository-types'
import type { UserSession, RoleCode } from'@/lib/auth/permissions-shared'
import { canManageUser } from'@/lib/auth/permissions-shared'
import { roleLabel } from'@/lib/auth/role-labels'
import type { UserRow } from'./users-client'

interface Props {
 user: UserRow
 departments: DepartmentMasterData[]
 // KAR-787 / R53: roles loaded from the DB; labels curated via roleLabel()
 roles: { code: RoleCode; id: string; label: string }[]
 session: UserSession
 onClose: () => void
 onSave: (updated: UserRow) => void
}

const STATUS_OPTIONS = [
 { value:'active', label:'Aktiv'},
 { value:'invited', label:'Eingeladen'},
 { value:'pending_registration',label:'Ausstehend'},
 { value:'inactive', label:'Inaktiv'},
 { value:'locked', label:'Gesperrt'},
]

export default function EditUserModal({ user, departments, roles, session, onClose, onSave }: Props) {
 const rolesResolved = user.roles
 ? Array.isArray(user.roles) ? (user.roles[0] ?? null) : user.roles
 : null
 const targetRole = (rolesResolved?.code ??'readonly') as RoleCode
 const canManageRole = canManageUser(session, targetRole)

 const [firstName, setFirstName] = useState(user.first_name)
 const [lastName, setLastName] = useState(user.last_name)
 const [displayName, setDisplayName] = useState(user.display_name)
 const [deptId, setDeptId] = useState(user.department_id ??'')
 const [roleId, setRoleId] = useState(rolesResolved?.code ?? user.role_id)
 const [status, setStatus] = useState(user.account_status)

 const [changeEmailMode, setChangeEmailMode] = useState(false)
 const [newEmail, setNewEmail] = useState(user.email)
 const [emailSaving, setEmailSaving] = useState(false)
 const [emailError, setEmailError] = useState<string | null>(null)

 const [saving, setSaving] = useState(false)
 const [error, setError] = useState<string | null>(null)

 // KAR-787 / R51: linked consultant + unlink
 const [linkedName, setLinkedName] = useState<string | null>(user.linked_consultant_name ?? null)
 const [unlinking, setUnlinking] = useState(false)

 async function handleUnlink() {
 if (unlinking) return
 setUnlinking(true)
 setError(null)
 try {
 const res = await fetch('/api/admin/users/unlink', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ userId: user.id }),
 })
 if (!res.ok) {
 const data = await res.json().catch(() => ({}))
 setError(data.error ?? 'Verknüpfung konnte nicht gelöst werden.')
 return
 }
 setLinkedName(null)
 onSave({ ...user, linked_consultant_id: null, linked_consultant_name: null, is_orphan: true })
 } finally {
 setUnlinking(false)
 }
 }

 async function handleSave(e: React.FormEvent) {
 e.preventDefault()
 setSaving(true)
 setError(null)

 const res = await fetch('/api/admin/users', {
 method:'PATCH',
 headers: {'Content-Type':'application/json'},
 body: JSON.stringify({
 id: user.id,
 first_name: firstName.trim(),
 last_name: lastName.trim(),
 display_name: displayName.trim(),
 department_id: deptId || null,
 role_id: roleId,
 account_status: status,
 }),
 })

 if (!res.ok) {
 const data = await res.json() as { error: string }
 setError(data.error ??'Fehler beim Speichern')
 setSaving(false)
 return
 }

 const { profile } = await res.json() as { profile: UserRow }

 onSave({
 ...user,
 first_name: profile.first_name,
 last_name: profile.last_name,
 display_name: profile.display_name,
 department_id: profile.department_id,
 role_id: profile.role_id,
 account_status: profile.account_status,
 })
 }

 async function handleEmailChange() {
 if (!newEmail.trim() || newEmail === user.email) {
 setChangeEmailMode(false)
 return
 }
 setEmailSaving(true)
 setEmailError(null)

 const res = await fetch('/api/admin/users/update-email', {
 method:'POST',
 headers: {'Content-Type':'application/json'},
 body: JSON.stringify({ userId: user.id, newEmail: newEmail.trim() }),
 })

 if (!res.ok) {
 const data = await res.json() as { error: string }
 setEmailError(data.error ??'Fehler')
 setEmailSaving(false)
 return
 }

 // Reflect email change in parent
 onSave({ ...user, email: newEmail.trim() })
 setChangeEmailMode(false)
 setEmailSaving(false)
 }

 return (
 <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
 <div className="bg-card text-foreground rounded-sm w-full max-w-md overflow-hidden max-h-[90vh] flex flex-col">
 {/* Header */}
 <div className="bg-primary-dark px-6 py-5 flex items-center justify-between shrink-0">
 <div>
 <h2 className="font-bold text-white text-lg">Benutzer bearbeiten</h2>
 <p className="text-xs text-white/60 mt-0.5">{user.display_name}</p>
 </div>
 <button onClick={onClose} className="text-white/60 hover:text-white transition-colors">
 <X size={20} />
 </button>
 </div>

 <form onSubmit={(e) => void handleSave(e)} className="flex-1 overflow-y-auto px-6 py-6 space-y-4">
 <div className="grid grid-cols-2 gap-3">
 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Vorname</label>
 <input
 type="text"
 value={firstName}
 onChange={(e) => setFirstName(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 />
 </div>
 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Nachname</label>
 <input
 type="text"
 value={lastName}
 onChange={(e) => setLastName(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 />
 </div>
 </div>

 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Anzeigename</label>
 <input
 type="text"
 value={displayName}
 onChange={(e) => setDisplayName(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 />
 </div>

 {/* Email — read-only with change option */}
 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">E-Mail</label>
 {changeEmailMode ? (
 <div className="space-y-2">
 <input
 type="email"
 value={newEmail}
 onChange={(e) => setNewEmail(e.target.value)}
 autoFocus
 className="w-full h-10 px-3 rounded-lg border border-primary bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 />
 {emailError && <p className="text-xs text-destructive">{emailError}</p>}
 <div className="flex gap-2">
 <button
 type="button"
 onClick={() => { setChangeEmailMode(false); setNewEmail(user.email) }}
 className="text-xs text-muted-foreground hover:text-foreground transition-colors"
 >
 Abbrechen
 </button>
 <button
 type="button"
 onClick={() => void handleEmailChange()}
 disabled={emailSaving}
 className="text-xs text-primary font-medium hover:text-primary-dark disabled:opacity-50 transition-colors"
 >
 {emailSaving ?'Speichern…':'Speichern'}
 </button>
 </div>
 </div>
 ) : (
 <div className="flex items-center gap-2 h-10 px-3 rounded-lg border border-border bg-background">
 <Lock size={13} className="text-muted-foreground shrink-0"/>
 <span className="flex-1 text-sm text-muted-foreground truncate">{user.email}</span>
 {canManageRole && (
 <button
 type="button"
 onClick={() => setChangeEmailMode(true)}
 className="text-xs text-primary hover:text-primary-dark font-medium shrink-0 transition-colors"
 >
 E-Mail ändern
 </button>
 )}
 </div>
 )}
 </div>

 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Abteilung</label>
 <select
 value={deptId}
 onChange={(e) => setDeptId(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 >
 <option value="">Keine Abteilung</option>
 {departments.map((d) => (
 <option key={d.id} value={d.id}>{d.department_code}</option>
 ))}
 </select>
 </div>

 {/* KAR-787 / R51: linked consultant (Mitarbeiter) + unlink */}
 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Verknüpfter Mitarbeiter</label>
 {linkedName ? (
 <div className="flex items-center gap-2 h-10 px-3 rounded-lg border border-border bg-background">
 <span className="flex-1 text-sm text-foreground truncate">{linkedName}</span>
 {canManageRole && (
 <button
 type="button"
 onClick={() => void handleUnlink()}
 disabled={unlinking}
 className="text-xs text-destructive hover:text-destructive/80 font-medium shrink-0 transition-colors disabled:opacity-50"
 >
 {unlinking ? 'Löse…' : 'Verknüpfung lösen'}
 </button>
 )}
 </div>
 ) : (
 <p className="text-sm text-muted-foreground">Kein Mitarbeiter verknüpft.</p>
 )}
 </div>

 {canManageRole && (
 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Rolle</label>
 <select
 value={roleId}
 onChange={(e) => setRoleId(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 >
 {roles.map((r) => (
 <option key={r.code} value={r.code}>{roleLabel(r.code, r.label)}</option>
 ))}
 </select>
 </div>
 )}

 <div>
 <label className="block text-sm font-medium text-foreground mb-1.5">Status</label>
 <select
 value={status}
 onChange={(e) => setStatus(e.target.value)}
 className="w-full h-10 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 >
 {STATUS_OPTIONS.map((s) => (
 <option key={s.value} value={s.value}>{s.label}</option>
 ))}
 </select>
 </div>

 {error && <p className="text-sm text-destructive">{error}</p>}

 <div className="flex gap-3 pt-2">
 <button
 type="button"
 onClick={onClose}
 className="flex-1 h-10 rounded-lg border border-border text-sm text-muted-foreground hover:bg-background transition-colors"
 >
 Abbrechen
 </button>
 <button
 type="submit"
 disabled={saving}
 className="flex-1 h-10 bg-primary text-white rounded-lg text-sm font-semibold hover:bg-primary/90 disabled:opacity-50 transition-colors"
 >
 {saving ?'Speichern…':'Speichern'}
 </button>
 </div>
 </form>
 </div>
 </div>
 )
}