import React, { useState, useEffect } from 'react';
import { 
  Menu, X, Copy, CheckCircle, MessageCircle, 
  Clock, ShieldAlert, ListChecks, Heart, 
  Users, ChevronRight, Upload, Save, Play, History,
  Calendar, MapPin, Mail, Phone as PhoneIcon, UserCog,
  Lock, LogOut, User
} from 'lucide-react';

// --- Componentes UI Reutilizáveis ---

const Button = ({ children, onClick, variant = 'primary', className = '', disabled = false, type = 'button' }) => {
  const baseStyle = "px-4 py-2 rounded-lg transition-all duration-200 font-medium text-sm flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed";
  const variants = {
    primary: "bg-stone-800 text-white hover:bg-stone-700 shadow-sm",
    secondary: "bg-stone-200 text-stone-800 hover:bg-stone-300",
    outline: "border border-stone-300 text-stone-600 hover:bg-stone-50",
    ghost: "text-stone-500 hover:text-stone-800 hover:bg-stone-100",
    success: "bg-green-600 text-white hover:bg-green-700",
    danger: "bg-red-50 text-red-600 hover:bg-red-100"
  };

  return (
    <button type={type} onClick={onClick} disabled={disabled} className={`${baseStyle} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const Card = ({ title, children, className = '' }) => (
  <div className={`bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden ${className}`}>
    {title && (
      <div className="bg-stone-50 px-6 py-4 border-b border-stone-100">
        <h3 className="font-sans text-lg text-stone-800 font-medium tracking-wide">{title}</h3>
      </div>
    )}
    <div className="p-6">
      {children}
    </div>
  </div>
);

// --- Tela de Login ---

const LoginScreen = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    // Simulação de delay de rede e verificação
    setTimeout(() => {
      // Base de usuários mockada
      const users = {
        'admin': { name: 'Adamo', role: 'Gerente' },
        'comercial': { name: 'Angela', role: 'Consultor' },
        'vendas': { name: 'Beatriz', role: 'SDR' }
      };

      if (users[username] && password === 'aosiQU33aosiQU33') {
        onLogin({ username, ...users[username] });
      } else {
        setError('Credenciais inválidas. Tente admin / aosiQU33aosiQU33');
        setLoading(false);
      }
    }, 800);
  };

  return (
    <div className="min-h-screen bg-stone-100 flex items-center justify-center p-4">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden animate-fadeIn">
        <div className="bg-stone-900 p-8 text-center">
           <h1 className="font-sans text-2xl tracking-widest text-white leading-tight mb-2">PINHEIRO <br/><span className="font-light text-stone-400">MARTINEZ</span></h1>
           <p className="text-xs text-stone-500 uppercase tracking-widest">Acesso Restrito</p>
        </div>
        
        <div className="p-8">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-xs font-medium text-stone-500 mb-1 uppercase tracking-wide">Usuário</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <User size={18} className="text-stone-400" />
                </div>
                <input
                  type="text"
                  required
                  className="block w-full pl-10 p-3 border border-stone-200 rounded-lg text-sm focus:ring-2 focus:ring-stone-800 focus:border-transparent outline-none transition-all"
                  placeholder="Seu usuário"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-stone-500 mb-1 uppercase tracking-wide">Senha</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Lock size={18} className="text-stone-400" />
                </div>
                <input
                  type="password"
                  required
                  className="block w-full pl-10 p-3 border border-stone-200 rounded-lg text-sm focus:ring-2 focus:ring-stone-800 focus:border-transparent outline-none transition-all"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
            </div>

            {error && (
              <div className="p-3 bg-red-50 border border-red-100 rounded-lg flex items-center gap-2 text-red-600 text-xs animate-pulse">
                <ShieldAlert size={14} /> {error}
              </div>
            )}

            <Button 
              type="submit" 
              className="w-full py-3 text-base" 
              disabled={loading}
            >
              {loading ? 'Acessando...' : 'Entrar no Sistema'}
            </Button>
            
            <div className="text-center mt-4">
               <span className="text-[10px] text-stone-400">© Pinheiro Martinez Arquitetura</span>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

// --- ScriptBox Inteligente (Conectado ao Lead e Atendente) ---

const ScriptBox = ({ title, content, context, onAction, activeLead, attendantName }) => {
  const [copied, setCopied] = useState(false);

  // Lógica de Primeiro Nome do Cliente
  const clientFirstName = activeLead ? activeLead.name.split(' ')[0] : '[Nome]';
  
  // Lógica do Nome do Atendente (usa o configurado ou mantém o placeholder se vazio)
  const myName = attendantName || '[Seu Nome]';

  // Personaliza o conteúdo substituindo placeholders
  const processedContent = content
    .replace(/\[Nome\]/g, clientFirstName)
    .replace(/\[Nome do Cliente\]/g, clientFirstName)
    .replace(/\[Seu Nome\]/g, myName);

  const handleCopy = () => {
    const textArea = document.createElement("textarea");
    textArea.value = processedContent;
    
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    textArea.style.top = "0";
    document.body.appendChild(textArea);
    
    textArea.focus();
    textArea.select();

    try {
      const successful = document.execCommand('copy');
      if (successful) {
        setCopied(true);
        if (activeLead && onAction) {
          onAction(title, processedContent);
        }
        setTimeout(() => setCopied(false), 2000);
      } else {
        console.error('Falha ao copiar texto.');
      }
    } catch (err) {
      console.error('Erro ao copiar texto: ', err);
    }

    document.body.removeChild(textArea);
  };

  return (
    <div className="mb-6 last:mb-0 group/box">
      <div className="flex justify-between items-baseline mb-2">
        <h4 className="font-medium text-stone-800 text-sm flex items-center gap-2">
          {title}
          {activeLead && copied && (
            <span className="text-[10px] bg-green-100 text-green-700 px-2 py-0.5 rounded-full animate-fadeIn">
              Registrado para {clientFirstName}
            </span>
          )}
        </h4>
        {context && <span className="text-xs text-stone-500 bg-stone-100 px-2 py-1 rounded">{context}</span>}
      </div>
      <div className="relative group">
        <div className={`p-4 rounded-lg border text-sm leading-relaxed font-light italic pr-12 transition-colors ${
          activeLead ? 'bg-blue-50/50 border-blue-100 text-stone-700' : 'bg-stone-50 border-stone-200 text-stone-600'
        }`}>
          "{processedContent}"
        </div>
        <button 
          onClick={handleCopy}
          className={`absolute top-2 right-2 p-2 rounded-md shadow-sm border transition-all opacity-0 group-hover:opacity-100 focus:opacity-100 ${
             copied 
             ? 'bg-green-50 border-green-200 text-green-600' 
             : 'bg-white border-stone-200 text-stone-500 hover:bg-stone-100'
          }`}
          title={activeLead ? "Copiar e Registrar Ação" : "Copiar script"}
        >
          {copied ? <CheckCircle size={16} /> : <Copy size={16} />}
        </button>
      </div>
    </div>
  );
};

// --- Seções de Conteúdo ---

const ManifestoSection = () => (
  <div className="space-y-8 animate-fadeIn">
    <div className="text-center py-8">
      <h2 className="font-sans text-3xl text-stone-800 mb-4 font-light tracking-wide">Postura e Tom de Voz</h2>
      <p className="text-stone-600 max-w-2xl mx-auto font-light leading-relaxed">
        "Não vendemos plantas ou obras. Vendemos a materialização da identidade do cliente. 
        Nosso atendimento é o primeiro esboço do projeto: deve ser seguro, elegante, atento e sem pressa."
      </p>
    </div>
    <div className="grid md:grid-cols-2 gap-6">
      <Card title="NÓS SOMOS" className="border-l-4 border-l-stone-800">
        <ul className="space-y-4">
          <li className="flex items-start gap-3">
            <CheckCircle className="text-stone-800 shrink-0 mt-0.5" size={18} />
            <div>
              <strong className="block text-stone-800">Consultores</strong>
              <span className="text-stone-600 text-sm">Orientamos o cliente com autoridade.</span>
            </div>
          </li>
          <li className="flex items-start gap-3">
            <CheckCircle className="text-stone-800 shrink-0 mt-0.5" size={18} />
            <div>
              <strong className="block text-stone-800">Calmos</strong>
              <span className="text-stone-600 text-sm">O luxo não tem pressa.</span>
            </div>
          </li>
          <li className="flex items-start gap-3">
            <CheckCircle className="text-stone-800 shrink-0 mt-0.5" size={18} />
            <div>
              <strong className="block text-stone-800">Ouvintes</strong>
              <span className="text-stone-600 text-sm">O cliente fala mais que nós.</span>
            </div>
          </li>
        </ul>
      </Card>
      <Card title="NÓS NÃO SOMOS" className="border-l-4 border-l-red-200">
        <ul className="space-y-4">
          <li className="flex items-start gap-3">
            <ShieldAlert className="text-red-400 shrink-0 mt-0.5" size={18} />
            <div>
              <strong className="block text-stone-800">Vendedores</strong>
              <span className="text-stone-600 text-sm">Não empurramos serviços.</span>
            </div>
          </li>
          <li className="flex items-start gap-3">
            <ShieldAlert className="text-red-400 shrink-0 mt-0.5" size={18} />
            <div>
              <strong className="block text-stone-800">Ansiosos</strong>
              <span className="text-stone-600 text-sm">Não usamos "só hoje", "última vaga".</span>
            </div>
          </li>
        </ul>
      </Card>
    </div>
  </div>
);

const FlowSection = ({ activeLead, logAction, attendantName }) => {
  const [step, setStep] = useState(1);

  return (
    <div className="space-y-6 animate-fadeIn">
      {activeLead && (
        <div className="bg-blue-50 border border-blue-100 p-4 rounded-lg flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 gap-4">
          <div className="flex items-center gap-3">
            <div className="bg-blue-100 p-2 rounded-full">
              <Users size={18} className="text-blue-700" />
            </div>
            <div>
              <p className="text-xs text-blue-600 font-bold uppercase tracking-wider">Atendendo Agora</p>
              <h3 className="text-stone-800 font-medium text-lg">{activeLead.name}</h3>
              <div className="flex items-center gap-2 text-xs text-stone-500">
                {activeLead.state && <span className="flex items-center gap-1"><MapPin size={10}/> {activeLead.state}</span>}
                {activeLead.contactType && <span className="bg-stone-100 px-1.5 rounded">{activeLead.contactType}</span>}
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3 w-full sm:w-auto">
             <div className="text-right flex-1 sm:flex-none">
                <p className="text-xs text-stone-500">Status Atual</p>
                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-white text-stone-800 border border-stone-200">
                  {activeLead.status}
                </span>
             </div>
          </div>
        </div>
      )}

      <div className="flex items-center justify-between mb-6 overflow-x-auto pb-2 no-scrollbar">
        {[1, 2, 3, 4].map((s) => (
          <button
            key={s}
            onClick={() => setStep(s)}
            className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap transition-colors ${
              step === s ? 'bg-stone-800 text-white' : 'bg-stone-100 text-stone-500 hover:bg-stone-200'
            }`}
          >
            <span className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-bold">{s}</span>
            Etapa {s}
          </button>
        ))}
      </div>

      {step === 1 && (
        <Card title="Etapa 1: O Primeiro Contato">
          <p className="text-stone-600 mb-6">Objetivo: Mostrar que existe um humano do outro lado.</p>
          <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Mensagem Inicial" 
            context="Instagram / Site / Indicação"
            content="Olá, [Nome do Cliente]! Tudo bem? Aqui é a [Seu Nome], da equipe de projetos da Pinheiro Martinez Arquitetura. Recebi seu contato e é um prazer falar com você. Vi que tem interesse em conhecer nosso trabalho. Você prefere que eu te explique brevemente como atuamos por áudio ou prefere por texto mesmo?" 
          />
        </Card>
      )}

      {step === 2 && (
        <Card title="Etapa 2: A Apresentação">
          <div className="space-y-6">
            <div className="bg-stone-50 p-4 rounded-lg border border-stone-200">
              <h4 className="font-bold text-stone-800 mb-2 flex items-center gap-2">Opção A: Cliente aceitou ÁUDIO</h4>
              <ScriptBox 
                activeLead={activeLead} onAction={logAction} attendantName={attendantName}
                title="Script do Áudio"
                content="Oi, [Nome], prazer! Na Pinheiro Martinez, nós acreditamos que a casa deve ser a extensão da sua identidade. Por isso, nós não trabalhamos com modelos prontos. Nosso foco é traduzir a sua rotina e o seu estilo de vida em uma arquitetura que tenha alma, história e sofisticação. O processo é muito leve: a gente sempre começa com uma conversa para entender o seu momento e, a partir disso, o arquiteto desenha algo exclusivo para você. Mas antes de falarmos de processos, queria entender um pouco do seu sonho..." 
              />
            </div>
            <div className="bg-stone-50 p-4 rounded-lg border border-stone-200">
              <h4 className="font-bold text-stone-800 mb-2 flex items-center gap-2">Opção B: Cliente prefere TEXTO</h4>
              <ScriptBox 
                activeLead={activeLead} onAction={logAction} attendantName={attendantName}
                title="Script de Texto"
                content="Perfeito, [Nome]. Vou ser breve. Na Pinheiro Martinez, acreditamos que a casa deve ser a extensão da sua identidade, por isso fugimos de modelos prontos. Nosso foco é traduzir sua rotina em uma arquitetura com alma e sofisticação. O processo começa sempre entendendo seu momento para que o arquiteto desenhe algo exclusivo. Estou te enviando nosso portfólio logo abaixo para você visualizar essa assinatura." 
              />
            </div>
          </div>
        </Card>
      )}

      {step === 3 && (
        <Card title="Etapa 3: A Qualificação">
          <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Lead Orgânico / Indicação" 
            content="Para que eu possa te orientar da melhor forma: Você está buscando um projeto para construir do zero (já tem terreno) ou seria uma reforma de um imóvel que já possui?" 
          />
           <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Lead via ADS (Tem Terreno)" 
            content="Vi no seu formulário que você já possui o terreno. Excelente passo! Para eu visualizar o contexto: ele fica em qual condomínio ou região? E você já tem uma ideia da metragem que pretende construir?" 
          />
           <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Lead via ADS (Quer Reformar)" 
            content="Vi no seu cadastro que o foco é uma reforma. Para eu alinhar com o arquiteto especialista: estamos falando de um apartamento ou casa? E qual é a principal transformação que você busca nesse imóvel hoje?" 
          />
        </Card>
      )}
       {step === 4 && (
        <Card title="Etapa 4: Aprofundamento">
          <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Cenário A: Vai Construir" 
            content="Que excelente fase, [Nome]! Construir do zero nos permite explorar ao máximo a integração, a fachada e a luz natural, criando algo totalmente autoral. O terreno fica em qual condomínio ou região? E você já tem uma ideia aproximada da metragem que pretende construir?" 
          />
           <ScriptBox 
            activeLead={activeLead} onAction={logAction} attendantName={attendantName}
            title="Cenário B: Vai Reformar" 
            content="Entendi perfeitamente. Reformas exigem um olhar muito cuidadoso para ressignificar os espaços e trazer a sua personalidade para o imóvel. É um apartamento ou casa? E o que mais te incomoda na planta atual que você não abre mão de mudar?" 
          />
        </Card>
      )}
    </div>
  );
};

