"use client"

import { useState } from "react"
import { useAuth } from "@/lib/auth-context"
import { useRouter } from "next/navigation"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Plus, Pencil, Trash2, Search } from "lucide-react"
import { Badge } from "@/components/ui/badge"

interface Usuario {
  id: string
  name: string
  email: string
  role: "admin" | "ingeniero"
  status: "activo" | "inactivo"
}

import { apiFetch } from "@/lib/apiutils"
import { useEffect } from "react"
import { toast } from "sonner"

export default function UsuariosPage() {
  const { user } = useAuth()
  const router = useRouter()
  const [usuarios, setUsuarios] = useState<Usuario[]>([])
  const [isLoading, setIsLoading] = useState(true)

  const fetchData = async () => {
    setIsLoading(true)
    try {
      const res = await apiFetch("/users")
      if (res.ok) {
        const data = await res.json()
        const mappedData = data.map((u: any) => ({
          id: u.id.toString(),
          name: u.name,
          email: u.email,
          role: u.role,
          status: u.status
        }))
        setUsuarios(mappedData)
      }
    } catch (e) {
      console.error(e)
    } finally {
      setIsLoading(false)
    }
  }

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

  const [searchTerm, setSearchTerm] = useState("")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingUser, setEditingUser] = useState<Usuario | null>(null)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    role: "ingeniero" as "admin" | "ingeniero",
    status: "activo" as "activo" | "inactivo",
  })

  // Protección de ruta
  if (user?.role !== "admin") {
    // Redirect handled in useEffect or handled by layout usually, but here is fine.
    // However, avoid render loop return null.
    // Accessing localStorage or similar might be better for sync check but we rely on auth context
    // If context is loading, maybe show spinner?
    // For now keeping existing logic but fetch is guarded.
  }

  // Note: The existing check below is sync render. 
  // if (user?.role !== "admin") ...
  // Keeping it as is from previous file content, assuming it works or adapting.
  // Actually, replace the state init block logic.

  const filteredUsuarios = usuarios.filter(
    (usuario) =>
      usuario.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      usuario.email.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const handleOpenDialog = (usuario?: Usuario) => {
    if (usuario) {
      setEditingUser(usuario)
      setFormData({
        name: usuario.name,
        email: usuario.email,
        password: "",
        role: usuario.role,
        status: usuario.status,
      })
    } else {
      setEditingUser(null)
      setFormData({ name: "", email: "", password: "", role: "ingeniero", status: "activo" })
    }
    setIsDialogOpen(true)
  }

  const handleSave = async () => {
    // Validaciones
    if (!formData.name || !formData.email) {
      toast.error("Por favor completa todos los campos obligatorios.")
      return
    }

    if (!editingUser && !formData.password) {
      toast.error("La contraseña es obligatoria para nuevos usuarios.")
      return
    }

    if (formData.password && formData.password.length < 8) {
      toast.error("La contraseña debe tener al menos 8 caracteres.")
      return
    }

    try {
      const payload: any = {
        name: formData.name,
        email: formData.email,
        role: formData.role,
        status: formData.status
      }

      if (formData.password) {
        payload.password = formData.password
      }

      let res;
      if (editingUser) {
        res = await apiFetch(`/users/${editingUser.id}`, {
          method: 'PUT',
          body: JSON.stringify(payload)
        })
      } else {
        res = await apiFetch('/users', {
          method: 'POST',
          body: JSON.stringify(payload)
        })
      }

      if (res.ok) {
        fetchData()
        setIsDialogOpen(false)
      } else {
        toast.error("Error al guardar")
      }
    } catch (e) {
      console.error(e)
      toast.error("Error de conexión")
    }
  }

  const handleDelete = async (id: string) => {
    if (confirm("¿Estás seguro de que deseas eliminar este usuario?")) {
      try {
        const res = await apiFetch(`/users/${id}`, { method: 'DELETE' })
        if (res.ok) {
          fetchData()
        } else {
          const data = await res.json()
          toast.error(data.message || "Error al eliminar")
        }
      } catch (e) {
        console.error(e)
        toast.error("Error de conexión")
      }
    }
  }

  const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

  useEffect(() => {
    if (user && user.role !== "admin") {
      router.push("/dashboard")
    }
  }, [user, router])

  if (user?.role !== "admin") {
    // Return null while redirecting to prevent flash of content or render errors
    return null
  }

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Gestión de Usuarios</h1>
            <p className="text-muted-foreground mt-2">Administra los usuarios del sistema</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => handleOpenDialog()} className="gap-2">
                <Plus className="h-4 w-4" />
                Nuevo Usuario
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px] bg-background">
              <DialogHeader>
                <DialogTitle>{editingUser ? "Editar Usuario" : "Nuevo Usuario"}</DialogTitle>
                <DialogDescription>
                  {editingUser
                    ? "Modifica la información del usuario"
                    : "Completa los datos para crear un nuevo usuario"}
                </DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Nombre completo</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, name: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="Juan Pérez"
                    className={formData.name.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {formData.name.length >= 100 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Correo electrónico</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, email: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="juan@agrorecetas.com"
                    autoComplete="off"
                    className={
                      (formData.email.length >= 100 || (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))) 
                        ? 'border-red-500 focus-visible:ring-red-500' 
                        : ''
                    }
                  />
                  {formData.email.length >= 100 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                  )}
                  {formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) && (
                    <p className="text-xs text-red-500 mt-1">Formato de correo inválido.</p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="password">Contraseña</Label>
                  <Input
                    id="password"
                    name="password"
                    type="password"
                    value={formData.password}
                    onChange={(e) => {
                      if (e.target.value.length <= 50) {
                        setFormData({ ...formData, password: e.target.value })
                      }
                    }}
                    maxLength={50}
                    placeholder={editingUser ? "Dejar en blanco para mantener actual" : "******"}
                    autoComplete="new-password"
                    className={formData.password.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {formData.password.length >= 50 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="role">Rol</Label>
                  <Select
                    value={formData.role}
                    onValueChange={(value: "admin" | "ingeniero") => setFormData({ ...formData, role: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="admin">Administrador</SelectItem>
                      <SelectItem value="ingeniero">Ingeniero</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="status">Estado</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value: "activo" | "inactivo") => setFormData({ ...formData, status: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="activo">Activo</SelectItem>
                      <SelectItem value="inactivo">Inactivo</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button onClick={handleSave}>{editingUser ? "Guardar cambios" : "Crear usuario"}</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Usuarios Registrados</CardTitle>
            <CardDescription>Lista de todos los usuarios del sistema</CardDescription>
            <div className="pt-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="search-users"
                  name="search_term"
                  placeholder="Buscar por nombre o email..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                  autoComplete="off"
                  data-lpignore="true"
                />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Usuario</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Rol</TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {isLoading ? (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                        Cargando usuarios...
                      </TableCell>
                    </TableRow>
                  ) : filteredUsuarios.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                        No se encontraron usuarios
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredUsuarios.map((usuario) => (
                      <TableRow key={usuario.id}>
                        <TableCell>
                          <div className="flex items-center gap-3">
                            <Avatar className="h-8 w-8">
                              <AvatarFallback className="bg-primary/10 text-xs text-primary">
                                {getInitials(usuario.name)}
                              </AvatarFallback>
                            </Avatar>
                            <span className="font-medium text-foreground">{usuario.name}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-muted-foreground">{usuario.email}</TableCell>
                        <TableCell>
                          <Badge variant={usuario.role === "admin" ? "default" : "secondary"} className="capitalize">
                            {usuario.role}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant={usuario.status === "activo" ? "default" : "secondary"} className="capitalize">
                            {usuario.status}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(usuario)}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => handleDelete(usuario.id)}
                              disabled={usuario.id === "1" || usuario.id === "2"}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}