"use client";

import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Header from "@/components/Header";
import CadastroProdutoWizard from "@/components/CadastroProdutoWizard";

const CadastrarMedicamentos = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [userData, setUserData] = useState<any>(null);

  useEffect(() => {
    const verificarAutenticacao = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          router.push("/login");
          return;
        }

        // Verificar se o token é válido fazendo uma requisição ao BFF
        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: "GET",
          headers: {
            "accept": "application/json",
            "Authorization": `Bearer ${storedToken}`,
          },
        });

        if (!response.ok) {
          localStorage.removeItem('access_token');
          router.push("/login");
          return;
        }

        // Obter dados do usuário
        const userResponse = await response.json();
        setUserData(userResponse.data || userResponse);

      } catch (error) {
        console.error("❌ Erro ao verificar autenticação:", error);
        router.push("/login");
      } finally {
        setLoading(false);
      }
    };

    verificarAutenticacao();
  }, [router]);

  return (
    <div className="min-h-screen bg-gray-50">
      <Header
        user={userData}
        title="Cadastrar produto"
        subtitle="Complete as etapas para liberar o item no catalogo e na venda"
        showBackButton
      />

      <main className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
        <section className="space-y-6">
          <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            <h1 className="text-2xl font-semibold text-gray-900">Novo cadastro de produto</h1>
            <p className="mt-2 text-sm text-gray-600">
              O fluxo e dividido em duas etapas: catalogo, venda/estoque. Informe os dados obrigatorios em cada aba para concluir o processo.
            </p>
          </div>

          <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            {loading ? (
              <div className="space-y-4">
                <div className="h-4 w-32 rounded bg-gray-200 animate-pulse" />
                <div className="h-3 w-full rounded bg-gray-200 animate-pulse" />
                <div className="h-3 w-3/4 rounded bg-gray-200 animate-pulse" />
              </div>
            ) : (
              <CadastroProdutoWizard />
            )}
          </div>
        </section>
      </main>
    </div>
  );
};

export default CadastrarMedicamentos;

