"use client";

import { useCallback, useEffect, useState } from "react";

type UserRole = "user" | "admin" | "customer";

type AdminUser = {
  id: string;
  email: string;
  name: string;
  role: UserRole;
  createdAt: string;
  updatedAt: string;
  productsCount: number;
  purchasesCount: number;
  salesAsBuyerCount: number;
};

type Stats = {
  total: number;
  admins: number;
  sellers: number;
  customers: number;
};

const ROLE_LABEL: Record<UserRole, string> = {
  admin: "Administrador",
  user: "Vendedor",
  customer: "Comprador",
};

const ROLE_CLASS: Record<UserRole, string> = {
  admin: "ok",
  user: "pend",
  customer: "off",
};

function fmtDate(iso: string) {
  try {
    return new Date(iso).toLocaleString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

export default function UsersAdminPanel({
  currentUserId,
  onToast,
}: {
  currentUserId: string;
  onToast: (msg: string) => void;
}) {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<"" | UserRole>("");
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState<"create" | "edit" | "password" | null>(null);
  const [selected, setSelected] = useState<AdminUser | null>(null);
  const [saving, setSaving] = useState(false);

  const [formName, setFormName] = useState("");
  const [formEmail, setFormEmail] = useState("");
  const [formRole, setFormRole] = useState<UserRole>("user");
  const [formPassword, setFormPassword] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const q = new URLSearchParams();
      if (search.trim()) q.set("search", search.trim());
      if (roleFilter) q.set("role", roleFilter);
      const res = await fetch(`/api/admin/users?${q}`);
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro");
      setUsers(data.users || []);
      setTotal(data.total || 0);
      setStats(data.stats || null);
    } catch (e) {
      onToast(e instanceof Error ? e.message : "Erro ao carregar usuários");
      setUsers([]);
    } finally {
      setLoading(false);
    }
  }, [search, roleFilter, onToast]);

  useEffect(() => {
    const t = setTimeout(load, search ? 300 : 0);
    return () => clearTimeout(t);
  }, [load, search]);

  function openCreate() {
    setSelected(null);
    setFormName("");
    setFormEmail("");
    setFormRole("user");
    setFormPassword("");
    setModal("create");
  }

  function openEdit(user: AdminUser) {
    setSelected(user);
    setFormName(user.name);
    setFormEmail(user.email);
    setFormRole(user.role);
    setFormPassword("");
    setModal("edit");
  }

  function openPassword(user: AdminUser) {
    setSelected(user);
    setFormPassword("");
    setModal("password");
  }

  async function saveCreate() {
    setSaving(true);
    try {
      const res = await fetch("/api/admin/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: formName,
          email: formEmail,
          password: formPassword,
          role: formRole,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro");
      onToast("Usuário criado");
      setModal(null);
      load();
    } catch (e) {
      onToast(e instanceof Error ? e.message : "Erro ao criar");
    } finally {
      setSaving(false);
    }
  }

  async function saveEdit() {
    if (!selected) return;
    setSaving(true);
    try {
      const res = await fetch(`/api/admin/users/${selected.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: formName,
          email: formEmail,
          role: formRole,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro");
      onToast("Usuário atualizado");
      setModal(null);
      load();
    } catch (e) {
      onToast(e instanceof Error ? e.message : "Erro ao salvar");
    } finally {
      setSaving(false);
    }
  }

  async function savePassword() {
    if (!selected) return;
    setSaving(true);
    try {
      const res = await fetch(`/api/admin/users/${selected.id}/reset-password`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password: formPassword }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro");
      onToast("Senha redefinida");
      setModal(null);
    } catch (e) {
      onToast(e instanceof Error ? e.message : "Erro ao redefinir senha");
    } finally {
      setSaving(false);
    }
  }

  async function removeUser(user: AdminUser) {
    if (!confirm(`Excluir ${user.name} (${user.email})? Esta ação não pode ser desfeita.`)) return;
    try {
      const res = await fetch(`/api/admin/users/${user.id}`, { method: "DELETE" });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro");
      onToast("Usuário excluído");
      load();
    } catch (e) {
      onToast(e instanceof Error ? e.message : "Erro ao excluir");
    }
  }

  return (
    <>
      {stats ? (
        <div className="mcards" style={{ marginBottom: 20 }}>
          <div className="mc">
            <div className="top">
              <span className="lab">Total de usuários</span>
              <span className="ic">👥</span>
            </div>
            <div className="val">{stats.total}</div>
          </div>
          <div className="mc">
            <div className="top">
              <span className="lab">Administradores</span>
              <span className="ic">🛡️</span>
            </div>
            <div className="val">{stats.admins}</div>
          </div>
          <div className="mc">
            <div className="top">
              <span className="lab">Vendedores</span>
              <span className="ic">💼</span>
            </div>
            <div className="val">{stats.sellers}</div>
          </div>
          <div className="mc">
            <div className="top">
              <span className="lab">Compradores</span>
              <span className="ic">🛒</span>
            </div>
            <div className="val">{stats.customers}</div>
          </div>
        </div>
      ) : null}

      <div className="panel">
        <div className="ph">
          <h3>Usuários cadastrados ({total})</h3>
          <button type="button" className="b lime sm" onClick={openCreate}>
            + Novo usuário
          </button>
        </div>

        <div className="users-filters">
          <input
            type="search"
            placeholder="Buscar por nome ou e-mail…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
          <select value={roleFilter} onChange={(e) => setRoleFilter(e.target.value as "" | UserRole)}>
            <option value="">Todos os perfis</option>
            <option value="admin">Administradores</option>
            <option value="user">Vendedores</option>
            <option value="customer">Compradores</option>
          </select>
        </div>

        {loading ? (
          <p style={{ padding: 24, color: "var(--mut)" }}>Carregando usuários…</p>
        ) : users.length === 0 ? (
          <p style={{ padding: 24, color: "var(--mut)", textAlign: "center" }}>
            Nenhum usuário encontrado.
          </p>
        ) : (
          <table className="tbl users-tbl">
            <thead>
              <tr>
                <th>Nome</th>
                <th>E-mail</th>
                <th>Perfil</th>
                <th>Produtos</th>
                <th>Compras</th>
                <th>Cadastro</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.id}>
                  <td>
                    <b>{u.name}</b>
                    {u.id === currentUserId ? (
                      <span className="tag ok" style={{ marginLeft: 8, fontSize: ".7rem" }}>
                        você
                      </span>
                    ) : null}
                  </td>
                  <td>{u.email}</td>
                  <td>
                    <span className={`tag ${ROLE_CLASS[u.role]} dot`}>{ROLE_LABEL[u.role]}</span>
                  </td>
                  <td>{u.productsCount}</td>
                  <td>{u.purchasesCount}</td>
                  <td style={{ color: "var(--mut)", fontSize: ".85rem" }}>{fmtDate(u.createdAt)}</td>
                  <td>
                    <div className="users-acts">
                      <button type="button" className="b ghost sm" onClick={() => openEdit(u)}>
                        Editar
                      </button>
                      <button type="button" className="b ghost sm" onClick={() => openPassword(u)}>
                        Senha
                      </button>
                      {u.id !== currentUserId ? (
                        <button type="button" className="b ghost sm danger" onClick={() => removeUser(u)}>
                          Excluir
                        </button>
                      ) : null}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {modal ? (
        <div className="ov open" onClick={() => !saving && setModal(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <button type="button" className="x" onClick={() => setModal(null)} disabled={saving}>
              ×
            </button>
            <h3>
              {modal === "create"
                ? "Novo usuário"
                : modal === "edit"
                  ? "Editar usuário"
                  : "Redefinir senha"}
            </h3>
            <div style={{ marginTop: 16 }}>
              {modal !== "password" ? (
                <>
                  <div className="kv">
                    <label>Nome</label>
                    <input value={formName} onChange={(e) => setFormName(e.target.value)} />
                  </div>
                  <div className="kv">
                    <label>E-mail</label>
                    <input
                      type="email"
                      value={formEmail}
                      onChange={(e) => setFormEmail(e.target.value)}
                    />
                  </div>
                  <div className="kv">
                    <label>Perfil</label>
                    <select value={formRole} onChange={(e) => setFormRole(e.target.value as UserRole)}>
                      <option value="customer">Comprador</option>
                      <option value="user">Vendedor</option>
                      <option value="admin">Administrador</option>
                    </select>
                  </div>
                  {modal === "create" ? (
                    <div className="kv">
                      <label>Senha inicial</label>
                      <input
                        type="password"
                        value={formPassword}
                        onChange={(e) => setFormPassword(e.target.value)}
                        placeholder="Mínimo 6 caracteres"
                      />
                    </div>
                  ) : null}
                </>
              ) : (
                <>
                  <p style={{ color: "var(--mut)", fontSize: ".88rem", marginBottom: 14 }}>
                    Nova senha para <b>{selected?.name}</b> ({selected?.email})
                  </p>
                  <div className="kv">
                    <label>Nova senha</label>
                    <input
                      type="password"
                      value={formPassword}
                      onChange={(e) => setFormPassword(e.target.value)}
                      placeholder="Mínimo 6 caracteres"
                    />
                  </div>
                </>
              )}
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 22, justifyContent: "flex-end" }}>
              <button type="button" className="b ghost" onClick={() => setModal(null)} disabled={saving}>
                Cancelar
              </button>
              <button
                type="button"
                className="b lime"
                disabled={saving}
                onClick={() => {
                  if (modal === "create") saveCreate();
                  else if (modal === "edit") saveEdit();
                  else savePassword();
                }}
              >
                {saving ? "Salvando…" : "Salvar"}
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
}