const LeadsManager = ({ leads, setLeads, onSelectLead, activeLead, attendantName, setAttendantName, currentUser }) => {
  const [showImport, setShowImport] = useState(false);
  const [importText, setImportText] = useState('');

  const handleImport = () => {
    const rows = importText.trim().split('\n');
    const newLeads = rows.map((row, index) => {
      const cols = row.split(',').map(s => s?.trim());
      if (cols.length < 2) return null; 
      const [date, name, phone, email, state, type] = cols;
      if (!name) return null;

      return {
        id: Date.now() + index,
        date: date || new Date().toLocaleDateString(),
        name: name,
        phone: phone || 'Sem telefone',
        email: email || '',
        state: state || '',
        contactType: type || 'Lead',
        status: 'Novo',
        history: [],
        lastInteraction: new Date().toISOString()
      };
    }).filter(Boolean);

    setLeads([...leads, ...newLeads]);
    setImportText('');
    setShowImport(false);
  };

  return (
    <div className="space-y-6 animate-fadeIn">
      <div className="grid md:grid-cols-3 gap-6">
        {/* Configuração do Atendente */}
        <div className="md:col-span-1">
          <Card title="Perfil Ativo">
            <label className="block text-xs font-medium text-stone-500 mb-1 uppercase tracking-wide">Logado como</label>
            <div className="flex items-center gap-3 mb-3">
              <div className="bg-stone-800 p-2 rounded-full text-white"><User size={20} /></div>
              <div>
                <p className="font-medium text-stone-800">{attendantName}</p>
                <p className="text-xs text-stone-500">{currentUser?.role || 'Usuário'}</p>
              </div>
            </div>
            <div className="border-t border-stone-100 pt-3">
               <label className="block text-xs font-medium text-stone-500 mb-1 uppercase tracking-wide">Nome nos Scripts</label>
               <input 
                  type="text" 
                  value={attendantName}
                  onChange={(e) => setAttendantName(e.target.value)}
                  className="w-full p-2 bg-stone-50 border border-stone-200 rounded text-sm focus:outline-none focus:border-stone-500"
                />
                <p className="text-[10px] text-stone-400 mt-1">Você pode editar como seu nome aparece nas mensagens.</p>
            </div>
          </Card>
        </div>

        {/* Cabeçalho e Botões */}
        <div className="md:col-span-2 flex flex-col justify-center">
          <div className="flex justify-between items-end mb-4">
            <div>
               <h2 className="font-sans text-2xl font-light text-stone-800">Gestão de Leads</h2>
               <p className="text-stone-500 text-sm">Importe e controle seus contatos.</p>
            </div>
            <Button onClick={() => setShowImport(!showImport)} variant="outline">
              <Upload size={16} /> Importar CSV
            </Button>
          </div>
        </div>
      </div>

      {showImport && (
        <Card title="Importar Contatos (Copiar e Colar)">
          <p className="text-xs text-stone-500 mb-2">
            Formato obrigatório das colunas (separado por vírgula): <br/>
            <strong>Data de contato, Nome, Telefone, Email, Estado, Tipo de Contato</strong>
          </p>
          <div className="bg-stone-50 p-3 rounded border border-stone-200 mb-3 text-xs font-mono text-stone-600">
            Exemplo:<br/>
            22/11/2023, Ana Souza, 11999999999, ana@email.com, SP, Indicação<br/>
            23/11/2023, Carlos Lima, 11888888888, carlos@email.com, RJ, Instagram
          </div>
          <textarea
            className="w-full h-32 p-3 border border-stone-200 rounded-lg text-sm font-mono mb-4 focus:ring-2 focus:ring-stone-500 outline-none"
            placeholder={`22/11/2023, Ana Souza, 11999999999, ana@email.com, SP, Indicação`}
            value={importText}
            onChange={(e) => setImportText(e.target.value)}
          />
          <div className="flex justify-end gap-2">
            <Button onClick={() => setShowImport(false)} variant="ghost">Cancelar</Button>
            <Button onClick={handleImport}>Processar Importação</Button>
          </div>
        </Card>
      )}

      <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden overflow-x-auto">
        <table className="w-full text-sm text-left">
          <thead className="bg-stone-50 text-stone-500 font-medium border-b border-stone-100">
            <tr>
              <th className="px-4 py-4 whitespace-nowrap">Data</th>
              <th className="px-4 py-4">Nome</th>
              <th className="px-4 py-4 hidden md:table-cell">Contato</th>
              <th className="px-4 py-4 hidden lg:table-cell">Detalhes</th>
              <th className="px-4 py-4">Status</th>
              <th className="px-4 py-4 text-right">Ação</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-stone-100">
            {leads.length === 0 ? (
               <tr>
                 <td colSpan="6" className="px-6 py-8 text-center text-stone-400 italic">
                   Nenhum lead importado ainda.
                 </td>
               </tr>
            ) : (
              leads.map(lead => (
                <tr key={lead.id} className={`hover:bg-stone-50 transition-colors ${activeLead?.id === lead.id ? 'bg-blue-50/60' : ''}`}>
                  <td className="px-4 py-4 text-stone-500 whitespace-nowrap text-xs">
                    {lead.date || '-'}
                  </td>
                  <td className="px-4 py-4 font-medium text-stone-800">
                    {lead.name}
                    <div className="md:hidden text-xs text-stone-400 mt-1 flex flex-col gap-0.5">
                      <span>{lead.phone}</span>
                      <span className="italic">{lead.contactType}</span>
                    </div>
                  </td>
                  <td className="px-4 py-4 hidden md:table-cell">
                    <div className="flex flex-col gap-1 text-xs text-stone-600">
                      {lead.phone && <span className="flex items-center gap-1"><PhoneIcon size={10}/> {lead.phone}</span>}
                      {lead.email && <span className="flex items-center gap-1"><Mail size={10}/> {lead.email}</span>}
                    </div>
                  </td>
                  <td className="px-4 py-4 hidden lg:table-cell">
                    <div className="flex items-center gap-2">
                      {lead.state && <span className="text-xs bg-stone-100 px-2 py-0.5 rounded text-stone-600">{lead.state}</span>}
                      {lead.contactType && <span className="text-xs text-stone-500 italic">{lead.contactType}</span>}
                    </div>
                  </td>
                  <td className="px-4 py-4">
                    <span className={`px-2 py-1 rounded-full text-xs border whitespace-nowrap ${
                      lead.status === 'Novo' ? 'bg-green-50 text-green-700 border-green-100' :
                      lead.status === 'Em Contato' ? 'bg-blue-50 text-blue-700 border-blue-100' :
                      'bg-stone-100 text-stone-600 border-stone-200'
                    }`}>
                      {lead.status}
                    </span>
                  </td>
                  <td className="px-4 py-4 text-right">
                    {activeLead?.id === lead.id ? (
                      <span className="text-blue-600 text-xs font-bold flex items-center justify-end gap-1">
                        <Play size={12} fill="currentColor" /> Ativo
                      </span>
                    ) : (
                      <Button onClick={() => onSelectLead(lead)} variant="secondary" className="ml-auto text-xs py-1 px-3">
                        Atender <ChevronRight size={14} />
                      </Button>
                    )}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const ObjectionsSection = ({ attendantName, activeLead, logAction }) => {
  const objections = [
    {
      trigger: "Só estou pesquisando / Ainda não tenho as chaves",
      response: "Compreendo perfeitamente, [Nome]. Essa fase de pesquisa é fundamental para amadurecer as ideias. Vou deixar seu contato salvo aqui. Posso te enviar ocasionalmente algumas referências de projetos nossos que tenham a ver com esse estilo que você busca? Assim você vai se inspirando até o momento certo."
    },
    {
      trigger: "Qual é o preço/valor do metro quadrado?",
      response: "A nossa precificação é personalizada, [Nome], pois varia conforme a complexidade e o nível de detalhamento que o seu projeto vai exigir. Não trabalhamos com valor fixo de m² justamente para não limitar a criação. Na reunião com o arquiteto, ele consegue entender a dimensão do trabalho e te apresentar uma proposta formal. Faz sentido para você conversarmos para ele entender o escopo?"
    },
    {
      trigger: "Preciso ver com meu marido/esposa",
      response: "Claro! É fundamental que ambos estejam alinhados, afinal a casa é a realização da família. Vamos fazer o seguinte: qual o melhor horário para vocês dois? Assim apresentamos o escritório para ambos e tiramos todas as dúvidas juntos."
    }
  ];

  const disqualifications = [
    {
      trigger: "Projeto Comercial (Fora de nicho)",
      response: "Entendi sua demanda, [Nome]. Hoje, a Pinheiro Martinez tomou a decisão estratégica de focar 100% na arquitetura residencial de alto padrão. Acreditamos que a especialização é o segredo da excelência, e projetos comerciais exigem dinâmicas e normativas muito específicas que fugiriam do nosso foco de entrega atual. Por isso, infelizmente não conseguirei te atender nesta demanda, mas agradeço muito por ter lembrado de nós!"
    },
    {
      trigger: "Projeto Pequeno / Apenas Decoração",
      response: "Obrigada por compartilhar, [Nome]. Para garantirmos a assinatura e a coesão que você vê no nosso portfólio, o escritório optou por trabalhar exclusivamente com projetos completos ou grandes reformas. Quando atuamos em ambientes isolados, sentimos que não conseguimos entregar a experiência de transformação completa que é a marca da Pinheiro Martinez. De qualquer forma, fico à disposição caso decida ampliar o escopo no futuro!"
    }
  ];

  return (
    <div className="space-y-8 animate-fadeIn">
       <Card title="Gestão de Objeções (Respostas de Alto Nível)">
         {objections.map((obj, idx) => (
           <div key={idx} className="mb-6 border-b border-stone-100 pb-4 last:border-0">
             <h4 className="font-bold text-stone-800 mb-2 flex items-center gap-2">
               <ShieldAlert size={18} className="text-amber-600"/> {obj.trigger}
             </h4>
             <ScriptBox title="Resposta Sugerida" content={obj.response} attendantName={attendantName} activeLead={activeLead} onAction={logAction} />
           </div>
         ))}
       </Card>
       <Card title="Desqualificação Elegante">
         {disqualifications.map((obj, idx) => (
           <div key={idx} className="mb-6 border-b border-stone-100 pb-4 last:border-0">
             <h4 className="font-bold text-stone-800 mb-2 flex items-center gap-2">
               <X size={18} className="text-red-500"/> {obj.trigger}
             </h4>
             <ScriptBox title="Resposta Sugerida" content={obj.response} attendantName={attendantName} activeLead={activeLead} onAction={logAction} />
           </div>
         ))}
       </Card>
    </div>
  );
};

const CadenceSection = ({ attendantName, activeLead, logAction }) => (
  <div className="animate-fadeIn">
     <Card title="Fluxo de Cadência (Follow-up Humanizado)">
       <div className="relative border-l-2 border-stone-200 ml-4 space-y-8 py-4">
         <div className="relative pl-8">
           <div className="absolute -left-[9px] top-0 w-4 h-4 bg-stone-800 rounded-full border-2 border-white"></div>
           <h4 className="font-bold text-stone-800">Dia 1</h4>
           <p className="text-stone-600 text-sm">Primeiro contato (Roteiros do Fluxo).</p>
         </div>
         <div className="relative pl-8">
           <div className="absolute -left-[9px] top-0 w-4 h-4 bg-stone-400 rounded-full border-2 border-white"></div>
           <h4 className="font-bold text-stone-800">Dia 3 - Check de Intenção</h4>
           <ScriptBox title="Script Dia 3" content="Olá, [Nome]. Tudo bem? Estou retomando para saber se conseguiu visualizar o portfólio..." attendantName={attendantName} activeLead={activeLead} onAction={logAction}/>
         </div>
         <div className="relative pl-8">
           <div className="absolute -left-[9px] top-0 w-4 h-4 bg-red-400 rounded-full border-2 border-white"></div>
           <h4 className="font-bold text-stone-800">Dia 30 - A Não-Despedida</h4>
           <ScriptBox title="Script Dia 30" content="Olá, [Nome]. Imagino que a rotina esteja corrida... Não vou mais insistir por aqui..." attendantName={attendantName} activeLead={activeLead} onAction={logAction}/>
         </div>
       </div>
     </Card>
  </div>
);

const ChecklistSection = () => {
  const [checks, setChecks] = useState({ nome: false, tipo: false, local: false, estagio: false, dor: false });
  const toggleCheck = (key) => setChecks(prev => ({ ...prev, [key]: !prev[key] }));

  return (
    <div className="space-y-8 animate-fadeIn">
      <Card title="Checklist de Sucesso (Pré-Reunião)">
        <p className="text-stone-600 mb-6">Este checklist deve ser preenchido ANTES de passar o bastão para o Arquiteto.</p>
        <div className="space-y-3">
          {[
            { key: 'nome', label: 'Nome do cliente e decisores (Quem assina o cheque?)' },
            { key: 'tipo', label: 'Tipo de obra (Construção do zero ou Reforma completa)' },
            { key: 'local', label: 'Localização (Bairro/Condomínio/Cidade e especificidades)' },
            { key: 'estagio', label: 'Estágio (Já tem terreno/chaves ou está sonhando?)' },
            { key: 'dor', label: 'Principal dor ou desejo (Ex: "Quer privacidade", "Ama cozinhar")' }
          ].map((item) => (
            <div key={item.key} onClick={() => toggleCheck(item.key)}
              className={`flex items-center p-4 rounded-lg border cursor-pointer transition-all ${checks[item.key] ? 'bg-stone-800 border-stone-800 text-white' : 'bg-white border-stone-200 text-stone-600 hover:bg-stone-50'}`}>
              <div className={`w-5 h-5 rounded border mr-3 flex items-center justify-center ${checks[item.key] ? 'bg-white border-white' : 'border-stone-300'}`}>
                {checks[item.key] && <CheckCircle size={14} className="text-stone-800" />}
              </div>
              <span className="text-sm font-medium">{item.label}</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};


// --- Layout Principal ---

export default function PlaybookApp() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  
  const [activeTab, setActiveTab] = useState('leads'); 
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  // Estado Global dos Leads e Atendente
  const [leads, setLeads] = useState(() => {
    const saved = localStorage.getItem('pm_leads_v2'); 
    return saved ? JSON.parse(saved) : [
      { 
        id: 1, 
        date: '20/11/2023',
        name: 'Cliente Exemplo', 
        phone: '11999999999', 
        email: 'cliente@exemplo.com',
        state: 'SP',
        contactType: 'Instagram',
        status: 'Novo', 
        history: [] 
      }
    ];
  });

  const [attendantName, setAttendantName] = useState('');

  // Persistência de Sessão
  useEffect(() => {
    const savedUser = localStorage.getItem('pm_user_session');
    if (savedUser) {
      const user = JSON.parse(savedUser);
      setCurrentUser(user);
      setAttendantName(user.name);
      setIsAuthenticated(true);
    }
  }, []);

  const handleLogin = (user) => {
    setIsAuthenticated(true);
    setCurrentUser(user);
    setAttendantName(user.name); // Auto-preenche o nome nos scripts
    localStorage.setItem('pm_user_session', JSON.stringify(user));
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    setCurrentUser(null);
    setAttendantName('');
    localStorage.removeItem('pm_user_session');
  };

  const [activeLead, setActiveLead] = useState(null);

  useEffect(() => {
    localStorage.setItem('pm_leads_v2', JSON.stringify(leads));
  }, [leads]);

  const logLeadAction = (actionTitle, contentSent) => {
    if (!activeLead) return;

    const newHistoryItem = {
      date: new Date().toISOString(),
      action: actionTitle,
      content: contentSent,
      user: currentUser?.name // Loga quem fez a ação
    };

    const updatedLeads = leads.map(l => {
      if (l.id === activeLead.id) {
        return {
          ...l,
          status: 'Em Contato', 
          lastInteraction: new Date().toISOString(),
          history: [...l.history, newHistoryItem]
        };
      }
      return l;
    });

    setLeads(updatedLeads);
    setActiveLead(updatedLeads.find(l => l.id === activeLead.id));
  };

  const handleSelectLead = (lead) => {
    setActiveLead(lead);
    setActiveTab('flow'); 
  };

  const menuItems = [
    { id: 'leads', label: 'Gestão de Leads', icon: Users },
    { id: 'manifesto', label: 'Manifesto', icon: Heart },
    { id: 'flow', label: 'Fluxo de Atendimento', icon: MessageCircle },
    { id: 'objections', label: 'Objeções', icon: ShieldAlert },
    { id: 'cadence', label: 'Cadência', icon: Clock },
    { id: 'checklist', label: 'Checklist', icon: ListChecks },
  ];

  const renderContent = () => {
    switch (activeTab) {
      case 'leads': return <LeadsManager leads={leads} setLeads={setLeads} onSelectLead={handleSelectLead} activeLead={activeLead} attendantName={attendantName} setAttendantName={setAttendantName} currentUser={currentUser} />;
      case 'manifesto': return <ManifestoSection />;
      case 'flow': return <FlowSection activeLead={activeLead} logAction={logLeadAction} attendantName={attendantName} />;
      case 'objections': return <ObjectionsSection attendantName={attendantName} activeLead={activeLead} logAction={logLeadAction} />; 
      case 'cadence': return <CadenceSection attendantName={attendantName} activeLead={activeLead} logAction={logLeadAction} />;
      case 'checklist': return <ChecklistSection />;
      default: return <LeadsManager leads={leads} setLeads={setLeads} onSelectLead={handleSelectLead} activeLead={activeLead} attendantName={attendantName} setAttendantName={setAttendantName} currentUser={currentUser} />;
    }
  };

  // Se não estiver logado, mostra tela de Login
  if (!isAuthenticated) {
    return <LoginScreen onLogin={handleLogin} />;
  }

  // App Principal
  return (
    <div className="min-h-screen bg-stone-100 font-sans text-stone-800 flex flex-col md:flex-row animate-fadeIn">
      {/* Sidebar Desktop */}
      <aside className="hidden md:flex flex-col w-64 bg-stone-900 text-stone-200 h-screen sticky top-0 overflow-y-auto">
        <div className="p-6 border-b border-stone-800">
          <h1 className="font-sans text-xl tracking-widest text-white leading-tight">PINHEIRO <br/><span className="font-light text-stone-400">MARTINEZ</span></h1>
          <p className="text-xs text-stone-500 mt-2 uppercase tracking-widest">CRM & Playbook</p>
        </div>
        
        {/* Usuário Logado */}
        <div className="px-6 py-4 bg-stone-800/30 border-b border-stone-800 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full bg-stone-700 flex items-center justify-center text-xs font-bold text-white">
               {currentUser?.name?.charAt(0)}
            </div>
            <div className="text-sm">
               <p className="text-white font-medium leading-none">{currentUser?.name}</p>
               <p className="text-[10px] text-stone-400 uppercase">{currentUser?.role}</p>
            </div>
          </div>
          <button onClick={handleLogout} className="text-stone-500 hover:text-red-400" title="Sair">
            <LogOut size={16} />
          </button>
        </div>
        
        {activeLead && (
          <div className="px-4 py-3 bg-blue-900/20 border-b border-stone-800">
            <p className="text-[10px] text-stone-400 uppercase mb-1">Atendendo agora:</p>
            <div className="flex items-center justify-between">
              <span className="font-medium text-white text-sm truncate">{activeLead.name}</span>
              <button onClick={() => setActiveLead(null)} className="text-stone-400 hover:text-white"><X size={14}/></button>
            </div>
          </div>
        )}

        <nav className="flex-1 p-4 space-y-2">
          {menuItems.map(item => (
            <button
              key={item.id}
              onClick={() => setActiveTab(item.id)}
              className={`w-full flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors ${
                activeTab === item.id 
                  ? 'bg-stone-800 text-white font-medium shadow-md border-l-2 border-white' 
                  : 'text-stone-400 hover:bg-stone-800 hover:text-white'
              }`}
            >
              <item.icon size={18} />
              {item.label}
            </button>
          ))}
        </nav>
      </aside>

      {/* Mobile Header */}
      <header className="md:hidden bg-stone-900 text-white p-4 flex items-center justify-between sticky top-0 z-20 shadow-md">
        <div>
           <h1 className="font-sans text-lg leading-none tracking-wide">PINHEIRO MARTINEZ</h1>
           <p className="text-[10px] text-stone-400 uppercase tracking-widest">CRM</p>
        </div>
        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
          {isMobileMenuOpen ? <X /> : <Menu />}
        </button>
      </header>

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="md:hidden fixed inset-0 bg-stone-900 z-10 pt-20 px-4 space-y-2 flex flex-col h-screen pb-6">
          {menuItems.map(item => (
            <button
              key={item.id}
              onClick={() => {
                setActiveTab(item.id);
                setIsMobileMenuOpen(false);
              }}
              className={`w-full flex items-center gap-3 px-4 py-4 text-sm rounded-lg transition-colors border border-stone-800 ${
                activeTab === item.id 
                  ? 'bg-stone-800 text-white' 
                  : 'text-stone-400 hover:bg-stone-800'
              }`}
            >
              <item.icon size={18} />
              {item.label}
            </button>
          ))}
          <div className="mt-auto border-t border-stone-800 pt-4">
            <button onClick={handleLogout} className="w-full flex items-center gap-3 px-4 py-4 text-stone-400 hover:text-white">
              <LogOut size={18} /> Sair
            </button>
          </div>
        </div>
      )}

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 overflow-y-auto">
        <div className="max-w-4xl mx-auto">
          <header className="mb-8 md:flex justify-between items-end border-b border-stone-200 pb-4">
            <div>
              <h2 className="text-2xl md:text-3xl font-sans font-light tracking-wide text-stone-800">
                {menuItems.find(i => i.id === activeTab)?.label}
              </h2>
              <p className="text-stone-500 text-sm mt-1">
                {activeLead ? `Focando no atendimento de ${activeLead.name}` : 'Visão geral e gestão'}
              </p>
            </div>
            <div className="hidden md:block text-xs text-stone-400 bg-white px-3 py-1 rounded-full border border-stone-200">
              v2.5 Login Seguro
            </div>
          </header>
          
          {renderContent()}
        </div>
      </main>
    </div>
  );
}