"use client"

import { useEffect, useState, useCallback } from "react"
import { useRouter } from "next/navigation"
import { DashboardLayout } from "@/components/dashboard-layout"
import { useAuth } from "@/lib/auth-context"
import { apiFetch } from "@/lib/apiutils"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from "@/components/ui/dialog"
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel,
  AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
  AlertDialogHeader, AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select"
import { UserPlus, Pencil, Trash2, RefreshCw, Shield, User } from "lucide-react"
import { cn } from "@/lib/utils"

interface SysUser {
  id: number
  name: string
  email: string
  role: "admin" | "operador"
  created_at: string
}

interface UserForm {
  name: string
  email: string
  password: string
  role: "admin" | "operador"
}

const EMPTY_FORM: UserForm = { name: "", email: "", password: "", role: "operador" }

export default function UsuariosPage() {
  const { user: me } = useAuth()
  const router = useRouter()

  const [users, setUsers]           = useState<SysUser[]>([])
  const [loading, setLoading]       = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editTarget, setEditTarget] = useState<SysUser | null>(null)
  const [form, setForm]             = useState<UserForm>(EMPTY_FORM)
  const [saving, setSaving]         = useState(false)
  const [errors, setErrors]         = useState<Partial<UserForm>>({})
  const [deleteTarget, setDeleteTarget] = useState<SysUser | null>(null)

  // Only admins
  useEffect(() => {
    if (me && me.role !== "admin") router.replace("/dashboard")
  }, [me, router])

  const fetchUsers = useCallback(async () => {
    setLoading(true)
    try {
      const res = await apiFetch("/users")
      if (res.ok) setUsers(await res.json())
    } catch (e) {
      console.error(e)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { fetchUsers() }, [fetchUsers])

  // ── Dialog helpers ────────────────────────────────────────────────────
  const openCreate = () => {
    setEditTarget(null)
    setForm(EMPTY_FORM)
    setErrors({})
    setDialogOpen(true)
  }

  const openEdit = (u: SysUser) => {
    setEditTarget(u)
    setForm({ name: u.name, email: u.email, password: "", role: u.role })
    setErrors({})
    setDialogOpen(true)
  }

  const validate = (): boolean => {
    const e: Partial<UserForm> = {}
    if (!form.name.trim())  e.name  = "El nombre es obligatorio."
    if (!form.email.trim()) e.email = "El correo es obligatorio."
    if (!editTarget && form.password.length < 8)
      e.password = "La contraseña debe tener al menos 8 caracteres."
    setErrors(e)
    return Object.keys(e).length === 0
  }

  const handleSave = async () => {
    if (!validate()) return
    setSaving(true)
    try {
      const body: Record<string, string> = {
        name: form.name,
        email: form.email,
        role: form.role,
        status: "active",
      }
      if (form.password) body.password = form.password

      const res = editTarget
        ? await apiFetch(`/users/${editTarget.id}`, { method: "PUT", body: JSON.stringify(body) })
        : await apiFetch("/users", { method: "POST", body: JSON.stringify(body) })

      if (res.ok) {
        setDialogOpen(false)
        fetchUsers()
      } else {
        const data = await res.json()
        if (data.errors?.email) setErrors((p) => ({ ...p, email: data.errors.email[0] }))
      }
    } catch (e) {
      console.error(e)
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    try {
      await apiFetch(`/users/${deleteTarget.id}`, { method: "DELETE" })
      setDeleteTarget(null)
      fetchUsers()
    } catch (e) {
      console.error(e)
    }
  }

  // ── Render ────────────────────────────────────────────────────────────
  return (
    <DashboardLayout>
      <div className="space-y-5">

        {/* Header */}
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-xl font-bold text-foreground">Usuarios del Sistema</h2>
            <p className="text-sm text-muted-foreground">
              {loading ? "Cargando..." : `${users.length} usuario${users.length !== 1 ? "s" : ""} registrado${users.length !== 1 ? "s" : ""}`}
            </p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={fetchUsers} disabled={loading}>
              <RefreshCw className={cn("mr-2 h-4 w-4", loading && "animate-spin")} />
              Actualizar
            </Button>
            <Button size="sm" id="btn-nuevo-usuario" onClick={openCreate}>
              <UserPlus className="mr-2 h-4 w-4" />
              Nuevo Usuario
            </Button>
          </div>
        </div>

        {/* Table */}
        <Card className="border-border/60 shadow-sm overflow-hidden">
          <CardContent className="p-0">
            {loading ? (
              <div className="py-16 text-center text-muted-foreground">Cargando usuarios...</div>
            ) : users.length === 0 ? (
              <div className="py-16 text-center text-muted-foreground">No hay usuarios registrados.</div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border/60 bg-muted/30">
                      <th className="px-5 py-3 text-left text-xs font-medium text-muted-foreground uppercase">Nombre</th>
                      <th className="px-5 py-3 text-left text-xs font-medium text-muted-foreground uppercase">Email</th>
                      <th className="px-5 py-3 text-center text-xs font-medium text-muted-foreground uppercase">Rol</th>
                      <th className="px-5 py-3 text-center text-xs font-medium text-muted-foreground uppercase">Creado</th>
                      <th className="px-5 py-3 text-center text-xs font-medium text-muted-foreground uppercase">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border/40">
                    {users.map((u) => (
                      <tr key={u.id} className="hover:bg-muted/20 transition-colors">
                        <td className="px-5 py-3 font-medium text-foreground">
                          <div className="flex items-center gap-2">
                            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-bold">
                              {u.name.charAt(0).toUpperCase()}
                            </div>
                            {u.name}
                            {u.id === me?.id && (
                              <Badge variant="outline" className="text-[10px] px-1.5 py-0">Tú</Badge>
                            )}
                          </div>
                        </td>
                        <td className="px-5 py-3 text-muted-foreground">{u.email}</td>
                        <td className="px-5 py-3 text-center">
                          {u.role === "admin" ? (
                            <Badge className="gap-1 bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300 hover:bg-violet-100">
                              <Shield className="h-3 w-3" /> Admin
                            </Badge>
                          ) : (
                            <Badge variant="secondary" className="gap-1">
                              <User className="h-3 w-3" /> Operador
                            </Badge>
                          )}
                        </td>
                        <td className="px-5 py-3 text-center text-xs text-muted-foreground">
                          {new Date(u.created_at).toLocaleDateString("es-AR")}
                        </td>
                        <td className="px-5 py-3 text-center">
                          <div className="flex justify-center gap-1">
                            <Button
                              id={`edit-user-${u.id}`}
                              size="icon" variant="ghost" className="h-8 w-8"
                              onClick={() => openEdit(u)}
                            >
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              id={`delete-user-${u.id}`}
                              size="icon" variant="ghost"
                              className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                              onClick={() => setDeleteTarget(u)}
                              disabled={u.id === me?.id}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* ── Create/Edit Dialog ── */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editTarget ? "Editar Usuario" : "Nuevo Usuario"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label htmlFor="u-name">Nombre completo</Label>
              <Input
                id="u-name" placeholder="Juan Pérez"
                value={form.name}
                onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                className={cn(errors.name && "border-destructive")}
              />
              {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="u-email">Correo electrónico</Label>
              <Input
                id="u-email" type="email" placeholder="usuario@belensa.com.ar"
                value={form.email}
                onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                className={cn(errors.email && "border-destructive")}
              />
              {errors.email && <p className="text-xs text-destructive">{errors.email}</p>}
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="u-password">
                Contraseña {editTarget && <span className="text-muted-foreground text-xs">(dejar vacío para no cambiar)</span>}
              </Label>
              <Input
                id="u-password" type="password"
                placeholder={editTarget ? "••••••••" : "Mínimo 8 caracteres"}
                value={form.password}
                onChange={(e) => setForm((p) => ({ ...p, password: e.target.value }))}
                className={cn(errors.password && "border-destructive")}
              />
              {errors.password && <p className="text-xs text-destructive">{errors.password}</p>}
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="u-role">Rol</Label>
              <Select
                value={form.role}
                onValueChange={(v) => setForm((p) => ({ ...p, role: v as "admin" | "operador" }))}
              >
                <SelectTrigger id="u-role">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="admin">Administrador</SelectItem>
                  <SelectItem value="operador">Operador</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancelar</Button>
            <Button id="btn-guardar-usuario" onClick={handleSave} disabled={saving}>
              {saving ? "Guardando..." : editTarget ? "Guardar cambios" : "Crear usuario"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Confirm Delete Dialog ── */}
      <AlertDialog open={!!deleteTarget} onOpenChange={(o) => !o && setDeleteTarget(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>¿Eliminar usuario?</AlertDialogTitle>
            <AlertDialogDescription>
              Se eliminará permanentemente a <strong>{deleteTarget?.name}</strong> ({deleteTarget?.email}).
              Esta acción no se puede deshacer.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive hover:bg-destructive/90"
              onClick={handleDelete}
            >
              Eliminar
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </DashboardLayout>
  )
}