import { useCallback, useEffect, useMemo, useState } from 'react'

import './App.css'
import { AppShell } from './components/AppShell.jsx'
import { canAccess } from './config/permissions.js'
import { useAuth } from './hooks/useAuth.js'
import { AgendaPage } from './pages/AgendaPage.jsx'
import { AnalyticsPage } from './pages/AnalyticsPage.jsx'
import { ForgotPasswordPage, LoginPage, RegisterPage } from './pages/AuthPages.jsx'
import { HomePage } from './pages/HomePage.jsx'
import { MedicalRecordsPage } from './pages/MedicalRecordsPage.jsx'
import { MessagesPage } from './pages/MessagesPage.jsx'
import { NotFoundPage } from './pages/NotFoundPage.jsx'
import { PatientDetailPage, PatientsPage } from './pages/PatientsPage.jsx'
import { ProfilePage } from './pages/ProfilePage.jsx'
import { ReportsPage } from './pages/ReportsPage.jsx'
import { SettingsPage } from './pages/SettingsPage.jsx'
import { UsersPage } from './pages/UsersPage.jsx'
import { VisitsPage } from './pages/VisitsPage.jsx'
import { patientRepository } from './repositories/patientRepository.js'

const PANEL_PATHS = ['/inicio', '/home', '/dashboard']
const ROLE_HOME_PATHS = {
  medico: '/agenda',
  secretaria: '/agenda',
}

function App() {
  const [location, setLocation] = useState(() => readLocation())
  const { isAuthenticated, role, loading: authLoading } = useAuth()

  const navigate = useCallback((to, options = {}) => {
    if (options.replace) {
      window.history.replaceState({}, '', to)
    } else {
      window.history.pushState({}, '', to)
    }

    setLocation(readLocation())
    const hash = to.split('#')[1]
    window.requestAnimationFrame(() => {
      if (hash) {
        document.getElementById(hash)?.scrollIntoView({ block: 'start' })
      } else {
        window.scrollTo({ left: 0, top: 0 })
      }
    })
  }, [])

  useEffect(() => {
    function handlePopState() {
      setLocation(readLocation())
    }

    window.addEventListener('popstate', handlePopState)
    return () => window.removeEventListener('popstate', handlePopState)
  }, [])

  const route = useMemo(
    () => resolveRoute(location.pathname, navigate, role),
    [location.pathname, navigate, role],
  )

  // Tela de carregamento enquanto busca o role do usuário
  if (authLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#0a0a0a]">
        <p className="text-sm text-[#a3a3a3]">Carregando...</p>
      </div>
    )
  }

  // Rotas públicas (sem shell)
  if (!route.withShell) {
    return route.element
  }

  // Usuário não autenticado
  if (!isAuthenticated) {
    return <LoginPage navigate={navigate} />
  }

  // Usuário autenticado mas sem permissão para a rota
  if (!role || !canAccess(role, location.pathname)) {
    const roleHomePath = ROLE_HOME_PATHS[role]
    if (roleHomePath && PANEL_PATHS.includes(location.pathname)) {
      navigate(roleHomePath, { replace: true })
      return null
    }

    return (
      <AppShell currentPath={location.pathname} navigate={navigate} role={role} routeTitle="Sem acesso">
        <UnauthorizedPage navigate={navigate} />
      </AppShell>
    )
  }

  return (
    <AppShell currentPath={location.pathname} navigate={navigate} role={role} routeTitle={route.title}>
      {route.element}
    </AppShell>
  )
}

