import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
import { useTheme } from "../../context/theme"
import { useData } from "../../context/data"
import { useDirectory } from "../../context/directory"
import { useConnected } from "../../component/use-connected"
import { createStore } from "solid-js/store"
import { useRoute } from "../../context/route"

export function Footer() {
  const { themeV2 } = useTheme()
  const data = useData()
  const route = useRoute()
  const mcp = createMemo(
    () => (data.location.mcp.server.list() ?? []).filter((x) => x.status.status === "connected").length,
  )
  const mcpError = createMemo(() =>
    (data.location.mcp.server.list() ?? []).some((x) => x.status.status === "failed"),
  )
  const permissions = createMemo(() => {
    if (route.data.type !== "session") return []
    return data.session.permission.list(route.data.sessionID) ?? []
  })
  const directory = useDirectory()
  const connected = useConnected()

  const [store, setStore] = createStore({
    welcome: false,
  })

  onMount(() => {
    // Track all timeouts to ensure proper cleanup
    const timeouts: ReturnType<typeof setTimeout>[] = []

    function tick() {
      if (connected()) return
      if (!store.welcome) {
        setStore("welcome", true)
        timeouts.push(setTimeout(() => tick(), 5000))
        return
      }

      if (store.welcome) {
        setStore("welcome", false)
        timeouts.push(setTimeout(() => tick(), 10_000))
        return
      }
    }
    timeouts.push(setTimeout(() => tick(), 10_000))

    onCleanup(() => {
      timeouts.forEach(clearTimeout)
    })
  })

  return (
    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
      <text fg={themeV2.text.subdued()}>{directory()}</text>
      <box gap={2} flexDirection="row" flexShrink={0}>
        <Switch>
          <Match when={store.welcome}>
            <text fg={themeV2.text()}>
              Get started <span style={{ fg: themeV2.text.subdued() }}>/connect</span>
            </text>
          </Match>
          <Match when={connected()}>
            <Show when={permissions().length > 0}>
              <text fg={themeV2.text.feedback.warning()}>
                <span style={{ fg: themeV2.text.feedback.warning() }}>△</span> {permissions().length} Permission
                {permissions().length > 1 ? "s" : ""}
              </text>
            </Show>
            <Show when={mcp()}>
              <text fg={themeV2.text()}>
                <Switch>
                  <Match when={mcpError()}>
                    <span style={{ fg: themeV2.text.feedback.error() }}>⊙ </span>
                  </Match>
                  <Match when={true}>
                    <span style={{ fg: themeV2.text.feedback.success() }}>⊙ </span>
                  </Match>
                </Switch>
                {mcp()} MCP
              </text>
            </Show>
            <text fg={themeV2.text.subdued()}>/status</text>
          </Match>
        </Switch>
      </box>
    </box>
  )
}
