import { useEffect } from 'hono/jsx'
import { navigate } from '../router'
import { apps, dashboardTab, isNarrow, setMobileSidebar } from '../state'
import {
  HamburgerButton,
  HamburgerLine,
  DashboardContainer,
  DashboardHeader,
  DashboardTitle,
  Section,
  SettingsGear,
  Tab,
  TabBar,
  TabContent,
} from '../styles'
import { theme } from '../themes'
import { UnifiedLogs, initUnifiedLogs, scrollLogsToBottom } from './UnifiedLogs'
import { Urls } from './Urls'
import { initVitals } from './Vitals'

export function DashboardLanding({ render }: { render: () => void }) {
  useEffect(() => {
    initUnifiedLogs()
    initVitals()
    if (dashboardTab === 'logs') scrollLogsToBottom()
  }, [])

  const narrow = isNarrow || undefined
  const dashboardTools = apps.filter(a => a.tool && a.dashboard)

  const openSettings = () => {
    navigate('/settings')
  }

  const switchTab = (tab: string) => {
    navigate(tab === 'urls' ? '/' : `/${tab}`)
    if (tab === 'logs') scrollLogsToBottom()
  }

  const titlecase = (s: string) => s.split(' ').map(part => part[0]?.toUpperCase() + part.slice(1))

  return (
    <DashboardContainer narrow={narrow} relative>
      <SettingsGear
        onClick={openSettings}
        title="Settings"
        style={{ position: 'absolute', top: 16, right: 16 }}
      >
        ⚙️
      </SettingsGear>
      {isNarrow && (
        <HamburgerButton
          onClick={() => { setMobileSidebar(true); render() }}
          title="Show apps"
          style={{ position: 'absolute', top: 16, left: 16 }}
        >
          <HamburgerLine />
          <HamburgerLine />
          <HamburgerLine />
        </HamburgerButton>
      )}
      <DashboardHeader>
        <DashboardTitle narrow={narrow}>
          🐾 Toes
        </DashboardTitle>
      </DashboardHeader>

      <TabBar centered>
        <Tab active={dashboardTab === 'urls' || undefined} onClick={() => switchTab('urls')}>🔗 URLs</Tab>
        <Tab active={dashboardTab === 'logs' || undefined} onClick={() => switchTab('logs')}>📋 Logs</Tab>
        {dashboardTools.map(tool => {
          const toolName = typeof tool.tool === 'string' ? tool.tool : tool.name
          return (
            <Tab
              key={tool.name}
              active={dashboardTab === tool.name || undefined}
              onClick={() => switchTab(tool.name)}
            >
              {tool.icon} {titlecase(toolName)}
            </Tab>
          )
        })}
      </TabBar>

      <TabContent active={dashboardTab === 'urls' || undefined}>
        <Urls render={render} />
      </TabContent>

      <TabContent active={dashboardTab === 'logs' || undefined}>
        <UnifiedLogs />
      </TabContent>

      {dashboardTools.map(tool => {
        const isSelected = dashboardTab === tool.name
        return (
          <TabContent key={tool.name} active={isSelected || undefined}>
            <Section>
              {tool.state !== 'running' && (
                <p style={{ color: theme('colors-textFaint') }}>
                  Tool is {tool.state}
                </p>
              )}
              {tool.state === 'running' && (
                <div
                  data-tool-target={isSelected ? tool.name : undefined}
                  style={{ width: '100%', height: '600px' }}
                />
              )}
            </Section>
          </TabContent>
        )
      })}
    </DashboardContainer>
  )
}
