'use client'

import { useEffect, useState } from 'react'

type DevMagicLinkProps = {
  email: string | null
}

type LinkPayload = {
  link: {
    url: string
    expires: string
    createdAt: string
  } | null
}

export default function DevMagicLink({ email }: DevMagicLinkProps) {
  const [url, setUrl] = useState<string | null>(null)

  useEffect(() => {
    if (!email) return

    let cancelled = false
    async function loadLink() {
      const response = await fetch(`/api/auth/dev-magic-link?email=${encodeURIComponent(email!)}`)
      const payload = await response.json().catch(() => ({ link: null })) as LinkPayload
      if (!cancelled) setUrl(payload.link?.url ?? null)
    }

    void loadLink()
    const interval = window.setInterval(loadLink, 1000)

    return () => {
      cancelled = true
      window.clearInterval(interval)
    }
  }, [email])

  if (!email) return null

  return (
    <div className="mt-5 rounded-md border border-amber-300 bg-amber-50 p-3 text-left dark:border-amber-400/40 dark:bg-amber-300/10">
      <p className="text-xs font-medium uppercase tracking-wide text-amber-800 dark:text-amber-200">Local dev sign-in</p>
      {url ? (
        <a
          href={url}
          className="mt-2 inline-flex w-full items-center justify-center rounded bg-amber-700 px-3 py-2 text-sm font-semibold text-white transition hover:bg-amber-800 dark:bg-amber-200 dark:text-zinc-950 dark:hover:bg-amber-100"
        >
          Open magic link
        </a>
      ) : (
        <p className="mt-2 text-sm text-amber-900 dark:text-amber-50/80">Waiting for the generated link...</p>
      )}
    </div>
  )
}