import Head from "next/head"
import type { NextPage } from "next"

import HowItWorksModal from "@/components/morphoStrategy/HowItWorksModal"
import MobileView from "@/components/morphoStrategy/MobileView"
import SelectTokenPage from "@/components/morphoStrategy/SelectTokenPage"
import { getBaseUrl } from "@/components/shared/actions"
import BlueStarsBgLayout from "@/components/shared/components/BlueStarsBgLayout"
import { PAGES } from "@/components/shared/constants"
import { BASE_CHAIN_ID } from "@/constants"
import { useIsMobile } from "@/hooks/use-is-mobile"
import useBoolean from "@/hooks/useBoolean"

const MorphoPage: NextPage = () => {
  const { value: showHowItWorksModal, setFalse: closeHowItWorksModal } =
    useBoolean(true)

  const isMobile = useIsMobile()

  if (isMobile) return <MobileView />

  return (
    <>
      <MorphoHeadComponent />
      {showHowItWorksModal && (
        <HowItWorksModal closeModal={closeHowItWorksModal} />
      )}
      <BlueStarsBgLayout desiredChainIds={[BASE_CHAIN_ID]}>
        <SelectTokenPage />
      </BlueStarsBgLayout>
    </>
  )
}

export default MorphoPage

export const MorphoHeadComponent = () => {
  const APP_NAME = "Morpho Agent by Brahma"
  const DESCRIPTION = "Powered by ConsoleKit"
  const KEYWORDS = "defi, trading agent, brahma, surge, purge, dca, crypto"
  const TWITTER_HANDLE = "@brahmafi"
  const OG_URL =
    "https://brahma-static.s3.us-east-2.amazonaws.com/morpho-agent-og.webp"

  return (
    <Head>
      {/* General Metadata */}
      <title>{APP_NAME}</title>
      <meta name="description" content={DESCRIPTION} />
      <meta name="keywords" content={KEYWORDS} />

      {/* Open Graph (OG) Metadata */}
      <meta property="og:title" content={APP_NAME} />
      <meta property="og:description" content={DESCRIPTION} />
      <meta property="og:image" content={OG_URL} />
      <meta
        property="og:url"
        content={`${getBaseUrl()}${PAGES.MORPHO_OPTIMIZER}`}
      />
      <meta property="og:type" content="website" />
      <meta property="og:site_name" content="Morpho Agent" />

      {/* Twitter Card Metadata */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content={TWITTER_HANDLE} />
      <meta name="twitter:title" content={APP_NAME} />
      <meta name="twitter:description" content={DESCRIPTION} />
      <meta name="twitter:image" content={OG_URL} />
    </Head>
  )
}
