import React, { useState } from 'react';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell
} from 'recharts';
import { 
  Zap, ArrowRight
} from 'lucide-react';

// NOTA DE SEGURANÇA: 
// Em produção, FATURAMENTO_MAP e FRASES_GARGALO devem ser movidos para /api/diagnostico
// O frontend não deve conhecer os valores financeiros reais para evitar engenharia reversa.

export default function App() {
  const [step, setStep] = useState(0); 
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [formData, setFormData] = useState({
    nome: '', email: '', whatsapp: '', empresa: '',
    tipo_negocio: 'Clínica médica',
    faturamento: '$15k–$50k',
    funcionarios: '1–3',
    p1: 10, p2: 10, p3: 10, 
    p4: 10, p5: 10, p6: 10, 
    p7: 10, p8: 10, p9: 10, 
    p10: 10, p11: 10, p12: 10 
  });

  const [resultado, setResultado] = useState(null);

  // --- INTEGRAÇÃO COM BACKEND ---
  const processarDiagnostico = async () => {
    setLoading(true);
    setError(null);

    try {
      /**
       * EM PRODUÇÃO:
       * Substitua o bloco abaixo por:
       * const response = await fetch('/api/diagnostico', {
       * method: 'POST',
       * body: JSON.stringify(formData)
       * });
       * const data = await response.json();
       */
      
      // Simulando chamada de API (Backend Seguro)
      await new Promise(resolve => setTimeout(resolve, 2000));

      // Simulando a resposta que viria do servidor
      // No backend, usaríamos a lógica do seu arquivo 'calcularDiagnostico.ts'
      const mockBackendResponse = {
        success: true,
        data: {
          scores: [
            { name: 'S1', value: 3.5 },
            { name: 'S2', value: 5.0 },
            { name: 'S3', value: 2.1 },
            { name: 'S4', value: 7.8 },
          ],
          gargalo: 'STEP3',
          frase: 'A falha está na execução. A estrutura existe, mas a conversão é ineficiente.',
          injicao: 'Execution',
          ineficiencia: '34.5',
          perda: '$10,350.00'
        }
      };

      setResultado(mockBackendResponse.data);
      setStep(5);
    } catch (err) {
      setError("Falha na comunicação com o servidor de segurança. Tente novamente.");
    } finally {
      setLoading(false);
    }
  };

  const nextStep = () => setStep(s => s + 1);
  const prevStep = () => setStep(s => s - 1);

  return (
    <div className="min-h-screen bg-[#080808] text-white font-sans selection:bg-white selection:text-black">
      
      <header className="p-6 border-b border-white/5 flex justify-between items-center max-w-7xl mx-auto w-full">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-white flex items-center justify-center">
            <div className="w-4 h-4 bg-black rotate-45"></div>
          </div>
          <span className="font-black text-2xl tracking-tighter font-syne">IPLOYE</span>
        </div>
        <div className="flex items-center gap-4">
           <span className="text-[10px] text-emerald-500 font-bold border border-emerald-500/20 px-2 py-1 rounded">SSL SECURE</span>
           <button className="hidden md:block text-xs font-bold tracking-widest border border-white/20 px-6 py-2 hover:bg-white hover:text-black transition-all uppercase">
            Engenharia Operativa
          </button>
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-6 py-12">
        
        {step === 0 && (
          <div className="text-center py-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
            <h1 className="text-6xl md:text-8xl font-black font-syne mb-8 tracking-tighter leading-none">
              PARE DE <span className="text-zinc-500">VAZAR</span> LUCRO.
            </h1>
            <p className="text-zinc-400 text-xl max-w-2xl mx-auto mb-12 font-light">
              Diagnóstico técnico para identificar falhas sistêmicas em operações brasileiras nos EUA.
            </p>
            <button 
              onClick={() => setStep(1)}
              className="bg-white text-black font-bold px-12 py-6 text-lg uppercase tracking-widest hover:bg-zinc-200 transition-all flex items-center gap-4 mx-auto"
            >
              Iniciar Auditoria <ArrowRight size={20} />
            </button>
          </div>
        )}

        {step >= 1 && step <= 4 && (
          <div className="max-w-2xl mx-auto">
            <div className="mb-12">
              <div className="flex justify-between text-[10px] uppercase tracking-[0.2em] text-zinc-500 mb-4 font-bold">
                <span>Fase {step} de 4</span>
                <span>{Math.round((step / 4) * 100)}% processado</span>
              </div>
              <div className="h-[1px] w-full bg-white/10 relative">
                <div 
                  className="h-full bg-white transition-all duration-500" 
                  style={{ width: `${(step / 4) * 100}%` }}
                />
              </div>
            </div>

            {error && (
              <div className="bg-red-500/10 border border-red-500 text-red-500 p-4 mb-8 text-sm font-bold uppercase tracking-widest text-center">
                {error}
              </div>
            )}

            {step === 1 && (
              <section className="animate-in fade-in duration-500">
                <h2 className="text-3xl font-syne font-bold mb-8 uppercase tracking-tight">Perfil Corporativo</h2>
                <div className="space-y-6">
                  <div>
                    <label className="text-[10px] uppercase tracking-widest text-zinc-500 block mb-2 font-bold">Nome da Empresa</label>
                    <input 
                      type="text" 
                      className="w-full bg-transparent border-b border-white/20 py-4 focus:border-white outline-none transition-all text-xl"
                      placeholder="Ex: Miami Medical Center"
                      value={formData.empresa}
                      onChange={(e) => setFormData({...formData, empresa: e.target.value})}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="border border-white/10 p-6 hover:border-white/40 cursor-pointer transition-all bg-zinc-950/50">
                      <p className="text-[10px] uppercase tracking-widest text-zinc-500 mb-2 font-bold">Revenue Range</p>
                      <select 
                        className="bg-transparent w-full outline-none text-lg cursor-pointer"
                        value={formData.faturamento}
                        onChange={(e) => setFormData({...formData, faturamento: e.target.value})}
                      >
                        <option className="bg-black">Menos de $5k</option>
                        <option className="bg-black">$5k–$15k</option>
                        <option className="bg-black">$15k–$50k</option>
                        <option className="bg-black">$50k–$100k</option>
                        <option className="bg-black">$100k+</option>
                      </select>
                    </div>
                    <div className="border border-white/10 p-6 hover:border-white/40 cursor-pointer transition-all bg-zinc-950/50">
                      <p className="text-[10px] uppercase tracking-widest text-zinc-500 mb-2 font-bold">Time</p>
                      <select 
                        className="bg-transparent w-full outline-none text-lg cursor-pointer"
                        value={formData.funcionarios}
                        onChange={(e) => setFormData({...formData, funcionarios: e.target.value})}
                      >
                        <option className="bg-black">1–3</option>
                        <option className="bg-black">4–10</option>
                        <option className="bg-black">11–30</option>
                        <option className="bg-black">30+</option>
                      </select>
                    </div>
                  </div>
                </div>
              </section>
            )}

            {step === 2 && (
              <section className="animate-in fade-in duration-500">
                <h2 className="text-3xl font-syne font-bold mb-8 uppercase tracking-tight">S1 & S2: Dados e Sistemas</h2>
                <div className="space-y-8">
                  <QuestionRow 
                    label="Como os dados de aquisição são processados?"
                    options={[
                      { text: "Entrada manual em planilhas", val: 10 },
                      { text: "Sincronização básica via CRM", val: 5 },
                      { text: "Pipeline de dados autónomo", val: 0 }
                    ]}
                    value={formData.p1}
                    onChange={(v) => setFormData({...formData, p1: v})}
                  />
                </div>
              </section>
            )}

            {step === 3 && (
              <section className="animate-in fade-in duration-500">
                <h2 className="text-3xl font-syne font-bold mb-8 uppercase tracking-tight">S3: Execução e Protocolos</h2>
                <div className="space-y-8">
                  <QuestionRow 
                    label="Qual o status do No-Show em agendamentos?"
                    options={[
                      { text: "Crítico (Acima de 25%)", val: 10 },
                      { text: "Sob controle humano", val: 5 },
                      { text: "Sistema de confirmação ativo", val: 0 }
                    ]}
                    value={formData.p7}
                    onChange={(v) => setFormData({...formData, p7: v})}
                  />
                </div>
              </section>
            )}

            {step === 4 && (
              <section className="animate-in fade-in duration-500">
                <h2 className="text-3xl font-syne font-bold mb-8 uppercase tracking-tight">Criptografia de Relatório</h2>
                <div className="space-y-6">
                  <input 
                    type="text" 
                    placeholder="Nome Completo"
                    className="w-full bg-transparent border border-white/10 p-6 focus:border-white outline-none transition-all"
                    value={formData.nome}
                    onChange={(e) => setFormData({...formData, nome: e.target.value})}
                  />
                  <input 
                    type="email" 
                    placeholder="E-mail Corporativo"
                    className="w-full bg-transparent border border-white/10 p-6 focus:border-white outline-none transition-all"
                    value={formData.email}
                    onChange={(e) => setFormData({...formData, email: e.target.value})}
                  />
                </div>
              </section>
            )}

            <div className="flex gap-4 mt-12">
              {step > 1 && (
                <button onClick={prevStep} className="px-8 py-4 border border-white/10 text-zinc-500 font-bold uppercase tracking-widest text-xs hover:border-white transition-all">
                  Voltar
                </button>
              )}
              <button 
                onClick={step === 4 ? processarDiagnostico : nextStep} 
                className="flex-1 bg-white text-black font-bold py-4 uppercase tracking-widest text-sm hover:bg-zinc-200 transition-all disabled:opacity-50"
                disabled={loading}
              >
                {loading ? 'Validando Protocolos...' : (step === 4 ? 'Solicitar Diagnóstico' : 'Próxima Fase')}
              </button>
            </div>
          </div>
        )}

        {step === 5 && resultado && (
          <div className="animate-in fade-in zoom-in-95 duration-700">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
              <div className="md:col-span-2 border border-white/10 p-8 bg-zinc-950/50">
                <span className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold mb-4 block">Vetor de Ineficiência</span>
                <h2 className="text-4xl font-syne font-black mb-4 uppercase leading-none">
                   Perda de <span className="text-red-500">{resultado.ineficiencia}%</span> em <span className="text-white">{resultado.gargalo}</span>
                </h2>
                <p className="text-zinc-400 text-lg mb-8 italic">"{resultado.frase}"</p>
                
                <div className="h-[250px] w-full mt-8">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={resultado.scores}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#222" vertical={false} />
                      <XAxis dataKey="name" stroke="#555" fontSize={10} tickLine={false} axisLine={false} />
                      <Tooltip 
                        contentStyle={{ backgroundColor: '#000', border: '1px solid #333', fontSize: '12px' }}
                        itemStyle={{ color: '#fff' }}
                      />
                      <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                        {resultado.scores.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.value < 5 ? '#fff' : '#333'} />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>

              <div className="space-y-6">
                <div className="border border-white/10 p-8 bg-white text-black">
                  <span className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold mb-2 block">Custo Operacional Oculto</span>
                  <p className="text-4xl font-black font-syne">{resultado.perda}</p>
                  <p className="text-[10px] text-zinc-400 uppercase font-bold">Mensal / Estimado</p>
                </div>
                <div className="border border-white/10 p-8 bg-zinc-950/50">
                  <span className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold mb-4 block">Engine Patch</span>
                  <div className="flex items-center gap-4 text-white">
                    <Zap size={32} className="text-yellow-500" />
                    <div>
                      <p className="text-xl font-bold font-syne uppercase">{resultado.injicao}</p>
                      <p className="text-[10px] text-zinc-500 uppercase font-bold">Protocolo de Injeção</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white text-black p-12 text-center">
              <h2 className="text-4xl font-syne font-black mb-4 uppercase tracking-tighter">Estancar vazamento?</h2>
              <p className="text-zinc-600 mb-8 max-w-xl mx-auto">
                Implemente sistemas autónomos para recuperar o revenue cycle da sua operação.
              </p>
              <button className="bg-black text-white px-12 py-6 font-bold uppercase tracking-widest hover:scale-105 transition-transform">
                Consultar Engenheiro
              </button>
            </div>
          </div>
        )}

      </main>

      <footer className="p-12 border-t border-white/5 text-center">
        <p className="text-[10px] tracking-[0.4em] text-zinc-600 uppercase font-bold">
          IPLOYE Systems — End-to-End Operational Engineering
        </p>
      </footer>
    </div>
  );
}

function QuestionRow({ label, options, value, onChange }) {
  return (
    <div className="space-y-4">
      <p className="text-lg font-medium text-zinc-200">{label}</p>
      <div className="grid grid-cols-1 gap-3">
        {options.map((opt, i) => (
          <button
            key={i}
            onClick={() => onChange(opt.val)}
            className={`text-left p-4 border transition-all text-sm uppercase tracking-wider font-bold ${
              value === opt.val 
              ? 'bg-white text-black border-white' 
              : 'border-white/10 text-zinc-500 hover:border-white/30'
            }`}
          >
            {opt.text}
          </button>
        ))}
      </div>
    </div>
  );
}