import React, { useState } from 'react';
import { PageType, ServiceItem } from './types';
import { SERVICES_LIST, PRACTICE_INFO } from './data/mockData';
import { TopHeader } from './components/TopHeader';
import { Navbar } from './components/Navbar';
import { Footer } from './components/Footer';
import { HomePage } from './components/pages/HomePage';
import { AboutPage } from './components/pages/AboutPage';
import { ServicesPage } from './components/pages/ServicesPage';
import { BookingModal } from './components/BookingModal';
import { ServiceDetailModal } from './components/ServiceDetailModal';
import { ContactModal } from './components/ContactModal';
import { MessageSquare, Calendar, Phone } from 'lucide-react';

export default function App() {
  const [currentPage, setCurrentPage] = useState<PageType>('home');
  const [fontSizeScale, setFontSizeScale] = useState<number>(1.0);
  
  // Modals state
  const [isBookingOpen, setIsBookingOpen] = useState<boolean>(false);
  const [bookingServiceId, setBookingServiceId] = useState<string | undefined>(undefined);
  
  const [selectedServiceForDetail, setSelectedServiceForDetail] = useState<ServiceItem | null>(null);
  const [isContactOpen, setIsContactOpen] = useState<boolean>(false);

  const handleOpenBooking = (serviceId?: string) => {
    setBookingServiceId(serviceId || SERVICES_LIST[0].id);
    setIsBookingOpen(true);
  };

  return (
    <div 
      className="min-h-screen flex flex-col bg-white text-slate-800 font-sans antialiased selection:bg-[#E8F4FF] selection:text-[#0A6EB4]"
      style={{ fontSize: `${fontSizeScale * 100}%` }}
    >
      {/* 1. Accessible Top Information Header */}
      <TopHeader
        fontSizeScale={fontSizeScale}
        setFontSizeScale={setFontSizeScale}
        onOpenBooking={() => handleOpenBooking()}
      />

      {/* 2. Sticky Navigation Bar */}
      <Navbar
        currentPage={currentPage}
        onNavigate={(page) => setCurrentPage(page)}
        onOpenBooking={() => handleOpenBooking()}
        onOpenContactModal={() => setIsContactOpen(true)}
      />

      {/* 3. Main Viewport Content Area */}
      <main className="flex-grow">
        {currentPage === 'home' && (
          <HomePage
            onNavigate={(page) => setCurrentPage(page)}
            onOpenBooking={(serviceId) => handleOpenBooking(serviceId)}
            onSelectService={(service) => setSelectedServiceForDetail(service)}
          />
        )}

        {currentPage === 'about' && (
          <AboutPage
            onNavigate={(page) => setCurrentPage(page)}
            onOpenBooking={() => handleOpenBooking()}
          />
        )}

        {currentPage === 'services' && (
          <ServicesPage
            onNavigate={(page) => setCurrentPage(page)}
            onOpenBooking={(serviceId) => handleOpenBooking(serviceId)}
            onSelectService={(service) => setSelectedServiceForDetail(service)}
            onOpenContact={() => setIsContactOpen(true)}
          />
        )}
      </main>

      {/* 4. Footer */}
      <Footer
        onNavigate={(page) => setCurrentPage(page)}
        onOpenBooking={() => handleOpenBooking()}
        onOpenContactModal={() => setIsContactOpen(true)}
      />

      {/* 5. Floating Patient Action Bar (WhatsApp & Emergency Call) */}
      <div className="fixed bottom-6 right-6 z-40 flex flex-col items-end space-y-2.5">
        <a
          href={`https://wa.me/${PRACTICE_INFO.whatsapp.replace(/[^0-9]/g, '')}`}
          target="_blank"
          rel="noreferrer"
          className="bg-[#2FA8A1] hover:bg-[#23857e] text-white p-3.5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center space-x-2 group focus:outline-none focus:ring-4 focus:ring-[#2FA8A1]/30"
          title="Chat on WhatsApp with Reception"
          aria-label="Chat on WhatsApp"
        >
          <MessageSquare className="w-6 h-6" />
          <span className="max-w-0 overflow-hidden whitespace-nowrap group-hover:max-w-xs transition-all duration-300 ease-in-out font-bold text-xs pr-0 group-hover:pr-2">
            WhatsApp Practice
          </span>
        </a>

        <button
          onClick={() => handleOpenBooking()}
          className="bg-[#0A6EB4] hover:bg-[#085891] text-white px-5 py-3.5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center space-x-2 font-bold text-sm focus:outline-none focus:ring-4 focus:ring-[#0A6EB4]/30 active:scale-95"
          aria-label="Book Appointment"
        >
          <Calendar className="w-5 h-5 animate-pulse" />
          <span className="hidden sm:inline">Book Consultation</span>
          <span className="sm:hidden">Book</span>
        </button>
      </div>

      {/* 6. Interactive Modals */}
      <BookingModal
        isOpen={isBookingOpen}
        onClose={() => setIsBookingOpen(false)}
        initialServiceId={bookingServiceId}
      />

      <ServiceDetailModal
        service={selectedServiceForDetail}
        onClose={() => setSelectedServiceForDetail(null)}
        onBookThisService={(serviceId) => {
          setSelectedServiceForDetail(null);
          handleOpenBooking(serviceId);
        }}
      />

      <ContactModal
        isOpen={isContactOpen}
        onClose={() => setIsContactOpen(false)}
        onOpenBooking={() => {
          setIsContactOpen(false);
          handleOpenBooking();
        }}
      />
    </div>
  );
}