'use client'

import React, { useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ArrowLeft, Loader2, Mail, CheckCircle2 } from 'lucide-react'

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [sent, setSent] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setLoading(false)
    setSent(true)
  }

  return (
    <div className="relative flex min-h-screen">
      {/* Left Side - Branding */}
      <div className="hidden flex-1 bg-gradient-to-br from-[#91C4D9] to-[#5b9ebd] lg:flex lg:flex-col lg:items-center lg:justify-center lg:p-12">
        <div className="max-w-md text-center">
          <div className="mb-8 flex justify-center">
            <div className="relative h-20 w-20 overflow-hidden rounded-2xl bg-white/20 shadow-lg backdrop-blur-sm">
              <Image
                src="/images/logo.png"
                alt="Studo Guide"
                fill
                className="object-contain"
              />
            </div>
          </div>
          <h1 className="text-4xl font-bold text-white">Studo Guide</h1>
          <p className="mt-3 text-lg text-white/80">Your Future Career Guide</p>
          <p className="mt-6 text-sm leading-relaxed text-white/70">
            Don&apos;t worry! We&apos;ll send you a link to reset your password.
            Check your inbox after submitting.
          </p>
        </div>
      </div>

      {/* Right Side - Form */}
      <div className="flex flex-1 items-center justify-center bg-[#f5f6fa] px-4 py-12 lg:max-w-[520px]">
        <div className="w-full max-w-md">
          {/* Mobile Logo */}
          <div className="mb-8 flex justify-center lg:hidden">
            <div className="flex items-center gap-3">
              <div className="relative h-10 w-10 overflow-hidden rounded-lg bg-gradient-to-br from-[#91C4D9] to-[#5b9ebd]">
                <Image
                  src="/images/logo.png"
                  alt="Studo Guide"
                  fill
                  className="object-contain"
                />
              </div>
              <h1 className="text-xl font-bold bg-gradient-to-r from-[#91C4D9] to-[#5b9ebd] bg-clip-text text-transparent">
                Studo Guide
              </h1>
            </div>
          </div>

          <Card className="border-0 shadow-lg">
            {sent ? (
              <>
                <CardHeader className="space-y-1 text-center pb-4">
                  <div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-green-100">
                    <CheckCircle2 className="h-7 w-7 text-green-600" />
                  </div>
                  <CardTitle className="text-2xl font-bold text-[#2c3e50]">
                    Check Your Email
                  </CardTitle>
                  <CardDescription className="text-gray-500">
                    We&apos;ve sent a password reset link to <strong>{email}</strong>
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-center text-sm text-gray-500">
                    Didn&apos;t receive the email? Check your spam folder or{' '}
                    <button
                      className="font-semibold text-[#5b9ebd] hover:text-[#91C4D9] hover:underline"
                      onClick={() => setSent(false)}
                    >
                      try again
                    </button>
                  </p>
                  <Button
                    variant="outline"
                    className="w-full"
                    asChild
                  >
                    <Link href="/login">
                      <ArrowLeft className="mr-2 h-4 w-4" />
                      Back to Login
                    </Link>
                  </Button>
                </CardContent>
              </>
            ) : (
              <>
                <CardHeader className="space-y-1 text-center pb-4">
                  <div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-[#91C4D9]/20">
                    <Mail className="h-7 w-7 text-[#5b9ebd]" />
                  </div>
                  <CardTitle className="text-2xl font-bold text-[#2c3e50]">
                    Forgot Password?
                  </CardTitle>
                  <CardDescription className="text-gray-500">
                    Enter your email and we&apos;ll send you a reset link
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="resetEmail" className="text-sm font-medium text-[#2c3e50]">
                        Email Address
                      </Label>
                      <Input
                        id="resetEmail"
                        type="email"
                        placeholder="you@example.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                        className="h-11 border-gray-200 focus:border-[#91C4D9] focus:ring-[#91C4D9]/20"
                      />
                    </div>

                    <Button
                      type="submit"
                      disabled={loading}
                      className="h-11 w-full bg-gradient-to-r from-[#91C4D9] to-[#5b9ebd] text-white hover:opacity-90 font-semibold shadow-md"
                    >
                      {loading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Sending...
                        </>
                      ) : (
                        'Send Reset Link'
                      )}
                    </Button>
                  </form>

                  <div className="mt-4 text-center">
                    <Link
                      href="/login"
                      className="inline-flex items-center text-sm font-medium text-[#5b9ebd] hover:text-[#91C4D9] hover:underline"
                    >
                      <ArrowLeft className="mr-1 h-3 w-3" />
                      Back to Login
                    </Link>
                  </div>
                </CardContent>
              </>
            )}
          </Card>
        </div>
      </div>
    </div>
  )
}
