import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  onSnapshot,
  query,
  timestamp
} from 'firebase/firestore';
import { 
  User, 
  Home, 
  MapPin, 
  DollarSign, 
  FileText, 
  CheckCircle2, 
  LogOut, 
  Plus, 
  List,
  Calendar,
  Phone,
  LayoutDashboard,
  ShieldCheck
} from 'lucide-react';

// Configuração Firebase (Injetada pelo ambiente)
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'master-imoveis-captacao';

const BROKERS = ["Douglas", "Adair", "Wilian", "José Wilton", "Aline"];
const PROPERTY_TYPES = ["Casa", "Apartamento", "Lote", "Chácara", "Ponto comercial", "Outro"];
const PAYMENT_METHODS = ["À vista", "Entrada + parcelamento", "Financiamento bancário", "Aceita veículo"];

export default function App() {
  const [user, setUser] = useState(null);
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [view, setView] = useState('form'); // 'form' ou 'list'
  const [captures, setCaptures] = useState([]);
  const [loading, setLoading] = useState(false);
  const [successMsg, setSuccessMsg] = useState('');

  // Estado do Formulário
  const [formData, setFormData] = useState({
    corretor: '',
    dataCaptacao: new Date().toISOString().split('T')[0],
    exclusividade: 'Não',
    anuncio: 'Sim',
    proprietarioNome: '',
    proprietarioContato: '',
    bairro: '',
    cidade: 'SJE',
    tipoImovel: 'Casa',
    medidaArea: '',
    finalidade: 'Venda',
    valor: '',
    condicoesPagamento: [],
    detalhes: '',
    marketingResponsavel: '',
    periodoRepost: '30'
  });

  // 1. Autenticação (Regra 3)
  useEffect(() => {
    const initAuth = async () => {
      // Usaremos uma senha simples para o "Login" simulando acesso restrito
      // Na prática, o Firebase Auth gerencia a sessão.
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Busca de dados (Regra 2)
  useEffect(() => {
    if (!user) return;
    const q = collection(db, 'artifacts', appId, 'public', 'data', 'captures');
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setCaptures(data);
    }, (err) => console.error("Erro ao buscar:", err));
    return () => unsubscribe();
  }, [user]);

  const handleLogin = async (e) => {
    e.preventDefault();
    if (password === '1234') { // Senha simples definida para o sistema
      try {
        await signInAnonymously(auth);
      } catch (err) {
        setLoginError("Erro ao conectar ao servidor.");
      }
    } else {
      setLoginError("Senha incorreta.");
    }
  };

  const handleTogglePayment = (method) => {
    setFormData(prev => ({
      ...prev,
      condicoesPagamento: prev.condicoesPagamento.includes(method)
        ? prev.condicoesPagamento.filter(m => m !== method)
        : [...prev.condicoesPagamento, method]
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    setLoading(true);
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'captures'), {
        ...formData,
        createdAt: new Date().toISOString(),
        userId: user.uid
      });
      setSuccessMsg("Captação salva com sucesso!");
      setTimeout(() => setSuccessMsg(''), 3000);
      setFormData({
        ...formData,
        proprietarioNome: '',
        proprietarioContato: '',
        bairro: '',
        medidaArea: '',
        valor: '',
        detalhes: '',
        condicoesPagamento: []
      });
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  if (!user) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-slate-200">
          <div className="flex flex-col items-center mb-8">
            <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-4">
              <ShieldCheck className="text-white w-8 h-8" />
            </div>
            <h1 className="text-2xl font-bold text-slate-800">Master Imóveis</h1>
            <p className="text-slate-500">Sistema Interno de Captação</p>
          </div>
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Senha de Acesso</label>
              <input 
                type="password" 
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                placeholder="Digite a senha..."
              />
            </div>
            {loginError && <p className="text-red-500 text-sm">{loginError}</p>}
            <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors">
              Entrar no Sistema
            </button>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 px-4 py-3 flex justify-between items-center sticky top-0 z-10 shadow-sm">
        <div className="flex items-center gap-2">
          <div className="bg-blue-600 p-1.5 rounded-lg">
            <Home className="text-white w-5 h-5" />
          </div>
          <span className="font-bold text-slate-800 hidden sm:inline">Master Imóveis</span>
        </div>
        
        <nav className="flex bg-slate-100 p-1 rounded-xl">
          <button 
            onClick={() => setView('form')}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${view === 'form' ? 'bg-white shadow text-blue-600' : 'text-slate-600 hover:text-slate-900'}`}
          >
            <Plus className="w-4 h-4" /> Novo
          </button>
          <button 
            onClick={() => setView('list')}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${view === 'list' ? 'bg-white shadow text-blue-600' : 'text-slate-600 hover:text-slate-900'}`}
          >
            <List className="w-4 h-4" /> Lista
          </button>
        </nav>

        <button onClick={() => auth.signOut()} className="text-slate-400 hover:text-red-500 transition-colors">
          <LogOut className="w-5 h-5" />
        </button>
      </header>

      <main className="flex-1 p-4 sm:p-6 max-w-4xl mx-auto w-full">
        {successMsg && (
          <div className="mb-4 bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-center gap-2 animate-bounce">
            <CheckCircle2 className="w-5 h-5" /> {successMsg}
          </div>
        )}

        {view === 'form' ? (
          <form onSubmit={handleSubmit} className="space-y-6 pb-12">
            {/* Seção 1: Corretor e Info Base */}
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 space-y-4">
              <div className="flex items-center gap-2 text-blue-600 font-semibold border-b border-slate-100 pb-2">
                <User className="w-5 h-5" /> Informações do Corretor
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Corretor Responsável</label>
                  <select 
                    required
                    value={formData.corretor}
                    onChange={e => setFormData({...formData, corretor: e.target.value})}
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">Selecione...</option>
                    {BROKERS.map(b => <option key={b} value={b}>{b}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Data da Captação</label>
                  <input 
                    type="date"
                    value={formData.dataCaptacao}
                    onChange={e => setFormData({...formData, dataCaptacao: e.target.value})}
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4 pt-2">
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Exclusividade?</label>
                  <div className="flex gap-2">
                    {['Sim', 'Não'].map(opt => (
                      <button
                        key={opt}
                        type="button"
                        onClick={() => setFormData({...formData, exclusividade: opt})}
                        className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-all ${formData.exclusividade === opt ? 'bg-blue-600 border-blue-600 text-white' : 'bg-white border-slate-200 text-slate-600'}`}
                      >
                        {opt}
                      </button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Anunciar?</label>
                  <div className="flex gap-2">
                    {['Sim', 'Não'].map(opt => (
                      <button
                        key={opt}
                        type="button"
                        onClick={() => setFormData({...formData, anuncio: opt})}
                        className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-all ${formData.anuncio === opt ? 'bg-blue-600 border-blue-600 text-white' : 'bg-white border-slate-200 text-slate-600'}`}
                      >
                        {opt}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Seção 2: Proprietário */}
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 space-y-4">
              <div className="flex items-center gap-2 text-blue-600 font-semibold border-b border-slate-100 pb-2">
                <User className="w-5 h-5" /> Dados do Proprietário
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Nome Completo</label>
                  <input 
                    required
                    type="text"
                    value={formData.proprietarioNome}
                    onChange={e => setFormData({...formData, proprietarioNome: e.target.value})}
                    placeholder="Nome do cliente"
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Contato (WhatsApp)</label>
                  <input 
                    required
                    type="text"
                    value={formData.proprietarioContato}
                    onChange={e => setFormData({...formData, proprietarioContato: e.target.value})}
                    placeholder="(00) 00000-0000"
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>

            {/* Seção 3: Imóvel */}
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 space-y-4">
              <div className="flex items-center gap-2 text-blue-600 font-semibold border-b border-slate-100 pb-2">
                <MapPin className="w-5 h-5" /> Dados do Imóvel
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Cidade</label>
                  <input 
                    type="text"
                    value={formData.cidade}
                    onChange={e => setFormData({...formData, cidade: e.target.value})}
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Bairro</label>
                  <input 
                    type="text"
                    value={formData.bairro}
                    onChange={e => setFormData({...formData, bairro: e.target.value})}
                    placeholder="Ex: Residencial Paraíso"
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Tipo do Imóvel</label>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  {PROPERTY_TYPES.map(type => (
                    <button
                      key={type}
                      type="button"
                      onClick={() => setFormData({...formData, tipoImovel: type})}
                      className={`py-2 px-3 rounded-lg text-sm text-left border transition-all ${formData.tipoImovel === type ? 'bg-blue-50 border-blue-400 text-blue-700 font-bold' : 'bg-white border-slate-200 text-slate-600'}`}
                    >
                      {type}
                    </button>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Área Total</label>
                  <input 
                    type="text"
                    value={formData.medidaArea}
                    onChange={e => setFormData({...formData, medidaArea: e.target.value})}
                    placeholder="Ex: 200m²"
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Valor Pedido (R$)</label>
                  <input 
                    type="text"
                    value={formData.valor}
                    onChange={e => setFormData({...formData, valor: e.target.value})}
                    placeholder="950.000,00"
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg font-bold text-blue-600 outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>

            {/* Seção 4: Pagamento e Detalhes */}
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 space-y-4">
              <div className="flex items-center gap-2 text-blue-600 font-semibold border-b border-slate-100 pb-2">
                <DollarSign className="w-5 h-5" /> Condições e Observações
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">Formas de Pagamento Aceitas</label>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                  {PAYMENT_METHODS.map(method => (
                    <label key={method} className="flex items-center gap-3 p-3 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
                      <input 
                        type="checkbox"
                        checked={formData.condicoesPagamento.includes(method)}
                        onChange={() => handleTogglePayment(method)}
                        className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                      />
                      <span className="text-sm text-slate-700 font-medium">{method}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Observações do Imóvel (Quartos, Lazer, etc)</label>
                <textarea 
                  rows="4"
                  value={formData.detalhes}
                  onChange={e => setFormData({...formData, detalhes: e.target.value})}
                  placeholder="Ex: 3 quartos sendo 1 suíte, Área Gourmet com Hidro, Garagem 2 carros..."
                  className="w-full p-3 bg-slate-50 border border-slate-300 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
                ></textarea>
              </div>
            </div>

            <button 
              disabled={loading}
              className={`w-full py-4 rounded-2xl text-white font-bold text-lg shadow-lg flex items-center justify-center gap-2 transition-all ${loading ? 'bg-slate-400' : 'bg-blue-600 hover:bg-blue-700 active:scale-[0.98]'}`}
            >
              {loading ? "Salvando..." : (
                <>
                  <CheckCircle2 className="w-6 h-6" /> Salvar Captação
                </>
              )}
            </button>
          </form>
        ) : (
          /* Lista de Captações */
          <div className="space-y-4 pb-12">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-slate-800">Captações Recentes</h2>
              <span className="text-sm text-slate-500">{captures.length} imóveis cadastrados</span>
            </div>
            
            {captures.length === 0 ? (
              <div className="bg-white p-12 rounded-3xl border-2 border-dashed border-slate-200 flex flex-col items-center text-slate-400">
                <LayoutDashboard className="w-12 h-12 mb-2 opacity-20" />
                <p>Nenhuma captação encontrada.</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-4">
                {[...captures].reverse().map(cap => (
                  <div key={cap.id} className="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 hover:border-blue-300 transition-colors">
                    <div className="flex justify-between items-start mb-3">
                      <div>
                        <span className="text-xs font-bold text-blue-600 uppercase tracking-tighter bg-blue-50 px-2 py-1 rounded">
                          {cap.tipoImovel} - {cap.finalidade}
                        </span>
                        <h3 className="text-lg font-bold text-slate-800 mt-1">{cap.bairro}, {cap.cidade}</h3>
                      </div>
                      <div className="text-right">
                        <p className="text-xl font-black text-blue-700">R$ {cap.valor}</p>
                        <p className="text-xs text-slate-400 flex items-center gap-1 justify-end">
                          <Calendar className="w-3 h-3" /> {new Date(cap.createdAt).toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                    
                    <div className="grid grid-cols-2 gap-y-2 text-sm border-t border-slate-100 pt-3">
                      <div className="flex items-center gap-2 text-slate-600">
                        <User className="w-4 h-4 opacity-50" /> 
                        <span className="font-medium">{cap.proprietarioNome}</span>
                      </div>
                      <div className="flex items-center gap-2 text-slate-600">
                        <Phone className="w-4 h-4 opacity-50" /> 
                        <span>{cap.proprietarioContato}</span>
                      </div>
                      <div className="flex items-center gap-2 text-slate-600">
                        <ShieldCheck className="w-4 h-4 opacity-50" /> 
                        <span>Captado por: <strong>{cap.corretor}</strong></span>
                      </div>
                      <div className="text-right">
                        <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${cap.exclusividade === 'Sim' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-500'}`}>
                          {cap.exclusividade === 'Sim' ? 'EXCLUSIVO' : 'SEM EXCLUSIVIDADE'}
                        </span>
                      </div>
                    </div>

                    {cap.detalhes && (
                      <div className="mt-3 p-3 bg-slate-50 rounded-lg text-xs text-slate-500 italic line-clamp-2">
                        "{cap.detalhes}"
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </main>
      
      {/* Botão flutuante para troca rápida no mobile */}
      <div className="fixed bottom-6 right-6 sm:hidden">
        <button 
          onClick={() => setView(view === 'form' ? 'list' : 'form')}
          className="w-14 h-14 bg-blue-600 text-white rounded-full shadow-2xl flex items-center justify-center active:scale-90 transition-transform"
        >
          {view === 'form' ? <List className="w-6 h-6" /> : <Plus className="w-6 h-6" />}
        </button>
      </div>
    </div>
  );
}