import { useGlobalSync } from "@/context/global-sync"
import { For, Match, Switch } from "solid-js"
import { Button } from "@opencode-ai/ui/button"
import { Logo } from "@opencode-ai/ui/logo"
import { useLayout } from "@/context/layout"
import { useNavigate } from "@solidjs/router"
import { base64Encode } from "@opencode-ai/util/encode"
import { Icon } from "@opencode-ai/ui/icon"

export default function Home() {
  const navigate = useNavigate()
  const sync = useGlobalSync()
  const layout = useLayout()

  function openProject(directory: string) {
    layout.projects.open(directory)
    navigate(`/${base64Encode(directory)}`)
  }

  return (
    <div class="mx-auto mt-55">
      <Logo class="w-xl opacity-12" />
      <Switch>
        <Match when={sync.data.projects.length > 0}>
          <div class="mt-20 w-full flex flex-col gap-4">
            <div class="flex gap-2 items-center justify-between pl-3">
              <div class="text-14-medium text-text-strong">Recent projects</div>
              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3">
                Open project
              </Button>
            </div>
            <ol class="flex flex-col gap-2">
              <For each={sync.data.projects.slice(0, 5)}>
                {(project) => (
                  <Button
                    size="large"
                    variant="ghost"
                    class="text-14-mono text-left justify-between px-3"
                    onClick={() => openProject(project.worktree)}
                  >
                    {project.worktree}
                    <div class="text-14-regular text-text-weak">10m ago</div>
                  </Button>
                )}
              </For>
            </ol>
          </div>
        </Match>
        <Match when={true}>
          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
            <Icon name="folder-add-left" size="large" />
            <div class="flex flex-col gap-1 items-center justify-center">
              <div class="text-14-medium text-text-strong">No recent projects</div>
              <div class="text-12-regular text-text-weak">Get started by opening a local project</div>
            </div>
            <div />
            <Button class="px-3">Open project</Button>
          </div>
        </Match>
      </Switch>
    </div>
  )
}
