import React, { useState, useRef } from 'react';
import { 
  Building2, Phone, Mail, MapPin, Globe, Calendar, 
  FileText, Users, Plus, ArrowLeft, MoreHorizontal, 
  Download, Search, Filter, CheckCircle, Briefcase, ExternalLink, X, Save, UploadCloud, DollarSign, MessageCircle, AlertTriangle, Pencil, Camera, Trash2, ChevronDown
} from 'lucide-react';
import { Company, ContactPerson, CompanyDocument, Service } from '../types';
import { useToast } from '../contexts/ToastContext';

interface CRMViewProps {
  companies: Company[];
  setCompanies: (companies: Company[]) => void;
  availableServices: Service[];
}

// Simple Modal (Reused)
const Modal: React.FC<{isOpen: boolean; onClose: () => void; title: string; children: React.ReactNode; maxWidth?: string}> = ({ isOpen, onClose, title, children, maxWidth = 'max-w-lg' }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" onClick={onClose}></div>
      <div className={`relative bg-white rounded-2xl shadow-xl w-full ${maxWidth} overflow-hidden animate-fade-in flex flex-col max-h-[90vh]`}>
        <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center flex-shrink-0">
          <h3 className="font-bold text-slate-800 text-lg">{title}</h3>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600"><X size={20}/></button>
        </div>
        <div className="p-6 overflow-y-auto">{children}</div>
      </div>
    </div>
  );
};