function resolveRoute(pathname, navigate, role) {
  if (pathname === '/' || pathname === '/login') {
    return {
      element: <LoginPage navigate={navigate} />,
      title: 'Login',
      withShell: false,
    }
  }

  if (pathname === '/cadastro') {
    return {
      element: <RegisterPage navigate={navigate} />,
      title: 'Cadastro',
      withShell: false,
    }
  }

  if (pathname === '/recuperar-senha') {
    return {
      element: <ForgotPasswordPage navigate={navigate} />,
      title: 'Recuperar senha',
      withShell: false,
    }
  }

  if (pathname === '/inicio' || pathname === '/home' || pathname === '/dashboard') {
    return {
      element: <HomePage navigate={navigate} />,
      title: 'Painel',
      withShell: true,
    }
  }

  if (pathname === '/agenda') {
    return {
      element: <AgendaPage navigate={navigate} role={role} />,
      title: 'Agenda',
      withShell: true,
    }
  }

  if (pathname === '/pacientes') {
    return {
      element: <PatientsPage navigate={navigate} role={role} />,
      title: 'Pacientes',
      withShell: true,
    }
  }

  if (pathname === '/prontuario') {
    return {
      element: <MedicalRecordsPage navigate={navigate} />,
      title: 'Prontuário',
      withShell: true,
    }
  }

  if (pathname.startsWith('/pacientes/')) {
    const patientId = pathname.split('/')[2]
    return {
      element: <PatientDetailRoute navigate={navigate} patientId={patientId} role={role} />,
      title: 'Paciente',
      withShell: true,
    }
  }

  if (pathname === '/consultas') {
    return {
      element: <VisitsPage navigate={navigate} />,
      title: 'Consultas',
      withShell: true,
    }
  }

  if (pathname === '/laudos') {
    return {
      element: <ReportsPage navigate={navigate} role={role} />,
      title: 'Relatórios',
      withShell: true,
    }
  }

  if (pathname === '/relatorios') {
    return {
      element: <AnalyticsPage />,
      title: 'Analytics',
      withShell: true,
    }
  }

  if (pathname === '/camunicacao') {
    navigate('/comunicacao', { replace: true })
    return {
      element: <MessagesPage navigate={navigate} role={role} />,
      title: 'Comunicação',
      withShell: true,
    }
  }

  if (pathname === '/comunicacao' || pathname === '/mensagens') {
    return {
      element: <MessagesPage navigate={navigate} role={role} />,
      title: 'Comunicação',
      withShell: true,
    }
  }

  if (pathname === '/usuarios') {
    return {
      element: <UsersPage role={role} />,
      title: 'Usuários',
      withShell: true,
    }
  }

  if (pathname === '/perfil') {
    return {
      element: <ProfilePage navigate={navigate} />,
      title: 'Perfil',
      withShell: true,
    }
  }

  if (pathname === '/configuracoes' || pathname === '/config') {
    return {
      element: <SettingsPage navigate={navigate} />,
      title: 'Configurações',
      withShell: true,
    }
  }

  return {
    element: <NotFoundPage navigate={navigate} />,
    title: 'Página não encontrada',
    withShell: true,
  }
}

function PatientDetailRoute({ navigate, patientId, role }) {
  const [patient, setPatient] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let active = true

    patientRepository
      .getById(patientId)
      .then((data) => {
        if (active) setPatient(data)
      })
      .finally(() => {
        if (active) setLoading(false)
      })

    return () => {
      active = false
    }
  }, [patientId])

  if (loading) {
    return <div className="pt-10 text-sm text-[#a3a3a3]">Carregando paciente...</div>
  }

  return patient ? (
    <PatientDetailPage navigate={navigate} patient={patient} role={role} />
  ) : (
    <NotFoundPage navigate={navigate} />
  )
}

function UnauthorizedPage({ navigate }) {
  return (
    <div className="flex flex-col items-center justify-center py-20 text-center">
      <p className="text-5xl">🔒</p>
      <h1 className="mt-4 text-2xl font-bold text-[#e5e5e5]">Acesso não permitido</h1>
      <p className="mt-2 text-sm text-[#a3a3a3]">
        Você não tem permissão para acessar esta página.
      </p>
      <button
        className="mt-6 rounded-lg bg-[#3b82f6] px-5 py-2.5 text-sm font-medium text-white transition hover:bg-[#2563eb]"
        onClick={() => navigate('/inicio')}
        type="button"
      >
        Voltar ao painel
      </button>
    </div>
  )
}

function readLocation() {
  return {
    pathname: normalizePath(window.location.pathname),
    search: window.location.search,
  }
}

function normalizePath(pathname) {
  if (!pathname || pathname === '/') {
    return '/'
  }

  return pathname.replace(/\/+$/, '')
}

export default App