"use client";

import { useState, useEffect }         from "react";
import { Button }                      from "@/components/ui/button";
import { Card, CardContent }           from "@/components/ui/card";
import { CardDescription, CardFooter } from "@/components/ui/card";
import { CardHeader, CardTitle }       from "@/components/ui/card";
import { Mail, RotateCw }              from "lucide-react";
import Link                            from "next/link";

export function VerifyEmailCard({
  email = 'your email',
  lastSend = 0,
  cooldown = 300000
}: {
  email?: string
  lastSend?: number
  cooldown?: number
}) {
  const [timeLeft, setTimeLeft] = useState(1000000)

  useEffect(() => {
    const calculateTimeLeft = () => {
      const now = Date.now()
      const expiry = lastSend + cooldown
      const remaining = Math.max(0, expiry - now)
      setTimeLeft(remaining)
    }

    calculateTimeLeft()
    const interval = setInterval(calculateTimeLeft, 1000)
    return () => clearInterval(interval)
  }, [lastSend, cooldown])

  const handleResendEmail = () => {
    window.location.reload()
  }

  const formatTime = (ms: number) => {
    const totalSeconds = Math.floor(ms / 1000)
    const minutes = Math.floor(totalSeconds / 60)
    const seconds = totalSeconds % 60
    return `${minutes}:${seconds.toString().padStart(2, '0')}`
  }

  return (
    <Card className="w-full max-w-sm border-0">
      <CardHeader className="space-y-1 text-center">
        <div className="flex justify-center">
          <div className="rounded-full bg-primary/10 p-4">
            <Mail className="h-12 w-12 text-primary" />
          </div>
        </div>
        
        <CardTitle className="text-2xl font-bold">Verify your email</CardTitle>
        <CardDescription>
          We sent a verification link to<br />
          <b>{email || "your email"}</b><br />{"("}
          <Link className="text-primary hover:underline" href="/login">not my email</Link>
          {')'}
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-5 text-center">
        <h3 className="text-md text-gray-800 font-bold mt-0 mb-1">Check your inbox</h3>
        <p className="text-sm">
          Click the link in the email to verify your account.
        </p>
        <div>
          <Button
            className="w-auto inline-flex cursor-pointer"
            onClick={handleResendEmail}
            disabled={timeLeft > 0}
          >
            <RotateCw className="mr-0 h-4 w-4" />
            Resend
          </Button>
          <div>
            <p className="text-xs text-muted-foreground mt-2">
              {(timeLeft > 0)
              ? <>Please wait {formatTime(timeLeft)} before resending the email.</>
              : <>You can request another email.</>
              }
            </p>
          </div>
        </div>
        <div>
          <Link className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50" href="/login">Go to login</Link>
        </div>
      </CardContent>
      <CardFooter className="flex items-start justify-start flex-col space-y-5">
        <div className="w-full border-t text-xs pt-5 space-y-2">
          <p className="w-full text-center text-gray-800"><b>Can't find the email?</b></p>
          <ul className="list-disc list-inside text-left text-gray-800 space-y-1">
            <li>Check your spam or junk folder</li>
            <li>Make sure you used the correct email address</li>
            <li>Wait a few minutes for the email to arrive</li>
          </ul>
        </div>
        <p className="w-full text-sm text-center text-muted-foreground">
          Need more help?{" "}
          <Link href="/support" className="text-primary hover:underline font-medium">
            Contact support
          </Link>
        </p>
      </CardFooter>
    </Card>
  )
}