'use client';

import { useState, useEffect } from 'react';
import { account, databases, ID, Query } from '@/lib/appwrite';
import { Models } from 'appwrite';

export default function ConfigurarEmpresa() {
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

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

  const carregarUsuario = async () => {
    try {
      const currentUser = await account.get();
      setUser(currentUser);
    } catch (error) {
      setMessage('❌ Erro: Você precisa estar logado');
    }
  };

  const configurarEmpresa = async () => {
    if (!user) {
      setMessage('❌ Usuário não carregado');
      return;
    }

    try {
      setLoading(true);
      setMessage('⏳ Configurando empresa...');

      const databaseId = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
      const empresaCollectionId = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID!;
      const usuariosCollectionId = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID!;

      // 1. Criar empresa padrão
      const empresaData = {
        cnpj: "12345678000199",
        "razao-social": "Farmácia SaveInMed Demo",
        "nome-fantasia": "SaveInMed Demo"
      };

      console.log('Criando empresa padrão:', empresaData);

      const empresaResponse = await databases.createDocument(
        databaseId,
        empresaCollectionId,
        ID.unique(),
        empresaData
      );

      console.log('Empresa criada:', empresaResponse.$id);

      // 2. Buscar documento do usuário
      const userQuery = await databases.listDocuments(
        databaseId,
        usuariosCollectionId,
        [Query.equal("auth-id-appwrite", user.$id), Query.limit(1)]
      );

      if (userQuery.documents.length === 0) {
        setMessage('❌ Usuário não encontrado na base de dados');
        return;
      }

      const userDoc = userQuery.documents[0];

      // 3. Associar empresa ao usuário
      await databases.updateDocument(
        databaseId,
        usuariosCollectionId,
        userDoc.$id,
        {
          empresas_array: [empresaData['razao-social']]
        }
      );

      setMessage('✅ Empresa configurada com sucesso! Agora você pode cadastrar medicamentos.');
      
      // Limpar cache para forçar reload do contexto
      localStorage.removeItem('empresaId');
      
      // Redirecionar após 3 segundos
      setTimeout(() => {
        window.location.href = '/dashboard/cadastrar-medicamentos';
      }, 3000);

    } catch (error: any) {
      console.error('Erro:', error);
      setMessage(`❌ Erro: ${error.message || error}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full">
        <h1 className="text-2xl font-bold text-center mb-6">Configurar Empresa</h1>
        
        {message && (
          <div className={`p-4 rounded mb-6 text-center ${
            message.includes('✅') ? 'bg-green-100 text-green-700' : 
            message.includes('❌') ? 'bg-red-100 text-red-700' : 
            'bg-blue-100 text-blue-700'
          }`}>
            {message}
          </div>
        )}

        {user ? (
          <div className="text-center space-y-4">
            <p className="text-gray-600">
              Usuário: <strong>{user.email}</strong>
            </p>
            
            <button
              onClick={configurarEmpresa}
              disabled={loading}
              className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {loading ? 'Configurando...' : '🏭 Configurar Empresa Padrão'}
            </button>
            
            <p className="text-sm text-gray-500">
              Isso criará uma empresa de demonstração e permitirá cadastrar medicamentos.
            </p>
          </div>
        ) : (
          <div className="text-center">
            <p className="text-gray-600 mb-4">Carregando usuário...</p>
            <button
              onClick={() => window.location.href = '/login'}
              className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700"
            >
              Ir para Login
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
