'use client'

import { useState, useMemo } from'react'
import { Search, Download } from'lucide-react'
import type { DepartmentMasterData } from'@/lib/repository-types'
import type { UserSession, RoleCode } from'@/lib/auth/permissions-shared'
import { isAtLeastRole } from'@/lib/auth/permissions-shared'

interface RoleRow {
 id: string
 code: string
 label: string
}

interface DeptRow {
 id: string
 department_code: string
 department_name: string
}

export interface DirectoryUser {
 id: string
 first_name: string
 last_name: string
 display_name: string
 email: string
 account_status: string
 department_id: string | null
 role_id: string
 // Supabase returns relations as arrays
 roles: RoleRow | RoleRow[] | null
 department_master_data: DeptRow | DeptRow[] | null
}

interface Props {
 users: DirectoryUser[]
 departments: DepartmentMasterData[]
 session: UserSession | null
}

function resolveRole(roles: RoleRow | RoleRow[] | null): RoleRow | null {
 if (!roles) return null
 return Array.isArray(roles) ? (roles[0] ?? null) : roles
}

function resolveDept(dept: DeptRow | DeptRow[] | null): DeptRow | null {
 if (!dept) return null
 return Array.isArray(dept) ? (dept[0] ?? null) : dept
}

function RoleBadge({ code, label }: { code: string; label: string }) {
 const cls =
 code ==='masteradmin'?'bg-primary-dark text-white':
 code ==='admin'?'bg-primary text-white':
 code ==='consultant'?'bg-primary text-white':
'bg-muted-foreground text-white'
 return (
 <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${cls}`}>
 {label}
 </span>
 )
}

function StatusBadge({ status }: { status: string }) {
 const cls = status ==='active'
 ?'bg-green-100 text-success'
 :'bg-muted text-muted-foreground'
 const label = status ==='active'?'Aktiv': status
 return (
 <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${cls}`}>
 {label}
 </span>
 )
}

export default function UserDirectoryClient({ users, departments, session }: Props) {
 const [search, setSearch] = useState('')
 const canExport = session ? isAtLeastRole(session,'admin') : false

 const filtered = useMemo(() => {
 const q = search.toLowerCase()
 if (!q) return users
 return users.filter(
 (u) =>
 u.display_name.toLowerCase().includes(q) ||
 u.email.toLowerCase().includes(q)
 )
 }, [users, search])

 function handleExport() {
 const rows = [
 ['Name','E-Mail','Abteilung','Rolle','Status'],
 ...filtered.map((u) => {
 const role = resolveRole(u.roles)
 const dept = resolveDept(u.department_master_data)
 return [
 u.display_name,
 u.email,
 dept?.department_code ??'',
 role?.label ??'',
 u.account_status,
 ]
 }),
 ]
 const csv = rows.map((r) => r.map((c) => `"${c}"`).join(',')).join('\n')
 const blob = new Blob([csv], { type:'text/csv;charset=utf-8;'})
 const url = URL.createObjectURL(blob)
 const a = document.createElement('a')
 a.href = url
 a.download = `benutzerverzeichnis_${new Date().toISOString().slice(0, 10)}.csv`
 a.click()
 URL.revokeObjectURL(url)
 }

 return (
 <div className="space-y-5">
 {/* Header */}
 <div className="flex items-center justify-between gap-4 flex-wrap">
 <div>
 <h1 className="text-xl font-bold text-foreground">Benutzerverzeichnis</h1>
 <p className="text-sm text-muted-foreground mt-0.5">{filtered.length} Benutzer</p>
 </div>
 {canExport && (
 <button
 onClick={handleExport}
 className="flex items-center gap-2 h-9 px-4 border border-border rounded-lg text-sm text-primary hover:bg-secondary transition-colors"
 >
 <Download size={15} />
 Export CSV
 </button>
 )}
 </div>

 {/* Search */}
 <div className="relative max-w-sm">
 <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"/>
 <input
 type="text"
 value={search}
 onChange={(e) => setSearch(e.target.value)}
 placeholder="Name oder E-Mail suchen…"
 className="w-full h-9 pl-9 pr-3 rounded-lg border border-border bg-card text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
 />
 </div>

 {/* Table */}
 <div className="bg-card rounded-xl border border-border overflow-hidden">
 <div className="overflow-x-auto">
 <table className="w-full text-sm">
 <thead>
 <tr className="border-b border-border bg-background">
 <th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Name</th>
 <th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden md:table-cell">E-Mail</th>
 <th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider hidden lg:table-cell">Abteilung</th>
 <th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Rolle</th>
 <th className="text-left px-4 py-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider">Status</th>
 </tr>
 </thead>
 <tbody className="divide-y divide-border">
 {filtered.length === 0 && (
 <tr>
 <td colSpan={5} className="px-4 py-10 text-center text-muted-foreground text-sm">
 Keine Benutzer gefunden.
 </td>
 </tr>
 )}
 {filtered.map((user) => {
 const role = resolveRole(user.roles)
 const dept = resolveDept(user.department_master_data)
 return (
 <tr key={user.id} className="hover:bg-background transition-colors">
 <td className="px-4 py-3">
 <div>
 <p className="font-medium text-foreground">{user.display_name}</p>
 <p className="text-xs text-muted-foreground md:hidden">{user.email}</p>
 </div>
 </td>
 <td className="px-4 py-3 text-muted-foreground hidden md:table-cell">{user.email}</td>
 <td className="px-4 py-3 hidden lg:table-cell text-muted-foreground">
 {dept?.department_name ??'—'}
 </td>
 <td className="px-4 py-3">
 {role ? (
 <RoleBadge code={role.code} label={role.label} />
 ) :'—'}
 </td>
 <td className="px-4 py-3">
 <StatusBadge status={user.account_status} />
 </td>
 </tr>
 )
 })}
 </tbody>
 </table>
 </div>
 </div>
 </div>
 )
}