"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useAuth } from "@/lib/auth-context"
import { apiFetch } from "@/lib/apiutils"

export default function UsersPage() {
    const { user } = useAuth()
    const [users, setUsers] = useState<any[]>([])
    const [isLoading, setIsLoading] = useState(true)

    // Form State
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [role, setRole] = useState("ingeniero")
    const [status, setStatus] = useState("activo")
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [message, setMessage] = useState("")

    const fetchUsers = async () => {
        setIsLoading(true)
        try {
            const res = await apiFetch("/users")
            if (res.ok) {
                const data = await res.json()
                setUsers(data)
            }
        } catch (e) {
            console.error("Failed to fetch users", e)
        } finally {
            setIsLoading(false)
        }
    }

    useEffect(() => {
        if (user?.role === 'admin') {
            fetchUsers()
        }
    }, [user])

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setIsSubmitting(true)
        setMessage("")

        try {
            const res = await apiFetch("/users", {
                method: "POST",
                body: JSON.stringify({
                    name,
                    email,
                    password,
                    role,
                    status
                })
            })

            if (res.ok) {
                setMessage("Usuario creado exitosamente")
                setName("")
                setEmail("")
                setPassword("")
                fetchUsers()
            } else {
                const data = await res.json()
                setMessage(data.message || "Error al crear usuario")
            }
        } catch (e) {
            setMessage("Error de conexión")
        } finally {
            setIsSubmitting(false)
        }
    }

    if (user?.role !== 'admin') {
        return <div className="p-4">Acceso denegado. Solo administradores.</div>
    }

    return (
        <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle>Gestión de Usuarios</CardTitle>
                    <CardDescription>Crea y administra los usuarios del sistema</CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-4 mb-8 border p-4 rounded-md">
                        <h3 className="font-semibold text-lg">Nuevo Usuario</h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label>Nombre</Label>
                                <Input value={name} onChange={e => setName(e.target.value)} required />
                            </div>
                            <div className="space-y-2">
                                <Label>Email</Label>
                                <Input type="email" value={email} onChange={e => setEmail(e.target.value)} required />
                            </div>
                            <div className="space-y-2">
                                <Label>Contraseña</Label>
                                <Input type="password" value={password} onChange={e => setPassword(e.target.value)} required minLength={8} />
                            </div>
                            <div className="space-y-2">
                                <Label>Rol</Label>
                                <Select value={role} onValueChange={setRole}>
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="admin">Administrador</SelectItem>
                                        <SelectItem value="ingeniero">Ingeniero</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label>Estado</Label>
                                <Select value={status} onValueChange={setStatus}>
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="activo">Activo</SelectItem>
                                        <SelectItem value="inactivo">Inactivo</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                        {message && <p className="text-sm font-medium mt-2 text-blue-600">{message}</p>}
                        <Button type="submit" disabled={isSubmitting} className="mt-4">Default Password? No, write one.</Button>
                        <div className="flex justify-end">
                            <Button type="submit" disabled={isSubmitting}>Crear Usuario</Button>
                        </div>
                    </form>

                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Nombre</TableHead>
                                <TableHead>Email</TableHead>
                                <TableHead>Rol</TableHead>
                                <TableHead>Estado</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {isLoading ? (
                                <TableRow><TableCell colSpan={4}>Cargando...</TableCell></TableRow>
                            ) : users.map((u) => (
                                <TableRow key={u.id}>
                                    <TableCell>{u.name}</TableCell>
                                    <TableCell>{u.email}</TableCell>
                                    <TableCell>{u.role}</TableCell>
                                    <TableCell>{u.status}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        </div>
    )
}