import React, { useState } from 'react';
import { 
  LayoutDashboard, 
  Settings, 
  LogOut, 
  Save, 
  Monitor, 
  Box, 
  Users, 
  MessageSquare,
  Wrench,
  Tags,
  FileText,
  Check,
  Eye,
  Trash2,
  PlusCircle,
  Palette,
  Briefcase,
  Image,
  Upload,
  Menu as MenuIcon,
  Columns,
  X,
  ArrowLeftRight
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useData } from '../../contexts/DataContext';
import { Hero } from '../Hero';
import { Header } from '../Header';
import { 
  ServicesSection, 
  PackagesSection, 
  AboutSection, 
  TeamSection, 
  TestimonialsSection, 
  FaqSection, 
  BlogSection, 
  SpecialOffersSection,
  ClientsSection,
  WhyChooseSection,
  GallerySection,
  StatsSection,
  Footer,
  BeforeAfterSection
} from '../AppContent';
import { FooterColumn, FooterLink } from '../../types';

const SidebarItem = ({ icon: Icon, label, active, onClick }: any) => (
  <button
    onClick={onClick}
    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium ${
      active 
        ? 'bg-primary text-white' 
        : 'text-gray-400 hover:bg-zinc-800 hover:text-white'
    }`}
  >
    <Icon size={18} />
    {label}
  </button>
);

const InputGroup = ({ label, value, onChange, type = "text", textarea = false, hint }: any) => (
  <div className="mb-4">
    <div className="flex justify-between">
      <label className="block text-xs font-bold text-gray-500 uppercase mb-1">{label}</label>
      {hint && <span className="text-xs text-gray-600">{hint}</span>}
    </div>
    {textarea ? (
      <textarea
        className="w-full bg-zinc-900 border border-zinc-700 rounded p-2 text-white text-sm focus:border-primary outline-none min-h-[100px]"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    ) : (
      <input
        type={type}
        className="w-full bg-zinc-900 border border-zinc-700 rounded p-2 text-white text-sm focus:border-primary outline-none"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    )}
  </div>
);

const SectionTextEditor = ({ sectionKey, title = "Textos da Seção" }: { sectionKey: string, title?: string }) => {
    const { data, updateData } = useData();
    // @ts-ignore
    const texts = data.texts[sectionKey];

    if (!texts) return null;

    const updateText = (field: string, value: string) => {
        // @ts-ignore
        updateData('texts', {
            ...data.texts,
            [sectionKey]: {
                // @ts-ignore
                ...data.texts[sectionKey],
                [field]: value
            }
        });
    };

    return (
        <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg mb-8">
            <h4 className="text-primary font-bold border-b border-zinc-800 pb-2 mb-4">{title}</h4>
            <div className="grid gap-4">
                {Object.keys(texts).map((key) => (
                    <InputGroup 
                        key={key}
                        label={key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1').trim()} // CamelCase to Title Case
                        value={texts[key]}
                        onChange={(v: string) => updateText(key, v)}
                        textarea={key === 'description' || key === 'subtitle'}
                    />
                ))}
            </div>
        </div>
    );
}

const Toggle = ({ label, checked, onChange }: any) => (
  <div className="flex items-center justify-between p-4 bg-zinc-900 rounded border border-zinc-800">
    <span className="text-white font-medium">{label}</span>
    <button 
      onClick={() => onChange(!checked)}
      className={`w-12 h-6 rounded-full p-1 transition-colors ${checked ? 'bg-green-500' : 'bg-zinc-700'}`}
    >
      <div className={`w-4 h-4 rounded-full bg-white transition-transform ${checked ? 'translate-x-6' : 'translate-x-0'}`} />
    </button>
  </div>
);

// Mapa de tradução para as chaves de visibilidade
const sectionLabels: Record<string, string> = {
  hero: 'Topo / Início (Hero)',
  specialOffers: 'Ofertas Especiais',
  about: 'Sobre Nós',
  services: 'Serviços',
  bigCta: 'Chamada para Ação (Grande)',
  packages: 'Pacotes de Serviços',
  gallery: 'Galeria de Fotos',
  beforeAfter: 'Comparativo Antes/Depois',
  stats: 'Estatísticas',
  whyChoose: 'Por que Escolher',
  testimonials: 'Depoimentos',
  team: 'Equipe',
  faq: 'Perguntas Frequentes (FAQ)',
  blog: 'Blog / Notícias',
  contact: 'Formulário de Contato',
  clients: 'Logos de Clientes'
};

export const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  const { data, updateData } = useData();
  const [activeSection, setActiveSection] = useState('config'); // 'config' | 'visibility' | 'content-hero' etc.
  const [isPreviewOpen, setIsPreviewOpen] = useState(true);
  const [isSaved, setIsSaved] = useState(false);
  const [newImageUrl, setNewImageUrl] = useState('');

  const handleLogout = () => {
    localStorage.removeItem('admin_auth');
    navigate('/admin');
  };

  const handleSave = () => {
    setIsSaved(true);
    setTimeout(() => setIsSaved(false), 2000);
  };

  const updateSettings = (field: string, value: any) => {
    updateData('settings', { ...data.settings, [field]: value });
  };
  
  const updateSocial = (field: string, value: string) => {
    updateData('settings', { ...data.settings, social: { ...data.settings.social, [field]: value } });
  };

  const updateVisibility = (section: string, value: boolean) => {
    updateData('visibility', { ...data.visibility, [section]: value });
  };

  const updateArrayItem = (section: string, index: number, field: string, value: any) => {
    // @ts-ignore
    const newArray = [...data[section]];
    newArray[index] = { ...newArray[index], [field]: value };
    // @ts-ignore
    updateData(section, newArray);
  };

  const addItem = (section: string, emptyItem: any) => {
    // @ts-ignore
    const newArray = [...data[section], emptyItem];
    // @ts-ignore
    updateData(section, newArray);
  };

  const removeItem = (section: string, index: number) => {
    // @ts-ignore
    const newArray = data[section].filter((_, i) => i !== index);
    // @ts-ignore
    updateData(section, newArray);
  };

  // --- Header Helpers ---
  const updateHeaderItem = (index: number, field: string, value: any) => {
    const newItems = [...data.header.items];
    // @ts-ignore
    newItems[index] = { ...newItems[index], [field]: value };
    updateData('header', { ...data.header, items: newItems });
  };
  
  const addHeaderItem = () => {
    const newItems = [...data.header.items, { label: 'Novo Link', href: '#' }];
    updateData('header', { ...data.header, items: newItems });
  };

  const removeHeaderItem = (index: number) => {
    const newItems = data.header.items.filter((_, i) => i !== index);
    updateData('header', { ...data.header, items: newItems });
  };

  const updateCtaButton = (field: string, value: any) => {
      updateData('header', { ...data.header, ctaButton: { ...data.header.ctaButton, [field]: value }});
  }

  // --- Footer Helpers ---
  const updateFooterColumn = (index: number, field: string, value: any) => {
      const newColumns = [...data.footer.columns];
      // @ts-ignore
      newColumns[index] = { ...newColumns[index], [field]: value };
      updateData('footer', { ...data.footer, columns: newColumns });
  };

  const removeFooterColumn = (index: number) => {
      const newColumns = data.footer.columns.filter((_, i) => i !== index);
      updateData('footer', { ...data.footer, columns: newColumns });
  };

  const addFooterColumn = () => {
      const newCol: FooterColumn = { id: `col_${Date.now()}`, title: 'Nova Coluna', type: 'custom', links: [] };
      const newColumns = [...data.footer.columns, newCol];
      updateData('footer', { ...data.footer, columns: newColumns });
  };

  const updateFooterLink = (colIndex: number, linkIndex: number, field: string, value: string) => {
      const newColumns = [...data.footer.columns];
      const col = newColumns[colIndex];
      if (col.links) {
          const newLinks = [...col.links];
          // @ts-ignore
          newLinks[linkIndex] = { ...newLinks[linkIndex], [field]: value };
          col.links = newLinks;
          updateData('footer', { ...data.footer, columns: newColumns });
      }
  };

  const addFooterLink = (colIndex: number) => {
      const newColumns = [...data.footer.columns];
      const col = newColumns[colIndex];
      if (!col.links) col.links = [];
      col.links.push({ label: 'Novo Link', href: '#' });
      updateData('footer', { ...data.footer, columns: newColumns });
  };

  const removeFooterLink = (colIndex: number, linkIndex: number) => {
      const newColumns = [...data.footer.columns];
      const col = newColumns[colIndex];
      if (col.links) {
          col.links = col.links.filter((_, i) => i !== linkIndex);
          updateData('footer', { ...data.footer, columns: newColumns });
      }
  }


  // Função específica para Upload de Imagens na Galeria
  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      const promises: Promise<string>[] = [];

      Array.from(files).forEach(file => {
        const reader = new FileReader();
        const promise = new Promise<string>((resolve) => {
          reader.onload = (e) => {
            if (e.target?.result) resolve(e.target.result as string);
          };
        });
        reader.readAsDataURL(file as Blob);
        promises.push(promise);
      });

      Promise.all(promises).then(base64Images => {
        // @ts-ignore
        const updatedGallery = [...data.gallery, ...base64Images];
        updateData('gallery', updatedGallery);
      });
    }
  };

  const handleAddUrlToGallery = () => {
    if (newImageUrl) {
        // @ts-ignore
        const updatedGallery = [...data.gallery, newImageUrl];
        updateData('gallery', updatedGallery);
        setNewImageUrl('');
    }
  };

  const renderEditor = () => {
    switch(activeSection) {
      case 'config':
        return (
          <div className="space-y-6">
            <h3 className="text-xl font-bold text-white mb-4">Configurações Gerais</h3>
            
            <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg space-y-4">
              <h4 className="text-primary font-bold border-b border-zinc-800 pb-2 mb-4">Identidade Visual</h4>
              <InputGroup label="Nome do Site" value={data.settings.siteName} onChange={(v: string) => updateSettings('siteName', v)} />
              <div className="grid grid-cols-2 gap-4">
                <InputGroup label="Cor Principal (Hex)" value={data.settings.primaryColor} onChange={(v: string) => updateSettings('primaryColor', v)} type="color" />
                <InputGroup label="Texto da Cor" value={data.settings.primaryColor} onChange={(v: string) => updateSettings('primaryColor', v)} />
              </div>
              <InputGroup label="URL do Logo" value={data.settings.logoUrl} onChange={(v: string) => updateSettings('logoUrl', v)} hint="Deixe vazio para usar texto" />
              <InputGroup label="URL do Favicon" value={data.settings.faviconUrl} onChange={(v: string) => updateSettings('faviconUrl', v)} />
            </div>

            <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg space-y-4">
              <h4 className="text-primary font-bold border-b border-zinc-800 pb-2 mb-4">Contato & Social</h4>
              <InputGroup label="WhatsApp (Apenas números)" value={data.settings.whatsappNumber} onChange={(v: string) => updateSettings('whatsappNumber', v)} hint="Ex: 5511999999999" />
              <InputGroup label="Telefone Visível" value={data.settings.contactPhoneDisplay} onChange={(v: string) => updateSettings('contactPhoneDisplay', v)} />
              <InputGroup label="Email para Contato" value={data.settings.contactEmail} onChange={(v: string) => updateSettings('contactEmail', v)} />
              <InputGroup label="Endereço" value={data.settings.address} onChange={(v: string) => updateSettings('address', v)} />
              
              <div className="mt-4 pt-4 border-t border-zinc-800">
                <h5 className="text-white font-bold mb-3 text-sm">Redes Sociais (Deixe vazio para ocultar)</h5>
                <InputGroup label="Instagram URL" value={data.settings.social?.instagram || ''} onChange={(v: string) => updateSocial('instagram', v)} />
                <InputGroup label="Facebook URL" value={data.settings.social?.facebook || ''} onChange={(v: string) => updateSocial('facebook', v)} />
                <InputGroup label="Twitter/X URL" value={data.settings.social?.twitter || ''} onChange={(v: string) => updateSocial('twitter', v)} />
                <InputGroup label="YouTube URL" value={data.settings.social?.youtube || ''} onChange={(v: string) => updateSocial('youtube', v)} />
                <InputGroup label="LinkedIn URL" value={data.settings.social?.linkedin || ''} onChange={(v: string) => updateSocial('linkedin', v)} />
              </div>
            </div>
          </div>
        );

      case 'visibility':
        return (
          <div className="space-y-4">
            <h3 className="text-xl font-bold text-white mb-4">Controle de Seções (Ativar/Desativar)</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {Object.keys(data.visibility).map((key) => (
                 <Toggle 
                    key={key} 
                    label={sectionLabels[key] || key} 
                    checked={data.visibility[key as keyof typeof data.visibility]} 
                    onChange={(v: boolean) => updateVisibility(key, v)} 
                 />
               ))}
            </div>
          </div>
        );
      
      case 'header':
          return (
              <div className="space-y-6">
                  <h3 className="text-xl font-bold text-white mb-4">Menu & Cabeçalho</h3>

                  <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg mb-6">
                      <h4 className="text-primary font-bold mb-4">Botão de Destaque (CTA)</h4>
                      <Toggle label="Exibir Botão" checked={data.header.ctaButton.show} onChange={(v: boolean) => updateCtaButton('show', v)} />
                      {data.header.ctaButton.show && (
                          <div className="mt-4 grid gap-4">
                              <InputGroup label="Texto do Botão" value={data.header.ctaButton.text} onChange={(v: string) => updateCtaButton('text', v)} />
                              <InputGroup label="URL de Destino" value={data.header.ctaButton.url} onChange={(v: string) => updateCtaButton('url', v)} hint="Deixe vazio para abrir o WhatsApp" />
                          </div>
                      )}
                  </div>

                  <div className="space-y-4">
                      <div className="flex justify-between items-center">
                          <h4 className="text-primary font-bold">Itens do Menu</h4>
                          <button onClick={addHeaderItem} className="text-sm text-green-500 hover:text-green-400 flex items-center gap-1"><PlusCircle size={16}/> Adicionar</button>
                      </div>
                      {data.header.items.map((item, idx) => (
                          <div key={idx} className="flex gap-4 items-center bg-zinc-900 p-3 rounded border border-zinc-800">
                              <div className="flex-1 grid grid-cols-2 gap-4">
                                  <input type="text" className="bg-black border border-zinc-700 rounded p-2 text-white text-sm" value={item.label} onChange={(e) => updateHeaderItem(idx, 'label', e.target.value)} placeholder="Nome" />
                                  <input type="text" className="bg-black border border-zinc-700 rounded p-2 text-white text-sm" value={item.href} onChange={(e) => updateHeaderItem(idx, 'href', e.target.value)} placeholder="Link (/sobre ou https://...)" />
                              </div>
                              <button onClick={() => removeHeaderItem(idx)} className="text-red-500 hover:text-red-400 p-2"><Trash2 size={18}/></button>
                          </div>
                      ))}
                  </div>
              </div>
          );

      case 'footer':
          return (
              <div className="space-y-8">
                  <h3 className="text-xl font-bold text-white mb-4">Configuração do Rodapé</h3>

                  <InputGroup label="Descrição do Rodapé" value={data.footer.description} onChange={(v: string) => updateData('footer', { ...data.footer, description: v })} textarea />
                  
                  <div>
                      <div className="flex justify-between items-center mb-4">
                          <h4 className="text-primary font-bold">Estrutura de Colunas</h4>
                          <button onClick={addFooterColumn} className="text-sm text-green-500 hover:text-green-400 flex items-center gap-1"><PlusCircle size={16}/> Adicionar Coluna</button>
                      </div>
                      <div className="space-y-6">
                        {data.footer.columns.map((col, idx) => (
                            <div key={col.id} className="bg-zinc-900 border border-zinc-800 rounded-lg p-4 relative">
                                <button onClick={() => removeFooterColumn(idx)} className="absolute top-4 right-4 text-red-500 hover:text-red-400"><Trash2 size={18}/></button>
                                
                                <div className="grid md:grid-cols-2 gap-4 mb-4">
                                    <InputGroup label="Título da Coluna" value={col.title} onChange={(v: string) => updateFooterColumn(idx, 'title', v)} />
                                    <div>
                                        <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Tipo de Conteúdo</label>
                                        <select 
                                            className="w-full bg-zinc-950 border border-zinc-700 rounded p-2 text-white text-sm focus:border-primary outline-none"
                                            value={col.type}
                                            onChange={(e) => updateFooterColumn(idx, 'type', e.target.value)}
                                        >
                                            <option value="custom">Links Personalizados</option>
                                            <option value="services_dynamic">Lista de Serviços (Automático)</option>
                                            <option value="hours">Horário de Atendimento</option>
                                        </select>
                                    </div>
                                </div>

                                {col.type === 'custom' && (
                                    <div className="bg-zinc-950 p-4 rounded border border-zinc-800">
                                        <div className="flex justify-between items-center mb-2">
                                            <span className="text-xs font-bold text-gray-500 uppercase">Links da Coluna</span>
                                            <button onClick={() => addFooterLink(idx)} className="text-xs text-primary hover:text-white">+ Adicionar Link</button>
                                        </div>
                                        <div className="space-y-2">
                                            {col.links?.map((link, linkIdx) => (
                                                <div key={linkIdx} className="flex gap-2 items-center">
                                                    <input type="text" className="flex-1 bg-zinc-900 border border-zinc-700 rounded p-1.5 text-white text-xs" value={link.label} onChange={(e) => updateFooterLink(idx, linkIdx, 'label', e.target.value)} placeholder="Texto" />
                                                    <input type="text" className="flex-1 bg-zinc-900 border border-zinc-700 rounded p-1.5 text-white text-xs" value={link.href} onChange={(e) => updateFooterLink(idx, linkIdx, 'href', e.target.value)} placeholder="URL" />
                                                    <button onClick={() => removeFooterLink(idx, linkIdx)} className="text-red-500 p-1"><X size={14}/></button>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                      </div>
                  </div>
              </div>
          );

      case 'hero':
        return (
          <div className="space-y-6">
            <h3 className="text-xl font-bold text-white mb-4">Editar Início (Hero)</h3>
            <InputGroup label="Título Principal" value={data.hero.title} onChange={(v: string) => updateData('hero', {...data.hero, title: v})} />
            <InputGroup label="Subtítulo" value={data.hero.subtitle} onChange={(v: string) => updateData('hero', {...data.hero, subtitle: v})} textarea />
            <InputGroup label="Texto do Botão" value={data.hero.buttonText} onChange={(v: string) => updateData('hero', {...data.hero, buttonText: v})} />
            <InputGroup label="URL da Imagem de Fundo" value={data.hero.bgImage} onChange={(v: string) => updateData('hero', {...data.hero, bgImage: v})} />
            
            <SectionTextEditor sectionKey="hero" title="Textos do Rodapé (Features)" />
          </div>
        );

      case 'services':
        return (
          <div className="space-y-8">
             <SectionTextEditor sectionKey="services" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista de Serviços</h3>
                <button onClick={() => addItem('services', { id: Date.now(), title: 'Novo Serviço', description: 'Descrição', image: '' })} className="flex items-center gap-2 text-primary hover:text-white transition-colors text-sm">
                  <PlusCircle size={16} /> Adicionar Serviço
                </button>
             </div>
             {data.services.map((service, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative group">
                 <button onClick={() => removeItem('services', idx)} className="absolute top-4 right-4 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                 <InputGroup label="Título" value={service.title} onChange={(v: string) => updateArrayItem('services', idx, 'title', v)} />
                 <InputGroup label="Descrição" value={service.description} onChange={(v: string) => updateArrayItem('services', idx, 'description', v)} textarea />
                 <InputGroup label="URL Imagem" value={service.image} onChange={(v: string) => updateArrayItem('services', idx, 'image', v)} />
               </div>
             ))}
          </div>
        );

      case 'offers':
        return (
          <div className="space-y-8">
             <SectionTextEditor sectionKey="specialOffers" title="Títulos da Seção" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista de Ofertas (Pneus)</h3>
                <button onClick={() => addItem('specialOffers', { id: Date.now(), title: 'Novo Pneu', image: '', price: 'R$ 0,00', installment: '', rating: 5, reviews: 0, specs: { fuel: 'C', grip: 'C', noise: '70dB' } })} className="flex items-center gap-2 text-primary hover:text-white transition-colors text-sm">
                  <PlusCircle size={16} /> Adicionar Pneu
                </button>
             </div>
             {data.specialOffers.map((offer, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative group">
                 <button onClick={() => removeItem('specialOffers', idx)} className="absolute top-4 right-4 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                 <InputGroup label="Nome do Produto" value={offer.title} onChange={(v: string) => updateArrayItem('specialOffers', idx, 'title', v)} />
                 <div className="grid grid-cols-2 gap-4">
                   <InputGroup label="Preço (R$)" value={offer.price} onChange={(v: string) => updateArrayItem('specialOffers', idx, 'price', v)} />
                   <InputGroup label="Parcelamento" value={offer.installment} onChange={(v: string) => updateArrayItem('specialOffers', idx, 'installment', v)} />
                 </div>
                 <InputGroup label="URL Imagem" value={offer.image} onChange={(v: string) => updateArrayItem('specialOffers', idx, 'image', v)} />
                 <div className="grid grid-cols-3 gap-2 mt-4">
                    <InputGroup label="Combustível" value={offer.specs.fuel} onChange={(v: string) => {
                        const newSpecs = { ...offer.specs, fuel: v };
                        updateArrayItem('specialOffers', idx, 'specs', newSpecs);
                    }} />
                    <InputGroup label="Aderência" value={offer.specs.grip} onChange={(v: string) => {
                        const newSpecs = { ...offer.specs, grip: v };
                        updateArrayItem('specialOffers', idx, 'specs', newSpecs);
                    }} />
                    <InputGroup label="Ruído" value={offer.specs.noise} onChange={(v: string) => {
                        const newSpecs = { ...offer.specs, noise: v };
                        updateArrayItem('specialOffers', idx, 'specs', newSpecs);
                    }} />
                 </div>
               </div>
             ))}
          </div>
        );

      case 'packages':
        return (
          <div className="space-y-8">
             <SectionTextEditor sectionKey="packages" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista de Pacotes</h3>
                <button onClick={() => addItem('packages', { name: 'Novo Pacote', price: 0, features: [], recommended: false })} className="flex items-center gap-2 text-primary hover:text-white transition-colors text-sm">
                  <PlusCircle size={16} /> Adicionar Pacote
                </button>
             </div>
             {data.packages.map((pkg, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative group">
                 <button onClick={() => removeItem('packages', idx)} className="absolute top-4 right-4 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                 <InputGroup label="Nome" value={pkg.name} onChange={(v: string) => updateArrayItem('packages', idx, 'name', v)} />
                 <InputGroup label="Preço" value={pkg.price} onChange={(v: string) => updateArrayItem('packages', idx, 'price', v)} />
                 <div className="mb-4">
                   <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Itens (Separar por vírgula)</label>
                   <textarea 
                      className="w-full bg-zinc-900 border border-zinc-700 rounded p-2 text-white text-sm focus:border-primary outline-none"
                      value={pkg.features.join(', ')}
                      onChange={(e) => updateArrayItem('packages', idx, 'features', e.target.value.split(',').map(s => s.trim()))}
                   />
                 </div>
                 <Toggle label="Recomendado" checked={pkg.recommended} onChange={(v: boolean) => updateArrayItem('packages', idx, 'recommended', v)} />
               </div>
             ))}
          </div>
        );
      
      case 'gallery':
        return (
          <div className="space-y-8">
            <h3 className="text-xl font-bold text-white">Galeria de Fotos</h3>
            <SectionTextEditor sectionKey="gallery" />
            
            <div className="bg-zinc-900 p-6 rounded-lg border border-zinc-800">
               <div className="flex flex-col gap-4 mb-6">
                 <label className="block text-sm font-bold text-gray-400">Adicionar Imagem via Upload</label>
                 <div className="flex items-center gap-4">
                    <label className="flex items-center gap-2 cursor-pointer bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors font-medium">
                        <Upload size={18} />
                        Escolher Arquivos
                        <input type="file" multiple accept="image/*" onChange={handleImageUpload} className="hidden" />
                    </label>
                    <span className="text-gray-500 text-xs">Suporta múltiplos arquivos (JPG, PNG)</span>
                 </div>
               </div>

               <div className="relative flex items-center gap-2 mb-2">
                 <div className="h-px bg-zinc-700 flex-1"></div>
                 <span className="text-gray-500 text-xs uppercase font-bold">OU URL DIRETA</span>
                 <div className="h-px bg-zinc-700 flex-1"></div>
               </div>

               <div className="flex gap-2">
                 <input 
                    type="text"
                    value={newImageUrl}
                    onChange={(e) => setNewImageUrl(e.target.value)}
                    placeholder="https://exemplo.com/imagem.jpg"
                    className="flex-1 bg-black border border-zinc-700 rounded p-2 text-white text-sm focus:border-primary outline-none"
                 />
                 <button 
                    onClick={handleAddUrlToGallery}
                    className="bg-zinc-700 hover:bg-zinc-600 text-white px-4 py-2 rounded font-medium transition-colors"
                 >
                    Adicionar
                 </button>
               </div>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
               {data.gallery.map((img, idx) => (
                 <div key={idx} className="aspect-square relative group rounded-lg overflow-hidden border border-zinc-800">
                   <img src={img} alt="Galeria" className="w-full h-full object-cover" />
                   <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <button 
                        onClick={() => removeItem('gallery', idx)}
                        className="bg-red-500 hover:bg-red-600 text-white p-2 rounded-full transform hover:scale-110 transition-all"
                      >
                        <Trash2 size={20} />
                      </button>
                   </div>
                 </div>
               ))}
            </div>
          </div>
        );
      
      // NOVA SEÇÃO NO EDITOR
      case 'beforeAfter':
        return (
          <div className="space-y-8">
            <h3 className="text-xl font-bold text-white">Comparativo Antes e Depois</h3>
            <SectionTextEditor sectionKey="beforeAfter" />
            
            <div className="flex justify-between items-center">
                <h4 className="text-primary font-bold">Itens do Comparativo</h4>
                <button onClick={() => addItem('beforeAfter', { id: Date.now(), title: "Novo Item", imageBefore: "", imageAfter: "" })} className="text-sm text-green-500 hover:text-green-400 flex items-center gap-1"><PlusCircle size={16}/> Adicionar</button>
            </div>

            <div className="space-y-6">
                {data.beforeAfter.map((item, idx) => (
                    <div key={item.id} className="p-4 bg-zinc-900 border border-zinc-800 rounded-lg relative">
                        <button onClick={() => removeItem('beforeAfter', idx)} className="absolute top-4 right-4 text-red-500 hover:text-red-400"><Trash2 size={18}/></button>
                        <InputGroup label="Título do Serviço" value={item.title} onChange={(v: string) => updateArrayItem('beforeAfter', idx, 'title', v)} />
                        <div className="grid md:grid-cols-2 gap-4">
                            <div>
                                <InputGroup label="URL Imagem ANTES" value={item.imageBefore} onChange={(v: string) => updateArrayItem('beforeAfter', idx, 'imageBefore', v)} />
                                <div className="aspect-video bg-black rounded overflow-hidden">
                                    <img src={item.imageBefore} className="w-full h-full object-cover opacity-70" alt="Preview Antes" />
                                </div>
                            </div>
                            <div>
                                <InputGroup label="URL Imagem DEPOIS" value={item.imageAfter} onChange={(v: string) => updateArrayItem('beforeAfter', idx, 'imageAfter', v)} />
                                <div className="aspect-video bg-black rounded overflow-hidden">
                                    <img src={item.imageAfter} className="w-full h-full object-cover" alt="Preview Depois" />
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
          </div>
        );

      case 'team':
         return (
           <div className="space-y-6">
             <SectionTextEditor sectionKey="team" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista da Equipe</h3>
                <button onClick={() => addItem('team', { name: 'Nome', role: 'Cargo', image: '' })} className="flex items-center gap-2 text-primary hover:text-white transition-colors text-sm">
                  <PlusCircle size={16} /> Adicionar Membro
                </button>
             </div>
             {data.team.map((member, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg flex gap-4 relative group">
                  <button onClick={() => removeItem('team', idx)} className="absolute top-4 right-4 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                  <div className="w-20 h-20 shrink-0">
                     <img src={member.image} className="w-full h-full object-cover rounded" />
                  </div>
                  <div className="flex-1">
                     <InputGroup label="Nome" value={member.name} onChange={(v: string) => updateArrayItem('team', idx, 'name', v)} />
                     <InputGroup label="Cargo" value={member.role} onChange={(v: string) => updateArrayItem('team', idx, 'role', v)} />
                     <InputGroup label="Foto URL" value={member.image} onChange={(v: string) => updateArrayItem('team', idx, 'image', v)} />
                  </div>
               </div>
             ))}
           </div>
         );

      case 'faq':
        return (
           <div className="space-y-6">
             <SectionTextEditor sectionKey="faq" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista de Perguntas</h3>
                <button onClick={() => addItem('faqs', { question: 'Pergunta', answer: 'Resposta' })} className="flex items-center gap-2 text-primary hover:text-white transition-colors text-sm">
                  <PlusCircle size={16} /> Adicionar FAQ
                </button>
             </div>
             {data.faqs.map((faq, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative group">
                 <button onClick={() => removeItem('faqs', idx)} className="absolute top-4 right-4 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                 <InputGroup label="Pergunta" value={faq.question} onChange={(v: string) => updateArrayItem('faqs', idx, 'question', v)} />
                 <InputGroup label="Resposta" value={faq.answer} onChange={(v: string) => updateArrayItem('faqs', idx, 'answer', v)} textarea />
               </div>
             ))}
           </div>
        );

      case 'clients':
        return (
          <div className="space-y-6">
            <h3 className="text-xl font-bold text-white mb-4">Logos de Clientes</h3>
             {data.clients.map((client, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative group flex gap-4 items-center">
                 <InputGroup label="Nome" value={client.name} onChange={(v: string) => updateArrayItem('clients', idx, 'name', v)} />
                 <div className="flex-1">
                   <InputGroup label="URL Logo" value={client.url} onChange={(v: string) => updateArrayItem('clients', idx, 'url', v)} hint="Use PNG transparente" />
                 </div>
               </div>
             ))}
          </div>
        );

      case 'testimonials':
        return (
          <div className="space-y-6">
             <SectionTextEditor sectionKey="testimonials" />
             <div className="flex justify-between items-center">
                <h3 className="text-xl font-bold text-white">Lista de Depoimentos</h3>
                {/* Nota: em uma implementação completa, adicionar botão para novo depoimento */}
             </div>
             {data.testimonials.map((t, idx) => (
               <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg relative">
                 <InputGroup label="Nome" value={t.name} onChange={(v: string) => updateArrayItem('testimonials', idx, 'name', v)} />
                 <InputGroup label="Texto" value={t.text} onChange={(v: string) => updateArrayItem('testimonials', idx, 'text', v)} textarea />
                 <InputGroup label="Foto URL" value={t.image} onChange={(v: string) => updateArrayItem('testimonials', idx, 'image', v)} />
               </div>
             ))}
          </div>
        );
      
      case 'about':
        return (
            <div className="space-y-6">
                <SectionTextEditor sectionKey="about" />
                <h4 className="text-white font-bold border-b border-zinc-800 pb-2">Itens "O Que Prometemos"</h4>
                <div className="grid sm:grid-cols-2 gap-4">
                  {data.promises.map((item, idx) => (
                    <div key={idx} className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-lg">
                      <InputGroup label="Título" value={item.title} onChange={(v: string) => updateArrayItem('promises', idx, 'title', v)} />
                      <InputGroup label="Descrição" value={item.description} onChange={(v: string) => updateArrayItem('promises', idx, 'description', v)} textarea />
                    </div>
                  ))}
                </div>
            </div>
        );

      case 'blog':
        return (
            <div className="space-y-6">
                <SectionTextEditor sectionKey="blog" />
                {/* Lista de posts não editável aqui para simplificar, foca nos títulos */}
            </div>
        );

      default:
        return <div className="text-gray-500">Selecione uma opção no menu lateral.</div>;
    }
  };

  const renderPreview = () => {
    switch(activeSection) {
      case 'hero': return <Hero />;
      case 'header': return (
          <>
            <div className="h-20"></div> {/* Spacer for fixed header */}
            <Header />
            <div className="p-8 text-center text-gray-500">Conteúdo do Site...</div>
          </>
      );
      case 'footer': return <Footer />;
      case 'services': return <ServicesSection />;
      case 'offers': return <SpecialOffersSection />;
      case 'packages': return <PackagesSection />;
      case 'about': return <AboutSection />;
      case 'beforeAfter': return <BeforeAfterSection />; // Novo Preview
      case 'team': return <TeamSection />;
      case 'testimonials': return <TestimonialsSection />;
      case 'faq': return <FaqSection />;
      case 'blog': return <BlogSection />;
      case 'clients': return <ClientsSection />;
      case 'gallery': return <GallerySection />;
      default: return <div className="flex items-center justify-center h-full text-gray-500">Preview Geral</div>;
    }
  }

  return (
    <div className="min-h-screen bg-black flex text-gray-100 font-sans">
      {/* Sidebar */}
      <aside className="w-64 border-r border-zinc-800 bg-zinc-950 flex flex-col fixed h-full z-20 overflow-y-auto">
        <div className="p-6 border-b border-zinc-800">
          <div className="text-xl font-black italic tracking-tighter text-white">
             CMS <span className="text-primary">.</span>
          </div>
        </div>
        
        <nav className="flex-1 p-4 space-y-1">
          <SidebarItem icon={Settings} label="Configurações Gerais" active={activeSection === 'config'} onClick={() => setActiveSection('config')} />
          <SidebarItem icon={MenuIcon} label="Menu & Cabeçalho" active={activeSection === 'header'} onClick={() => setActiveSection('header')} />
          <SidebarItem icon={Columns} label="Rodapé" active={activeSection === 'footer'} onClick={() => setActiveSection('footer')} />
          <SidebarItem icon={Eye} label="Visibilidade Seções" active={activeSection === 'visibility'} onClick={() => setActiveSection('visibility')} />
          
          <div className="pt-4 pb-2 text-xs font-bold text-gray-600 uppercase">Conteúdo do Site</div>
          
          <SidebarItem icon={LayoutDashboard} label="Início (Hero)" active={activeSection === 'hero'} onClick={() => setActiveSection('hero')} />
          <SidebarItem icon={ArrowLeftRight} label="Antes & Depois" active={activeSection === 'beforeAfter'} onClick={() => setActiveSection('beforeAfter')} />
          <SidebarItem icon={Tags} label="Ofertas & Pneus" active={activeSection === 'offers'} onClick={() => setActiveSection('offers')} />
          <SidebarItem icon={Wrench} label="Serviços" active={activeSection === 'services'} onClick={() => setActiveSection('services')} />
          <SidebarItem icon={Users} label="Sobre Nós" active={activeSection === 'about'} onClick={() => setActiveSection('about')} />
          <SidebarItem icon={Box} label="Pacotes" active={activeSection === 'packages'} onClick={() => setActiveSection('packages')} />
          <SidebarItem icon={Image} label="Galeria" active={activeSection === 'gallery'} onClick={() => setActiveSection('gallery')} />
          <SidebarItem icon={Users} label="Equipe" active={activeSection === 'team'} onClick={() => setActiveSection('team')} />
          <SidebarItem icon={MessageSquare} label="Depoimentos" active={activeSection === 'testimonials'} onClick={() => setActiveSection('testimonials')} />
          <SidebarItem icon={Check} label="FAQ" active={activeSection === 'faq'} onClick={() => setActiveSection('faq')} />
          <SidebarItem icon={FileText} label="Blog" active={activeSection === 'blog'} onClick={() => setActiveSection('blog')} />
          <SidebarItem icon={Briefcase} label="Clientes/Logos" active={activeSection === 'clients'} onClick={() => setActiveSection('clients')} />
        </nav>

        <div className="p-4 border-t border-zinc-800">
          <button 
            onClick={handleLogout}
            className="flex items-center gap-2 text-red-500 hover:text-red-400 text-sm font-medium w-full px-4 py-2"
          >
            <LogOut size={16} /> Sair
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex-1 ml-64 flex flex-col h-screen">
        {/* Topbar */}
        <header className="h-16 border-b border-zinc-800 bg-zinc-950 flex items-center justify-between px-8">
          <h2 className="font-semibold text-white capitalize">Editando: {activeSection === 'hero' ? 'Início' : activeSection === 'offers' ? 'Ofertas' : activeSection === 'about' ? 'Sobre' : activeSection === 'header' ? 'Menu' : activeSection === 'footer' ? 'Rodapé' : sectionLabels[activeSection] || activeSection}</h2>
          <div className="flex items-center gap-4">
            <button 
              onClick={() => setIsPreviewOpen(!isPreviewOpen)}
              className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-medium border ${isPreviewOpen ? 'bg-primary/10 border-primary text-primary' : 'border-zinc-700 text-gray-400'}`}
            >
              <Monitor size={16} /> {isPreviewOpen ? 'Ocultar Preview' : 'Ver Preview'}
            </button>
            <button 
              onClick={handleSave}
              className={`flex items-center gap-2 px-4 py-2 rounded font-bold text-sm transition-all duration-300 ${
                isSaved 
                  ? 'bg-green-600 text-white' 
                  : 'bg-primary hover:brightness-110 text-white'
              }`}
            >
              {isSaved ? <Check size={16} /> : <Save size={16} />} 
              {isSaved ? 'Salvo!' : 'Publicar Alterações'}
            </button>
          </div>
        </header>

        {/* Editor Area */}
        <div className="flex-1 flex overflow-hidden">
          {/* Form Side */}
          <div className={`flex-1 overflow-y-auto p-8 bg-zinc-950 ${isPreviewOpen ? 'max-w-[50%]' : 'max-w-full'}`}>
            {renderEditor()}
          </div>

          {/* Preview Side */}
          {isPreviewOpen && (
             <div className="flex-1 bg-zinc-900 overflow-y-auto border-l border-zinc-800 relative">
               <div className="absolute top-4 right-4 bg-black/80 text-xs px-2 py-1 rounded text-gray-400 z-50">
                 Preview em Tempo Real
               </div>
               <div className="opacity-90 pointer-events-none origin-top scale-[0.8] h-[120%] w-[120%] -ml-[10%] mt-8">
                 {/* Scale hack to make desktop preview fit better */}
                 {renderPreview()}
               </div>
             </div>
          )}
        </div>
      </div>
    </div>
  );
};