import React from "react"
import Head from "next/head"
import Link from "next/link"
import { useAccount } from "wagmi"

import { useRewardsStatus } from "@/hooks/useRewardsStatus"
import {
  FlexContainer,
  Typography,
  GrayBoundaryBlackWrapper,
  ContentWrapper,
  FAQSection,
} from "@/components/shared/components"
import { NonConnectedState } from "@/components/swell/components/NonConnectedState"
import { ActivationPanel } from "@/components/swell/components/ActivatedState"
import { Address } from "@/components/shared/types"
import { SWELL_CHAIN_ID } from "@/constants"
import SwellRewardLayout from "@/components/shared/components/SwellRewardLayout"
import { useIsMobile } from "@/hooks/use-is-mobile"
import MobileView from "@/components/morphoStrategy/MobileView"
import { useThemeContext } from "@/providers/themeProvider"
import { PAGES } from "@/components/shared/constants"
import { getBaseUrl } from "@/components/shared/actions"

export const HARDCODED_REGISTRY_ID = "21ea006d-96d8-44aa-911a-5a7a1bce8e2a"

export default function SwellReward() {
  const { chainId } = useAccount()

  const isMobile = useIsMobile()

  const { theme } = useThemeContext()

  const {
    rewardsState,
    rewardsAmount,
    automationAccount,
    connectedAddress,
    checkRewardsStatus,
  } = useRewardsStatus()

  const renderContent = () => {
    switch (rewardsState) {
      case "non_connected":
        return <NonConnectedState />
      case "loading_rewards":
      case "activated":
      case "not_active":
        return (
          <ActivationPanel
            rewardsState={rewardsState}
            automationAccount={automationAccount as Address}
            checkRewardsStatus={checkRewardsStatus}
            rewardsAmount={rewardsAmount}
            wrongChainId={chainId !== SWELL_CHAIN_ID}
            connectedAddress={connectedAddress}
          />
        )
      case "error":
        return (
          <FlexContainer
            flexDirection="column"
            gap={2}
            style={{ width: "50rem" }}
          >
            <Typography type="TITLE_XXL">Error</Typography>
            <GrayBoundaryBlackWrapper>
              <ContentWrapper>
                <FlexContainer justifyContent="center">
                  <Typography type="BODY_M">
                    Error loading rewards status. Please try again later.
                  </Typography>
                </FlexContainer>
              </ContentWrapper>
            </GrayBoundaryBlackWrapper>
          </FlexContainer>
        )
      default:
        return null
    }
  }

  if (isMobile) return <MobileView />

  const faqs = [
    {
      title: "How does the agent work?",
      content:
        "The Swell Agent automatically claims your wSWELL rewards every 6 hours, ensuring your rewards start vesting without manual intervention.",
    },
    {
      title: "Does the agent run in my wallet?",
      content:
        "No, the agent operates from a separate Brahma Account that you deploy when subscribing to the automation. It only has permission to claim your wSWELL rewards—it never approves or transfers any tokens, keeping it fully secure.",
    },
    {
      title: "How do I earn Swell rewards, and where can I track my claims?",
      content: (
        <>
          You can check active Swell reward campaigns at{" "}
          <Link
            style={{ color: theme.colors.console2 }}
            href={"https://merkl.angle.money/swell"}
            target="_blank"
          >
            Merkl.
          </Link>{" "}
          To track your total earned rewards and past claims, simply connect
          your wallet and view the “Claimed Rewards” section.
        </>
      ),
    },
    {
      title: "Is there a fee to use the Swell Reward Agent?",
      content:
        "No, running the agent is completely free. All costs are sponsored by the Swell DAO.",
    },
  ]

  return (
    <>
      <HeadComponent />
      <SwellRewardLayout>
        <FlexContainer
          alignItems="center"
          flexDirection="column"
          padding="6rem 0"
        >
          {renderContent()}
        </FlexContainer>
        <FAQSection faqs={faqs} />
      </SwellRewardLayout>
    </>
  )
}

const HeadComponent = () => {
  const APP_NAME = "Swell Reward Agent – Automate Your Reward Claims"
  const DESCRIPTION =
    "Effortlessly claim your Swell rewards with the Swell Reward Agent. Automate the process and never miss a claim."
  const KEYWORDS =
    "defi, swell, rewards, agent, automate, claim, crypto, staking"
  const OG_URL =
    "https://brahma-static.s3.us-east-2.amazonaws.com/wSwell-OG2x.png"
  const TWITTER_HANDLE = "@brahmafi"

  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.SWELL_REWARD}`}
      />
      <meta property="og:type" content="website" />
      <meta property="og:site_name" content="Swell Reward 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>
  )
}