import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, Phone, MessageCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { ThemeToggle } from './ThemeToggle';
import logoRochaSales from '@/assets/logo-rocha-sales.png';

interface LayoutProps {
  children: ReactNode;
}

const navLinks = [
  { href: '/sobre', label: 'Sobre Nós' },
  { href: '/servicos', label: 'Serviços' },
  { href: '/planos', label: 'Planos' },
  { href: '/depoimentos', label: 'Depoimentos' },
  { href: '/contato', label: 'Contato' },
];

const Layout = ({ children }: LayoutProps) => {
  const location = useLocation();
  const WHATSAPP_BASE_URL = import.meta.env.VITE_PUBLIC_WHATSAPP_LINK || "https://wa.me/5511949474214";

  return (
    <div className="min-h-screen flex flex-col scroll-smooth">
      {/* Theme Toggle */}
      <ThemeToggle />
      
      {/* Fixed Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b border-border">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-20">
            {/* Logo */}
            <Link to="/" className="flex items-center">
              <img 
                src={logoRochaSales} 
                alt="Rocha Sales - Você seguro para viver" 
                className="h-12 w-auto"
              />
            </Link>

            {/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center space-x-8">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  to={link.href}
                  className={`text-sm font-medium transition-colors hover:text-primary ${
                    location.pathname === link.href ? 'text-primary' : 'text-foreground'
                  }`}
                >
                  {link.label}
                </Link>
              ))}
            </nav>

            {/* CTA Button */}
            <div className="hidden lg:flex items-center space-x-4">
              <a href="tel:1122864848" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2">
                <Phone className="h-4 w-4" />
                (11) 2286-4848
              </a>
              <Button asChild variant="default" className="bg-primary hover:bg-primary-strong text-primary-foreground shadow-gold">
                <a href={WHATSAPP_BASE_URL} target="_blank" rel="noopener noreferrer">
                  <MessageCircle className="h-4 w-4 mr-2" />
                  WhatsApp
                </a>
              </Button>
            </div>

            {/* Mobile Menu */}
            <Sheet>
              <SheetTrigger asChild className="lg:hidden">
                <Button variant="ghost" size="icon">
                  <Menu className="h-6 w-6" />
                </Button>
              </SheetTrigger>
              <SheetContent>
                <nav className="flex flex-col space-y-6 mt-8">
                  {navLinks.map((link) => (
                    <Link
                      key={link.href}
                      to={link.href}
                      className={`text-lg font-medium transition-colors hover:text-primary ${
                        location.pathname === link.href ? 'text-primary' : 'text-foreground'
                      }`}
                    >
                      {link.label}
                    </Link>
                  ))}
                  <Button asChild variant="default" className="bg-primary hover:bg-primary-strong text-primary-foreground shadow-gold w-full">
                    <a href={WHATSAPP_BASE_URL} target="_blank" rel="noopener noreferrer">
                      <MessageCircle className="h-4 w-4 mr-2" />
                      Falar no WhatsApp
                    </a>
                  </Button>
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 pt-20">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-secondary text-secondary-foreground py-12 border-t border-border/20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            {/* Company Info */}
            <div>
              <img 
                src={logoRochaSales} 
                alt="Rocha Sales" 
                className="h-16 w-auto mb-4"
              />
              <p className="text-muted-foreground mb-4">
                Consultoria especializada em planos de saúde com atendimento humanizado.
              </p>
            </div>

            {/* Quick Links */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-primary">Links Rápidos</h3>
              <nav className="flex flex-col space-y-2">
                {navLinks.map((link) => (
                  <Link
                    key={link.href}
                    to={link.href}
                    className="text-muted-foreground hover:text-primary transition-colors"
                  >
                    {link.label}
                  </Link>
                ))}
                <Link to="/privacidade" className="text-muted-foreground hover:text-primary transition-colors">
                  Política de Privacidade
                </Link>
              </nav>
            </div>

            {/* Contact Info */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-primary">Contato</h3>
              <div className="space-y-3 text-muted-foreground">
                <p>📞 (11) 2286-4848</p>
                <p>📱 WhatsApp: (11) 94947-4214</p>
                <p>📍 Rua Barros Cassal, 37 – Itaquera</p>
                <p>📍 Av. Pres. Juscelino Kubitschek, 1830 – Itaim Bibi</p>
              </div>
            </div>
          </div>

          <div className="border-t border-border/20 pt-8 text-center text-muted-foreground text-sm">
            <p>&copy; {new Date().getFullYear()} Rocha Sales. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>

      {/* Fixed WhatsApp Button */}
      <a
        href={WHATSAPP_BASE_URL}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-6 right-6 z-50 bg-accent-green hover:bg-accent-green/90 text-white rounded-full p-4 shadow-gold-lg transition-all duration-300 hover:scale-110 flex items-center justify-center group"
        aria-label="Falar com a Rocha Sales no WhatsApp"
      >
        <MessageCircle className="h-6 w-6" />
        <span className="absolute right-full mr-3 bg-card text-card-foreground px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity shadow-elegant border border-border">
          Falar com Especialista
        </span>
      </a>
    </div>
  );
};

export default Layout;