import { Fragment } from 'react'

import { Badge, Button } from '@janhq/uikit'

import LogoMark from '@/containers/Brand/Logo/Mark'

import { MainViewState } from '@/constants/screens'

import { useActiveModel } from '@/hooks/useActiveModel'
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'

import { useMainViewState } from '@/hooks/useMainViewState'

const WelcomeScreen = () => {
  const { downloadedModels } = useGetDownloadedModels()
  const { activeModel } = useActiveModel()
  const { setMainViewState } = useMainViewState()

  return (
    <div className="flex h-full items-center justify-center px-4">
      <div className="text-center">
        <LogoMark
          className="mx-auto mb-4 animate-wave"
          width={56}
          height={56}
        />

        {downloadedModels.length === 0 && !activeModel && (
          <Fragment>
            <h1
              data-testid="testid-welcome-title"
              className="text-2xl font-bold"
            >
              Welcome to Jan
            </h1>
            <p className="mt-1">{`let’s download your first model`}</p>
            <Button
              className="mt-4"
              onClick={() => setMainViewState(MainViewState.ExploreModels)}
            >
              Explore Models
            </Button>
          </Fragment>
        )}
        {downloadedModels.length >= 1 && !activeModel && (
          <Fragment>
            <h1 className="mt-2 text-lg font-medium">{`You don’t have any actively running models`}</h1>
            <p className="mt-1">{`Please start a downloaded model in My Models page to use this feature.`}</p>
            <Badge className="mt-4" themes="secondary">
              ⌘e to show your model
            </Badge>
          </Fragment>
        )}
        {downloadedModels.length >= 1 && activeModel && (
          <Fragment>
            <h1 className="mt-2 text-lg font-medium">{`Your Model is Active`}</h1>
            <p className="mt-1">{`You are ready to start conversations.`}</p>
            <Button
              className="mt-4"
              onClick={() => setMainViewState(MainViewState.Chat)}
            >
              Start a conversation
            </Button>
          </Fragment>
        )}
      </div>
    </div>
  )
}

export default WelcomeScreen