"use client";

import { useEffect, useState } from "react";
import PageLayout from "@/components/layout/PageLayout";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import Card from "@/components/ui/Card";
import Badge from "@/components/ui/Badge";
import Modal from "@/components/ui/Modal";

type Usuario = {
  id: string;
  nombre: string;
  usuario: string;
  rol: string;
  activo: boolean;
  created_at?: string;
};

const ROLES = [
  { value: "administrador", label: "Administrador" },
  { value: "recolector", label: "Recolector" },
  { value: "repartidor", label: "Repartidor / Entregas" },
  { value: "servicio al cliente", label: "Servicio al Cliente" },
  { value: "usuario", label: "Usuario (legacy)" },
];

const API = "/cargoerp/api/usuarios";

export default function UsuariosPage() {
  const [usuarios, setUsuarios] = useState<Usuario[]>([]);
  const [cargando, setCargando] = useState(true);
  const [mensaje, setMensaje] = useState("");

  const [modo, setModo] = useState<"lista" | "formulario">("lista");
  const [editando, setEditando] = useState<Usuario | null>(null);

  const [nombre, setNombre] = useState("");
  const [usuario, setUsuario] = useState("");
  const [password, setPassword] = useState("");
  const [rol, setRol] = useState("recolector");
  const [activo, setActivo] = useState(true);

  const [usuarioAEliminar, setUsuarioAEliminar] = useState<Usuario | null>(null);

  useEffect(() => {
    cargarUsuarios();
  }, []);

  async function cargarUsuarios() {
    setCargando(true);
    setMensaje("");

    try {
      const response = await fetch(API);
      const data = await response.json();

      if (!response.ok) {
        setMensaje(data.error || "Error al cargar usuarios.");
        return;
      }

      setUsuarios(data.usuarios || []);
    } catch (error) {
      console.error(error);
      setMensaje("Error de red al cargar usuarios.");
    } finally {
      setCargando(false);
    }
  }

  function abrirCrear() {
    setEditando(null);
    setNombre("");
    setUsuario("");
    setPassword("");
    setRol("recolector");
    setActivo(true);
    setModo("formulario");
    setMensaje("");
  }

  function abrirEditar(u: Usuario) {
    setEditando(u);
    setNombre(u.nombre);
    setUsuario(u.usuario);
    setPassword("");
    setRol(u.rol);
    setActivo(u.activo);
    setModo("formulario");
    setMensaje("");
  }

  async function guardar(e: React.FormEvent) {
    e.preventDefault();
    setMensaje("");

    if (!nombre.trim() || !usuario.trim()) {
      setMensaje("Nombre y usuario son obligatorios.");
      return;
    }

    if (!editando && !password) {
      setMensaje("La contraseña es obligatoria para nuevos usuarios.");
      return;
    }

    try {
      if (editando) {
        const response = await fetch(`${API}/${editando.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            nombre: nombre.trim(),
            usuario: usuario.trim().toLowerCase(),
            rol,
            activo,
          }),
        });

        const data = await response.json();

        if (!response.ok) {
          setMensaje(data.error || "Error al actualizar usuario.");
          return;
        }
      } else {
        const response = await fetch(API, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            nombre: nombre.trim(),
            usuario: usuario.trim().toLowerCase(),
            password,
            rol,
          }),
        });

        const data = await response.json();

        if (!response.ok) {
          setMensaje(data.error || "Error al crear usuario.");
          return;
        }
      }

      await cargarUsuarios();
      setModo("lista");
    } catch (error) {
      console.error(error);
      setMensaje("Error de red al guardar usuario.");
    }
  }

  async function cambiarPassword(id: string) {
    const nueva = window.prompt("Ingresa la nueva contraseña:");

    if (!nueva) return;

    if (nueva.length < 4) {
      alert("La contraseña debe tener al menos 4 caracteres.");
      return;
    }

    try {
      const response = await fetch(`${API}/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password: nueva }),
      });

      const data = await response.json();

      if (!response.ok) {
        alert(data.error || "Error al cambiar contraseña.");
        return;
      }

      alert("Contraseña actualizada correctamente.");
    } catch (error) {
      console.error(error);
      alert("Error de red al cambiar contraseña.");
    }
  }

  async function cambiarEstado(id: string, nuevoEstado: boolean) {
    const usuarioObj = usuarios.find((u) => u.id === id);

    if (usuarioObj?.usuario === "admin" && !nuevoEstado) {
      alert("No se puede desactivar al administrador principal.");
      return;
    }

    try {
      const response = await fetch(`${API}/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ activo: nuevoEstado }),
      });

      const data = await response.json();

      if (!response.ok) {
        alert(data.error || "Error al cambiar estado.");
        return;
      }

      await cargarUsuarios();
    } catch (error) {
      console.error(error);
      alert("Error de red al cambiar estado.");
    }
  }

  async function eliminarUsuario() {
    if (!usuarioAEliminar) return;

    const id = usuarioAEliminar.id;

    try {
      const response = await fetch(`${API}/${id}`, {
        method: "DELETE",
      });

      const data = await response.json();

      if (!response.ok) {
        alert(data.error || "Error al eliminar usuario.");
        return;
      }

      await cargarUsuarios();
    } catch (error) {
      console.error(error);
      alert("Error de red al eliminar usuario.");
    } finally {
      setUsuarioAEliminar(null);
    }
  }

  function confirmarEliminar(u: Usuario) {
    if (u.usuario === "admin") {
      alert("No se puede eliminar al administrador principal.");
      return;
    }
    setUsuarioAEliminar(u);
  }

  return (
    <PageLayout>
      <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-xl font-black text-[var(--text-primary)] sm:text-2xl">
            Usuarios
          </h1>
          <p className="text-sm text-[var(--text-muted)]">
            Gestión de usuarios y roles del sistema
          </p>
        </div>

        {modo === "lista" && (
          <Button onClick={abrirCrear} leftIcon={<IconPlus />}>
            Nuevo usuario
          </Button>
        )}
      </div>

      {mensaje && (
        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-500">
          {mensaje}
        </div>
      )}

      {modo === "formulario" ? (
        <Card>
          <h2 className="mb-4 text-base font-bold text-[var(--text-primary)]">
            {editando ? "Editar usuario" : "Crear usuario"}
          </h2>

          <form onSubmit={guardar} className="grid gap-4 sm:grid-cols-2">
            <Input
              label="Nombre completo"
              type="text"
              value={nombre}
              onChange={(e) => setNombre(e.target.value)}
              required
            />

            <Input
              label="Usuario"
              type="text"
              value={usuario}
              onChange={(e) => setUsuario(e.target.value)}
              required
            />

            <Input
              label={editando ? "Contraseña (dejar en blanco para no cambiar)" : "Contraseña"}
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              {...(!editando && { required: true })}
            />

            <Select
              label="Rol"
              value={rol}
              onChange={(e) => setRol(e.target.value)}
              options={ROLES}
            />

            <div className="flex items-center gap-3 sm:col-span-2">
              <input
                id="activo"
                type="checkbox"
                checked={activo}
                onChange={(e) => setActivo(e.target.checked)}
                className="h-4 w-4 accent-[var(--accent)]"
              />
              <label htmlFor="activo" className="text-sm text-[var(--text-secondary)]">
                Usuario activo
              </label>
            </div>

            <div className="flex gap-3 sm:col-span-2">
              <Button type="button" variant="secondary" onClick={() => setModo("lista")}>
                Cancelar
              </Button>
              <Button type="submit">
                {editando ? "Guardar cambios" : "Crear usuario"}
              </Button>
            </div>
          </form>
        </Card>
      ) : (
        <Card padding="none">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead className="border-b border-[var(--border)] bg-[var(--bg-sidebar)] text-[var(--text-secondary)]">
                <tr>
                  <th className="px-4 py-3 font-semibold">Nombre</th>
                  <th className="px-4 py-3 font-semibold">Usuario</th>
                  <th className="px-4 py-3 font-semibold">Rol</th>
                  <th className="px-4 py-3 font-semibold">Estado</th>
                  <th className="px-4 py-3 text-right font-semibold">Acciones</th>
                </tr>
              </thead>

              <tbody className="divide-y divide-[var(--border)]">
                {cargando ? (
                  <tr>
                    <td colSpan={5} className="px-4 py-8 text-center text-[var(--text-muted)]">
                      Cargando usuarios...
                    </td>
                  </tr>
                ) : usuarios.length === 0 ? (
                  <tr>
                    <td colSpan={5} className="px-4 py-8 text-center text-[var(--text-muted)]">
                      No hay usuarios registrados.
                    </td>
                  </tr>
                ) : (
                  usuarios.map((u) => (
                    <tr key={u.id} className="hover:bg-[var(--card-bg-hover)]">
                      <td className="px-4 py-3 text-[var(--text-primary)]">{u.nombre}</td>
                      <td className="px-4 py-3 text-[var(--text-secondary)]">{u.usuario}</td>
                      <td className="px-4 py-3 capitalize text-[var(--text-secondary)]">{u.rol}</td>
                      <td className="px-4 py-3">
                        {u.activo ? (
                          <Badge variant="success" size="sm">Activo</Badge>
                        ) : (
                          <Badge variant="danger" size="sm">Inactivo</Badge>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex flex-wrap justify-end gap-2">
                          <Button size="sm" variant="secondary" onClick={() => abrirEditar(u)}>
                            Editar
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => cambiarPassword(u.id)}>
                            Contraseña
                          </Button>
                          <Button
                            size="sm"
                            variant={u.activo ? "ghost" : "outline"}
                            onClick={() => cambiarEstado(u.id, !u.activo)}
                          >
                            {u.activo ? "Desactivar" : "Activar"}
                          </Button>
                          {u.usuario !== "admin" && (
                            <Button size="sm" variant="danger" onClick={() => confirmarEliminar(u)}>
                              Eliminar
                            </Button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      <Modal
        isOpen={!!usuarioAEliminar}
        onClose={() => setUsuarioAEliminar(null)}
        title="Eliminar usuario"
        description={`¿Seguro que deseas eliminar a ${usuarioAEliminar?.nombre}? Esta acción no se puede deshacer.`}
        footer={
          <>
            <Button variant="ghost" onClick={() => setUsuarioAEliminar(null)}>
              Cancelar
            </Button>
            <Button variant="danger" onClick={eliminarUsuario}>
              Eliminar
            </Button>
          </>
        }
      >
        {null}
      </Modal>
    </PageLayout>
  );
}

function IconPlus() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
    </svg>
  );
}