'use client'

import { useState } from'react'
import { X, Settings } from'lucide-react'

interface Role { id: string; code: string; label: string }
interface RoleViewConfig { id: string; role_id: string; module: string; config: Record<string, unknown> }
interface ProjectType { id: string; code: string; label: string }
interface ProjectStatus { id: string; code: string; label: string }

interface Props {
 roles: Role[]
 viewConfigs: RoleViewConfig[]
 projectTypes: ProjectType[]
 projectStatuses: ProjectStatus[]
}

interface ViewFilters {
 onlyOwn?: boolean
 onlyActive?: boolean
 onlyDepartment?: boolean
 projectTypes?: string[]
 statuses?: string[]
}

interface ModalState {
 role: Role
 filters: ViewFilters
}

function filterSummary(config: Record<string, unknown> | undefined): string {
 if (!config) return'Alle Projekte'
 const filters = (config.filters ?? {}) as ViewFilters
 const parts: string[] = []
 if (filters.onlyOwn) parts.push('Nur eigene')
 if (filters.onlyActive) parts.push('Aktive')
 if (filters.onlyDepartment) parts.push('Nur Abteilung')
 if (filters.projectTypes?.length) parts.push(`${filters.projectTypes.length} Typen`)
 if (filters.statuses?.length) parts.push(`${filters.statuses.length} Status`)
 return parts.length > 0 ? parts.join(',') :'Alle Projekte'
}

function ViewConfigModal({
 state,
 projectTypes,
 projectStatuses,
 onClose,
 onSaved,
}: {
 state: ModalState
 projectTypes: ProjectType[]
 projectStatuses: ProjectStatus[]
 onClose: () => void
 onSaved: (roleId: string, filters: ViewFilters) => void
}) {
 const [filters, setFilters] = useState<ViewFilters>(state.filters)
 const [saving, setSaving] = useState(false)
 const [error, setError] = useState<string | null>(null)

 function toggleType(code: string) {
 const current = filters.projectTypes ?? []
 if (current.includes(code)) {
 setFilters({ ...filters, projectTypes: current.filter((c) => c !== code) })
 } else {
 setFilters({ ...filters, projectTypes: [...current, code] })
 }
 }

 function toggleStatus(code: string) {
 const current = filters.statuses ?? []
 if (current.includes(code)) {
 setFilters({ ...filters, statuses: current.filter((c) => c !== code) })
 } else {
 setFilters({ ...filters, statuses: [...current, code] })
 }
 }

 async function handleSave() {
 setSaving(true)
 setError(null)
 try {
 const res = await fetch('/api/admin/views', {
 method:'POST',
 headers: {'Content-Type':'application/json'},
 body: JSON.stringify({
 roleId: state.role.id,
 module:'projektanlage',
 config: { module:'projektanlage', filters },
 }),
 })
 if (!res.ok) throw new Error('Fehler beim Speichern')
 onSaved(state.role.id, filters)
 onClose()
 } catch (e) {
 setError(e instanceof Error ? e.message :'Unbekannter Fehler')
 } finally {
 setSaving(false)
 }
 }

 return (
 <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
 <div className="bg-card text-foreground rounded-xl w-full max-w-lg mx-4 overflow-hidden">
 {/* Header */}
 <div className="bg-primary-dark text-white px-5 py-4 flex items-center justify-between">
 <h2 className="font-semibold text-sm">Ansicht konfigurieren — {state.role.label}</h2>
 <button onClick={onClose} className="text-white/70 hover:text-white transition-colors">
 <X size={18} />
 </button>
 </div>

 <div className="p-5 space-y-5">
 {/* Role badge */}
 <div>
 <p className="text-xs font-medium text-muted-foreground mb-1.5">Rolle</p>
 <span className="inline-block text-xs font-semibold bg-secondary text-primary px-3 py-1 rounded-full">
 {state.role.label}
 </span>
 </div>

 {/* Module */}
 <div>
 <p className="text-xs font-medium text-muted-foreground mb-1.5">Modul</p>
 <span className="text-sm text-foreground">Projektanlage</span>
 </div>

 {/* Boolean filters */}
 <div>
 <p className="text-xs font-medium text-muted-foreground mb-2">Filter</p>
 <div className="space-y-2.5">
 {[
 { key:'onlyOwn'as const, label:'Nur eigene Projekte'},
 { key:'onlyActive'as const, label:'Nur aktive Projekte'},
 { key:'onlyDepartment'as const, label:'Nur eigene Abteilung'},
 ].map(({ key, label }) => (
 <label key={key} className="flex items-center gap-3 cursor-pointer">
 <input
 type="checkbox"
 checked={!!filters[key]}
 onChange={(e) => setFilters({ ...filters, [key]: e.target.checked })}
 className="w-4 h-4 rounded border-border text-primary focus:ring-primary/30"
 />
 <span className="text-sm text-foreground">{label}</span>
 </label>
 ))}
 </div>
 </div>

 {/* Project types */}
 <div>
 <p className="text-xs font-medium text-muted-foreground mb-1.5">
 Erlaubte Auftragstypen <span className="font-normal">(leer = alle)</span>
 </p>
 <div className="border border-border rounded-lg divide-y divide-border max-h-40 overflow-y-auto">
 {projectTypes.map((pt) => (
 <label key={pt.id} className="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-background">
 <input
 type="checkbox"
 checked={(filters.projectTypes ?? []).includes(pt.code)}
 onChange={() => toggleType(pt.code)}
 className="w-4 h-4 rounded border-border text-primary focus:ring-primary/30"
 />
 <span className="text-xs text-foreground">{pt.label}</span>
 </label>
 ))}
 </div>
 </div>

 {/* Statuses */}
 <div>
 <p className="text-xs font-medium text-muted-foreground mb-1.5">
 Erlaubte Status <span className="font-normal">(leer = alle)</span>
 </p>
 <div className="border border-border rounded-lg divide-y divide-border max-h-40 overflow-y-auto">
 {projectStatuses.map((ps) => (
 <label key={ps.id} className="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-background">
 <input
 type="checkbox"
 checked={(filters.statuses ?? []).includes(ps.code)}
 onChange={() => toggleStatus(ps.code)}
 className="w-4 h-4 rounded border-border text-primary focus:ring-primary/30"
 />
 <span className="text-xs text-foreground">{ps.label}</span>
 </label>
 ))}
 </div>
 </div>

 {error && (
 <p className="text-xs text-destructive bg-red-50 border border-red-200 rounded px-3 py-2">{error}</p>
 )}

 {/* Actions */}
 <div className="flex justify-end gap-3 pt-1">
 <button
 type="button"
 onClick={onClose}
 className="px-4 py-2 text-sm font-medium text-muted-foreground border border-border rounded-lg hover:bg-background transition-colors"
 >
 Abbrechen
 </button>
 <button
 type="button"
 onClick={handleSave}
 disabled={saving}
 className="px-4 py-2 text-sm font-medium bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-60"
 >
 {saving ?'Speichern…':'Speichern'}
 </button>
 </div>
 </div>
 </div>
 </div>
 )
}