export const CRMView: React.FC<CRMViewProps> = ({ companies, setCompanies, availableServices }) => {
  const { addToast } = useToast();
  const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
  const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'overview' | 'contacts' | 'documents' | 'services'>('overview');

  // Modal States
  const [isCompanyModalOpen, setIsCompanyModalOpen] = useState(false);
  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
  const [isServiceModalOpen, setIsServiceModalOpen] = useState(false);

  // Editing States
  const [isEditingOverview, setIsEditingOverview] = useState(false);
  const [editingContactId, setEditingContactId] = useState<string | null>(null);

  // Forms State
  const [newCompany, setNewCompany] = useState<Partial<Company>>({ status: 'active', industry: 'Outro', logo: '' });
  const [overviewForm, setOverviewForm] = useState<Partial<Company>>({});
  const [contactForm, setContactForm] = useState<Partial<ContactPerson>>({});
  const [selectedServiceId, setSelectedServiceId] = useState('');

  // Refs for File Uploads
  const logoInputRef = useRef<HTMLInputElement>(null);
  const avatarInputRef = useRef<HTMLInputElement>(null);
  const docInputRef = useRef<HTMLInputElement>(null);

  const selectedCompany = companies.find(c => c.id === selectedCompanyId);
  const clientRevenue = selectedCompany ? selectedCompany.activeServices.reduce((acc, s) => acc + s.price, 0) : 0;

  // --- HELPER: FILE TO BASE64 ---
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>, callback: (base64: string) => void) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        callback(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  // --- ACTIONS ---

  const handleSaveCompany = () => {
    if (!newCompany.name) {
        addToast({ type: 'warning', title: 'Campos Obrigatórios', message: 'Por favor, informe ao menos a Razão Social.' });
        return;
    }
    const company: Company = {
        ...newCompany,
        id: Math.random().toString(36).substr(2, 9),
        logo: newCompany.logo || `https://ui-avatars.com/api/?name=${newCompany.name}&background=random`,
        contacts: [],
        documents: [],
        activeServices: []
    } as Company;
    setCompanies([...companies, company]);
    setIsCompanyModalOpen(false);
    setNewCompany({ status: 'active', industry: 'Outro', logo: '' });
    addToast({ type: 'success', title: 'Empresa Cadastrada', message: `${company.name} foi adicionada com sucesso.` });
  };

  const handleUpdateOverview = () => {
    if (!selectedCompany || !overviewForm.name) return;
    
    const updatedCompanies = companies.map(c => {
        if (c.id === selectedCompany.id) {
            return { ...c, ...overviewForm };
        }
        return c;
    });
    setCompanies(updatedCompanies);
    setIsEditingOverview(false);
    addToast({ type: 'success', title: 'Dados Atualizados', message: 'As informações da empresa foram salvas.' });
  };

  const openContactModal = (contact?: ContactPerson) => {
      if (contact) {
          setEditingContactId(contact.id);
          setContactForm(contact);
      } else {
          setEditingContactId(null);
          setContactForm({ avatar: '' });
      }
      setIsContactModalOpen(true);
  };

  const handleSaveContact = () => {
    if (!selectedCompany || !contactForm.name) {
        addToast({ type: 'warning', title: 'Nome Obrigatório', message: 'Informe o nome do responsável.' });
        return;
    }

    let updatedContacts = [...selectedCompany.contacts];

    if (editingContactId) {
        // Edit existing
        updatedContacts = updatedContacts.map(c => c.id === editingContactId ? { ...c, ...contactForm } as ContactPerson : c);
    } else {
        // Create new
        const newContact: ContactPerson = {
            ...contactForm,
            id: Math.random().toString(36).substr(2, 9),
            avatar: contactForm.avatar || `https://ui-avatars.com/api/?name=${contactForm.name}&background=random`
        } as ContactPerson;
        updatedContacts.push(newContact);
    }
    
    const updatedCompanies = companies.map(c => {
        if (c.id === selectedCompany.id) {
            return { ...c, contacts: updatedContacts };
        }
        return c;
    });
    setCompanies(updatedCompanies);
    setIsContactModalOpen(false);
    setContactForm({});
    setEditingContactId(null);
    addToast({ type: 'success', title: 'Responsável Salvo', message: 'Lista de contatos atualizada.' });
  };

  const handleDeleteContact = (contactId: string) => {
      if (!selectedCompany || !window.confirm("Excluir responsável?")) return;
      const updatedCompanies = companies.map(c => {
        if (c.id === selectedCompany.id) {
            return { ...c, contacts: c.contacts.filter(ct => ct.id !== contactId) };
        }
        return c;
    });
    setCompanies(updatedCompanies);
    addToast({ type: 'info', title: 'Responsável Removido' });
  };

  const handleUploadDocument = (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0];
      if (!file || !selectedCompany) return;

      const newDoc: CompanyDocument = {
          id: Math.random().toString(36).substr(2, 9),
          title: file.name,
          type: file.name.endsWith('.pdf') ? 'briefing' : 'other',
          date: new Date().toLocaleDateString('pt-BR'),
          size: `${(file.size / 1024 / 1024).toFixed(2)} MB`
      };

      const updatedCompanies = companies.map(c => {
        if (c.id === selectedCompany.id) {
            return { ...c, documents: [...c.documents, newDoc] };
        }
        return c;
    });
    setCompanies(updatedCompanies);
    addToast({ type: 'success', title: 'Upload Concluído', message: 'Arquivo anexado com sucesso.' });
  };

  const handleAddService = () => {
    if (!selectedCompany || !selectedServiceId) return;
    const serviceToAdd = availableServices.find(s => s.id === selectedServiceId);
    if (!serviceToAdd) return;

    const updatedCompanies = companies.map(c => {
      if (c.id === selectedCompany.id) {
        return { ...c, activeServices: [...c.activeServices, serviceToAdd] };
      }
      return c;
    });
    setCompanies(updatedCompanies);
    setIsServiceModalOpen(false);
    setSelectedServiceId('');
    addToast({ type: 'success', title: 'Serviço Adicionado', message: 'Contrato atualizado.' });
  };

  const handleRemoveService = (index: number) => {
    if (!selectedCompany) return;
    const updatedCompanies = companies.map(c => {
        if (c.id === selectedCompany.id) {
            const newServices = [...c.activeServices];
            newServices.splice(index, 1);
            return { ...c, activeServices: newServices };
        }
        return c;
    });
    setCompanies(updatedCompanies);
    addToast({ type: 'info', title: 'Serviço Removido' });
  };

  const openWhatsApp = (phone: string) => {
    const cleanPhone = phone.replace(/\D/g, '');
    window.open(`https://wa.me/55${cleanPhone}`, '_blank');
  };

  // Styles
  const inputClass = "w-full p-3 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-200 outline-none text-slate-800 text-sm";
  const selectClass = "w-full bg-white border border-slate-200 rounded-xl px-4 py-3 pr-10 text-sm font-medium text-slate-700 outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 appearance-none transition-all cursor-pointer shadow-sm";
  const labelClass = "block text-xs font-bold text-slate-700 mb-1 uppercase tracking-wide";

  // --- VIEWS ---

  if (viewMode === 'list') {
    return (
      <div className="space-y-8 animate-fade-in">
         <Modal isOpen={isCompanyModalOpen} onClose={() => setIsCompanyModalOpen(false)} title="Nova Empresa" maxWidth="max-w-2xl">
             <div className="grid grid-cols-2 gap-4">
                 {/* Logo Upload */}
                 <div className="col-span-2 flex flex-col items-center justify-center mb-4">
                    <div 
                        className="w-24 h-24 rounded-2xl bg-slate-100 border-2 border-dashed border-slate-300 flex items-center justify-center cursor-pointer overflow-hidden hover:border-primary-400 transition-colors relative group"
                        onClick={() => logoInputRef.current?.click()}
                    >
                        {newCompany.logo ? (
                            <img src={newCompany.logo} alt="Logo" className="w-full h-full object-cover" />
                        ) : (
                            <Camera className="text-slate-400 group-hover:text-primary-500" size={32} />
                        )}
                        <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span className="text-white text-xs font-bold">Alterar</span>
                        </div>
                    </div>
                    <span className="text-xs text-slate-400 mt-2">Clique para adicionar logo</span>
                    <input 
                        type="file" 
                        ref={logoInputRef} 
                        className="hidden" 
                        accept="image/*"
                        onChange={(e) => handleFileChange(e, (base64) => setNewCompany({...newCompany, logo: base64}))} 
                    />
                 </div>

                 <div className="col-span-2">
                     <label className={labelClass}>Razão Social</label>
                     <input type="text" className={inputClass} value={newCompany.name || ''} onChange={e => setNewCompany({...newCompany, name: e.target.value})} placeholder="Ex: Tech Solutions LTDA" />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>Nome Fantasia</label>
                     <input type="text" className={inputClass} value={newCompany.fantasyName || ''} onChange={e => setNewCompany({...newCompany, fantasyName: e.target.value})} placeholder="Ex: Tech Sol" />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>CNPJ</label>
                     <input type="text" className={inputClass} value={newCompany.cnpj || ''} onChange={e => setNewCompany({...newCompany, cnpj: e.target.value})} placeholder="00.000.000/0001-00" />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>Inscrição Estadual</label>
                     <input type="text" className={inputClass} value={newCompany.ie || ''} onChange={e => setNewCompany({...newCompany, ie: e.target.value})} />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>Cidade - UF</label>
                     <input type="text" className={inputClass} value={newCompany.city || ''} onChange={e => setNewCompany({...newCompany, city: e.target.value})} />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>Telefone Geral</label>
                     <input type="text" className={inputClass} value={newCompany.phone || ''} onChange={e => setNewCompany({...newCompany, phone: e.target.value})} />
                 </div>
                 <div className="col-span-1">
                     <label className={labelClass}>Email Geral</label>
                     <input type="email" className={inputClass} value={newCompany.email || ''} onChange={e => setNewCompany({...newCompany, email: e.target.value})} />
                 </div>
                 <div className="col-span-2">
                     <label className={labelClass}>Endereço Completo</label>
                     <input type="text" className={inputClass} value={newCompany.address || ''} onChange={e => setNewCompany({...newCompany, address: e.target.value})} />
                 </div>
                  <div className="col-span-1">
                     <label className={labelClass}>Status</label>
                     <div className="relative">
                        <select className={selectClass} value={newCompany.status} onChange={e => setNewCompany({...newCompany, status: e.target.value as any})}>
                            <option value="active">Ativo</option>
                            <option value="pending">Pendente</option>
                            <option value="inactive">Inativo</option>
                            <option value="overdue">Em Atraso</option>
                        </select>
                        <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={18} />
                     </div>
                 </div>
                 <div className="col-span-2 pt-4">
                     <button onClick={handleSaveCompany} className="w-full py-3 bg-primary-500 text-white font-bold rounded-xl shadow-lg hover:bg-primary-600 transition-colors">Cadastrar Empresa</button>
                 </div>
             </div>
         </Modal>

         <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div>
              <h1 className="text-2xl font-bold text-slate-800">Clientes & Empresas</h1>
              <p className="text-slate-500">Gerencie contratos, responsáveis e documentos.</p>
            </div>
            <button onClick={() => setIsCompanyModalOpen(true)} className="flex items-center gap-2 px-5 py-2.5 bg-primary-500 text-white rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-200/50 transition-all font-bold">
                <Plus size={18} /> Nova Empresa
            </button>
         </div>
         
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
          {companies.map((company) => {
            const totalValue = company.activeServices.reduce((acc, s) => acc + s.price, 0);
            return (
              <div 
                key={company.id} 
                onClick={() => { setSelectedCompanyId(company.id); setViewMode('detail'); }}
                className={`group bg-white p-6 rounded-[2rem] shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all border cursor-pointer relative overflow-hidden ${company.status === 'overdue' ? 'border-red-200 ring-1 ring-red-100' : 'border-slate-50'}`}
              >
                {company.status === 'overdue' && (
                    <div className="absolute top-0 right-0 bg-red-500 text-white text-[10px] font-bold px-3 py-1 rounded-bl-xl">
                        EM ATRASO
                    </div>
                )}
                
                <div className="flex gap-4 mb-4 mt-2">
                  <div className="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 font-bold text-xl uppercase overflow-hidden border border-slate-100">
                      {company.logo ? <img src={company.logo} className="w-full h-full object-cover"/> : company.name.substring(0,2)}
                  </div>
                  <div>
                    <h3 className="font-bold text-slate-800 text-lg group-hover:text-primary-500 line-clamp-1">{company.fantasyName || company.name}</h3>
                    <p className="text-xs text-slate-400">{company.city || 'Local não informado'}</p>
                    <div className="mt-1 flex gap-2">
                         {company.status === 'active' && <span className="inline-block px-2 py-0.5 bg-green-50 text-green-600 rounded text-[10px] font-bold uppercase">Ativo</span>}
                         {company.status === 'pending' && <span className="inline-block px-2 py-0.5 bg-amber-50 text-amber-600 rounded text-[10px] font-bold uppercase">Pendente</span>}
                         {company.status === 'overdue' && <span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 rounded text-[10px] font-bold uppercase">Financeiro Pendente</span>}
                    </div>
                  </div>
                </div>
                <div className="border-t border-slate-50 pt-4 flex justify-between items-center">
                  <span className="text-sm text-slate-500 flex items-center gap-1"><Users size={14}/> {company.contacts.length} Resp.</span>
                  <span className="font-bold text-slate-800 text-sm">R$ {totalValue.toLocaleString('pt-BR')} /mês</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // DETALHE DA EMPRESA
  if (selectedCompany) {
    return (
      <div className="space-y-6 animate-fade-in pb-10">
        
        {/* Modal Contato (Novo/Edição) */}
        <Modal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} title={editingContactId ? "Editar Responsável" : "Novo Responsável"}>
             <div className="space-y-4">
                 <div className="flex justify-center mb-4">
                    <div 
                        className="w-20 h-20 rounded-full bg-slate-100 border-2 border-dashed border-slate-300 flex items-center justify-center cursor-pointer overflow-hidden hover:border-primary-400 relative group"
                        onClick={() => avatarInputRef.current?.click()}
                    >
                        {contactForm.avatar ? (
                            <img src={contactForm.avatar} alt="Avatar" className="w-full h-full object-cover" />
                        ) : (
                            <Camera className="text-slate-400 group-hover:text-primary-500" size={24} />
                        )}
                         <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-full">
                            <span className="text-white text-[10px] font-bold">Foto</span>
                        </div>
                    </div>
                    <input 
                        type="file" 
                        ref={avatarInputRef} 
                        className="hidden" 
                        accept="image/*"
                        onChange={(e) => handleFileChange(e, (base64) => setContactForm({...contactForm, avatar: base64}))} 
                    />
                 </div>

                 <div>
                     <label className={labelClass}>Nome Completo</label>
                     <input type="text" className={inputClass} value={contactForm.name || ''} onChange={e => setContactForm({...contactForm, name: e.target.value})} />
                 </div>
                 <div>
                     <label className={labelClass}>Cargo / Função</label>
                     <input type="text" className={inputClass} value={contactForm.role || ''} onChange={e => setContactForm({...contactForm, role: e.target.value})} />
                 </div>
                 <div>
                     <label className={labelClass}>Email</label>
                     <input type="email" className={inputClass} value={contactForm.email || ''} onChange={e => setContactForm({...contactForm, email: e.target.value})} />
                 </div>
                 <div>
                     <label className={labelClass}>Telefone / WhatsApp</label>
                     <input type="text" className={inputClass} value={contactForm.phone || ''} onChange={e => setContactForm({...contactForm, phone: e.target.value})} placeholder="(00) 00000-0000" />
                 </div>
                 <button onClick={handleSaveContact} className="w-full py-3 bg-primary-500 text-white font-bold rounded-xl mt-4">Salvar Responsável</button>
             </div>
        </Modal>

        {/* Modal Adicionar Serviço */}
        <Modal isOpen={isServiceModalOpen} onClose={() => setIsServiceModalOpen(false)} title="Adicionar Serviço">
           <div className="space-y-4">
               <label className={labelClass}>Selecione o Serviço</label>
               <div className="relative">
                 <select className={selectClass} value={selectedServiceId} onChange={e => setSelectedServiceId(e.target.value)}>
                   <option value="">Selecione...</option>
                   {availableServices.map(s => <option key={s.id} value={s.id}>{s.name} - R$ {s.price}</option>)}
                 </select>
                 <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={18} />
               </div>
               <button onClick={handleAddService} disabled={!selectedServiceId} className="w-full py-3 bg-primary-500 text-white font-bold rounded-xl mt-4 disabled:opacity-50">Adicionar</button>
           </div>
        </Modal>

        {/* Header Detalhe */}
        <div className="flex items-center gap-4">
          <button onClick={() => setViewMode('list')} className="p-2 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors">
            <ArrowLeft size={20} />
          </button>
          <div className="flex-1">
             <h1 className="text-2xl font-bold text-slate-800">{selectedCompany.fantasyName || selectedCompany.name}</h1>
             <p className="text-sm text-slate-500">{selectedCompany.name} - {selectedCompany.cnpj}</p>
          </div>
          {selectedCompany.status === 'overdue' && (
              <div className="px-4 py-2 bg-red-100 text-red-700 rounded-xl font-bold flex items-center gap-2 animate-pulse">
                  <AlertTriangle size={18} /> CLIENTE EM ATRASO
              </div>
          )}
        </div>

        {/* Tabs */}
        <div className="flex border-b border-slate-200">
            {['overview', 'contacts', 'documents', 'services'].map(tab => (
                <button
                    key={tab}
                    onClick={() => setActiveTab(tab as any)}
                    className={`px-6 py-3 text-sm font-bold border-b-2 transition-colors ${
                        activeTab === tab 
                        ? 'border-primary-500 text-primary-600' 
                        : 'border-transparent text-slate-500 hover:text-slate-700'
                    }`}
                >
                    {tab === 'overview' && 'Visão Geral'}
                    {tab === 'contacts' && 'Responsáveis'}
                    {tab === 'documents' && 'Arquivos'}
                    {tab === 'services' && 'Serviços'}
                </button>
            ))}
        </div>

        {/* Tab Content */}
        <div className="animate-fade-in">
            {activeTab === 'overview' && (
                <div className="space-y-6">
                    <div className="flex justify-end">
                        {!isEditingOverview ? (
                             <button onClick={() => { setOverviewForm(selectedCompany); setIsEditingOverview(true); }} className="flex items-center gap-2 px-4 py-2 text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-xl font-bold text-sm transition-colors">
                                <Pencil size={16} /> Editar Dados
                             </button>
                        ) : (
                             <div className="flex gap-2">
                                <button onClick={() => setIsEditingOverview(false)} className="px-4 py-2 text-slate-500 hover:text-slate-700 font-medium">Cancelar</button>
                                <button onClick={handleUpdateOverview} className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-xl font-bold hover:bg-green-600 shadow-lg shadow-green-200">
                                    <Save size={16} /> Salvar Alterações
                                </button>
                             </div>
                        )}
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="bg-white p-6 rounded-[2rem] border border-slate-50 shadow-sm space-y-4">
                            <h3 className="font-bold text-slate-800 text-lg border-b border-slate-50 pb-2">Dados Cadastrais</h3>
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <span className="block text-xs text-slate-400">CNPJ</span> 
                                    {isEditingOverview ? <input className={inputClass} value={overviewForm.cnpj || ''} onChange={e => setOverviewForm({...overviewForm, cnpj: e.target.value})} /> : <span className="text-sm font-medium text-slate-700">{selectedCompany.cnpj || '-'}</span>}
                                </div>
                                <div>
                                    <span className="block text-xs text-slate-400">Inscrição Estadual</span> 
                                    {isEditingOverview ? <input className={inputClass} value={overviewForm.ie || ''} onChange={e => setOverviewForm({...overviewForm, ie: e.target.value})} /> : <span className="text-sm font-medium text-slate-700">{selectedCompany.ie || 'Isento'}</span>}
                                </div>
                                <div className="col-span-2">
                                    <span className="block text-xs text-slate-400">Razão Social</span> 
                                    {isEditingOverview ? <input className={inputClass} value={overviewForm.name || ''} onChange={e => setOverviewForm({...overviewForm, name: e.target.value})} /> : <span className="text-sm font-medium text-slate-700">{selectedCompany.name}</span>}
                                </div>
                                <div className="col-span-2">
                                    <span className="block text-xs text-slate-400">Endereço</span> 
                                    {isEditingOverview ? (
                                        <div className="grid grid-cols-3 gap-2">
                                            <input className={`${inputClass} col-span-2`} value={overviewForm.address || ''} onChange={e => setOverviewForm({...overviewForm, address: e.target.value})} placeholder="Rua..." />
                                            <input className={inputClass} value={overviewForm.city || ''} onChange={e => setOverviewForm({...overviewForm, city: e.target.value})} placeholder="Cidade..." />
                                        </div>
                                    ) : (
                                        <span className="text-sm font-medium text-slate-700">{selectedCompany.address}, {selectedCompany.city}</span>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div className="bg-white p-6 rounded-[2rem] border border-slate-50 shadow-sm space-y-4">
                            <h3 className="font-bold text-slate-800 text-lg border-b border-slate-50 pb-2">Contato Geral</h3>
                            <div className="space-y-3">
                                 <div className="flex items-center gap-3">
                                     <Phone size={18} className="text-slate-400"/> 
                                     {isEditingOverview ? <input className={inputClass} value={overviewForm.phone || ''} onChange={e => setOverviewForm({...overviewForm, phone: e.target.value})} /> : <span className="text-sm text-slate-700">{selectedCompany.phone}</span>}
                                 </div>
                                 <div className="flex items-center gap-3">
                                     <Mail size={18} className="text-slate-400"/> 
                                     {isEditingOverview ? <input className={inputClass} value={overviewForm.email || ''} onChange={e => setOverviewForm({...overviewForm, email: e.target.value})} /> : <span className="text-sm text-slate-700">{selectedCompany.email}</span>}
                                 </div>
                                 <div className="flex items-center gap-3">
                                     <Globe size={18} className="text-slate-400"/> 
                                     {isEditingOverview ? <input className={inputClass} value={overviewForm.website || ''} onChange={e => setOverviewForm({...overviewForm, website: e.target.value})} placeholder="Website" /> : <span className="text-sm text-slate-700">{selectedCompany.website || 'Sem site'}</span>}
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {activeTab === 'contacts' && (
                <div className="space-y-4">
                     <div className="flex justify-end">
                         <button onClick={() => openContactModal()} className="flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-xl text-sm font-bold hover:bg-slate-900"><Plus size={16}/> Adicionar Responsável</button>
                     </div>
                     {selectedCompany.contacts.length === 0 ? (
                         <div className="text-center py-10 text-slate-400 bg-white rounded-[2rem] border border-dashed border-slate-200">
                             Nenhum responsável cadastrado.
                         </div>
                     ) : (
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             {selectedCompany.contacts.map(contact => (
                                 <div key={contact.id} className="bg-white p-4 rounded-2xl border border-slate-100 flex items-center justify-between shadow-sm group">
                                     <div className="flex items-center gap-3">
                                         <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-500 overflow-hidden border border-slate-200">
                                             {contact.avatar ? <img src={contact.avatar} className="w-full h-full object-cover"/> : contact.name.charAt(0)}
                                         </div>
                                         <div>
                                             <h4 className="font-bold text-slate-800">{contact.name}</h4>
                                             <p className="text-xs text-slate-500">{contact.role}</p>
                                             <p className="text-xs text-slate-400 mt-1">{contact.email}</p>
                                         </div>
                                     </div>
                                     <div className="flex gap-2">
                                         <button onClick={() => openContactModal(contact)} className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
                                            <Pencil size={16} />
                                         </button>
                                         <button onClick={() => handleDeleteContact(contact.id)} className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-500 transition-colors">
                                            <Trash2 size={16} />
                                         </button>
                                         <button 
                                            onClick={() => openWhatsApp(contact.phone)}
                                            className="w-8 h-8 rounded-full bg-green-50 text-green-600 flex items-center justify-center hover:bg-green-500 hover:text-white transition-colors"
                                            title={`WhatsApp: ${contact.phone}`}
                                         >
                                             <MessageCircle size={16} />
                                         </button>
                                     </div>
                                 </div>
                             ))}
                         </div>
                     )}
                </div>
            )}

            {activeTab === 'documents' && (
                <div className="space-y-6">
                    <input 
                        type="file" 
                        ref={docInputRef} 
                        className="hidden" 
                        onChange={handleUploadDocument} 
                    />
                    <div 
                        onClick={() => docInputRef.current?.click()}
                        className="bg-slate-50 border-2 border-dashed border-slate-200 rounded-2xl p-8 text-center hover:bg-slate-100 transition-colors cursor-pointer group"
                    >
                        <UploadCloud size={48} className="mx-auto text-slate-300 group-hover:text-primary-400 mb-2 transition-colors" />
                        <h4 className="font-bold text-slate-600">Arraste arquivos aqui ou clique para anexar</h4>
                        <p className="text-xs text-slate-400 mt-1">PDFs, Contratos (DOCX), Briefings.</p>
                    </div>

                    <div className="space-y-2">
                        {selectedCompany.documents.map(doc => (
                            <div key={doc.id} className="flex items-center justify-between p-4 bg-white rounded-xl border border-slate-100 hover:shadow-sm transition-shadow">
                                <div className="flex items-center gap-3">
                                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${doc.type === 'contract' ? 'bg-blue-50 text-blue-500' : 'bg-orange-50 text-orange-500'}`}>
                                        <FileText size={20} />
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-slate-800 text-sm">{doc.title}</h4>
                                        <p className="text-xs text-slate-400">{doc.date} • {doc.size}</p>
                                    </div>
                                </div>
                                <button className="p-2 text-slate-400 hover:text-primary-500"><Download size={18}/></button>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {activeTab === 'services' && (
                <div className="space-y-4">
                     <div className="flex justify-between items-center bg-white p-4 rounded-2xl border border-slate-100">
                         <div>
                             <p className="text-xs text-slate-400 uppercase font-bold">Faturamento Total</p>
                             <p className="text-xl font-bold text-slate-800">R$ {clientRevenue.toLocaleString('pt-BR')} <span className="text-xs font-normal text-slate-400">/mês</span></p>
                         </div>
                         <button onClick={() => setIsServiceModalOpen(true)} className="px-4 py-2 bg-primary-500 text-white text-sm font-bold rounded-xl hover:bg-primary-600">Adicionar Serviço</button>
                     </div>
                     
                     <div className="space-y-2">
                        {selectedCompany.activeServices.map((service, idx) => (
                            <div key={idx} className="flex justify-between items-center p-4 bg-white rounded-xl border border-slate-100">
                                <div>
                                    <h4 className="font-bold text-slate-800 text-sm">{service.name}</h4>
                                    <span className="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded">{service.billingType === 'recurring' ? 'Recorrente' : 'Pontual'}</span>
                                </div>
                                <div className="flex items-center gap-4">
                                    <span className="font-bold text-slate-700">R$ {service.price.toLocaleString('pt-BR')}</span>
                                    <button onClick={() => handleRemoveService(idx)} className="text-slate-300 hover:text-red-500"><X size={16}/></button>
                                </div>
                            </div>
                        ))}
                     </div>
                </div>
            )}
        </div>

      </div>
    );
  }

  return null;
};