import {
  json,
  type LoaderFunctionArgs,
  type MetaFunction,
} from "@remix-run/node"
import { useLoaderData } from "@remix-run/react"
import React, { Suspense, useEffect, useState } from "react"
import coerceSemver from "semver/functions/coerce"
import versionAtLeast from "semver/functions/gte"
import UAParser from "ua-parser-js"
import InstallPrompts from "../install/InstallPrompts"
import useInstallState from "../useInstallState"
import ClientOnly from "../ClientOnly"

export const meta: MetaFunction = () => {
  return [
    { title: "Tack Up Now!" },
    { name: "description", content: "Get equinelive notifications" },
  ]
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const userAgent = request.headers.get("user-agent")
  const parsedUserAgent = new UAParser(userAgent ?? "")
  const os = parsedUserAgent.getOS()
  const isMobileSafari = parsedUserAgent.getBrowser().name === "Mobile Safari"
  const isSupported =
    os.name !== "iOS" ||
    versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")

  const isIOS = os.name === "iOS"

  return json({
    isSupported,
    isMobileSafari,
    isIOS,
  })
}

export default function Index() {
  const { isSupported, isMobileSafari, isIOS } = useLoaderData<typeof loader>()

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <LandingMessage
        isSupported={isSupported}
        isMobileSafari={isMobileSafari}
        isIOS={isIOS}
      />
    </div>
  )
}

function LandingMessage({
  isSupported,
  isMobileSafari,
  isIOS,
}: {
  isSupported: boolean
  isMobileSafari: boolean
  isIOS: boolean
}) {
  const { installed } = useInstallState({ isSupported, isMobileSafari, isIOS })

  const [isInstalled, setIsInstalled] = useState(installed)

  return (
    <ClientOnly fallback={<div>Loading</div>}>
      {() =>
        isInstalled ? (
          <div>Your Notifications</div>
        ) : (
          <InstallPrompts
            isMobileSafari={isMobileSafari}
            isSupported={isSupported}
            isIOS={isIOS}
            notificationsEnabled={false}
            onInstallComplete={() => setIsInstalled(true)}
          />
        )
      }
    </ClientOnly>
  )
}