export default function ViewsClient({ roles, viewConfigs, projectTypes, projectStatuses }: Props) {
 const [configs, setConfigs] = useState<RoleViewConfig[]>(viewConfigs)
 const [modal, setModal] = useState<ModalState | null>(null)

 function openModal(role: Role) {
 const existing = configs.find((c) => c.role_id === role.id && c.module ==='projektanlage')
 const filters: ViewFilters = existing
 ? ((existing.config.filters ?? {}) as ViewFilters)
 : {}
 setModal({ role, filters })
 }

 function handleSaved(roleId: string, filters: ViewFilters) {
 setConfigs((prev) => {
 const idx = prev.findIndex((c) => c.role_id === roleId && c.module ==='projektanlage')
 const newConfig: RoleViewConfig = {
 id: idx >= 0 ? prev[idx].id : crypto.randomUUID(),
 role_id: roleId,
 module:'projektanlage',
 config: { module:'projektanlage', filters },
 }
 if (idx >= 0) {
 return prev.map((c, i) => (i === idx ? newConfig : c))
 }
 return [...prev, newConfig]
 })
 }

 return (
 <div>
 <div className="mb-6">
 <h1 className="text-lg font-semibold text-foreground">Rollen-Ansichten</h1>
 <p className="text-sm text-muted-foreground mt-1">Konfigurieren Sie, welche Projekte jede Rolle sieht</p>
 </div>

 <div className="bg-card rounded-xl border border-border overflow-hidden">
 <table className="w-full">
 <thead>
 <tr className="border-b border-border bg-background">
 <th className="text-left text-xs font-medium text-muted-foreground px-4 py-3">Rolle</th>
 <th className="text-left text-xs font-medium text-muted-foreground px-4 py-3">Modul</th>
 <th className="text-left text-xs font-medium text-muted-foreground px-4 py-3">Filter</th>
 <th className="text-right text-xs font-medium text-muted-foreground px-4 py-3">Aktionen</th>
 </tr>
 </thead>
 <tbody className="divide-y divide-border">
 {roles.map((role) => {
 const existing = configs.find((c) => c.role_id === role.id && c.module ==='projektanlage')
 return (
 <tr key={role.id} className="hover:bg-background transition-colors">
 <td className="px-4 py-3">
 <span className="text-sm font-medium text-foreground">{role.label}</span>
 <span className="ml-2 text-xs text-muted-foreground font-mono">{role.code}</span>
 </td>
 <td className="px-4 py-3 text-sm text-muted-foreground">Projektanlage</td>
 <td className="px-4 py-3">
 <span className="text-xs text-muted-foreground">{filterSummary(existing?.config)}</span>
 </td>
 <td className="px-4 py-3 text-right">
 <button
 onClick={() => openModal(role)}
 className="inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
 >
 <Settings size={13} />
 Bearbeiten
 </button>
 </td>
 </tr>
 )
 })}
 </tbody>
 </table>
 </div>

 {modal && (
 <ViewConfigModal
 state={modal}
 projectTypes={projectTypes}
 projectStatuses={projectStatuses}
 onClose={() => setModal(null)}
 onSaved={handleSaved}
 />
 )}
 </div>
 )
}