"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { ArrowLeft, Mail } from "lucide-react"

export default function ResetPasswordPage() {
  const [email, setEmail] = useState("")
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Здесь будет логика отправки письма для сброса пароля
    console.log("Reset password for:", email)
    setSubmitted(true)
  }

  return (
    <div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6">
      {/* Background grid */}
      <div 
        className="fixed inset-0 pointer-events-none -z-10"
        style={{
          backgroundImage: `
            linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px'
        }}
      />

      {/* Glowing effects */}
      <div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] animate-pulse" />
      <div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />

      <Card className="w-full max-w-md bg-[#0d1117] border-2 border-cyan-500/40 shadow-[0_0_50px_rgba(6,182,212,0.2)] relative overflow-hidden">
        {/* Top accent line */}
        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent" />
        
        <div className="p-8">
          {/* Back button */}
          <Link 
            href="/login"
            className="inline-flex items-center gap-2 text-cyan-400/60 hover:text-cyan-400 font-mono text-sm mb-6 transition-colors group"
          >
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
            Back to login
          </Link>

          {!submitted ? (
            <>
              {/* Header */}
              <div className="text-center mb-8">
                <div className="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="w-8 h-8 text-cyan-400" />
                </div>
                <h1 className="text-4xl font-bold text-cyan-400 font-mono mb-2">
                  Reset my password
                </h1>
                <p className="text-cyan-400/50 font-mono text-sm">
                  Enter your email to receive reset instructions
                </p>
              </div>

              {/* Reset Form */}
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <Label 
                    htmlFor="email" 
                    className="text-cyan-400 font-mono text-sm"
                  >
                    Email Address
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="your.email@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20"
                  />
                </div>

                <Button
                  type="submit"
                  className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_30px_rgba(6,182,212,0.3)] hover:shadow-[0_0_50px_rgba(6,182,212,0.5)] transition-all"
                >
                  SEND RESET LINK
                </Button>
              </form>
            </>
          ) : (
            <>
              {/* Success State */}
              <div className="text-center py-8">
                <div className="w-20 h-20 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
                  <Mail className="w-10 h-10 text-cyan-400" />
                </div>
                <h2 className="text-3xl font-bold text-cyan-400 font-mono mb-3">
                  Check your email
                </h2>
                <p className="text-cyan-400/60 font-mono text-sm mb-6">
                  We've sent password reset instructions to<br />
                  <span className="text-cyan-400">{email}</span>
                </p>
                <div className="bg-cyan-500/5 border border-cyan-500/20 rounded-lg p-4 mb-6">
                  <p className="text-cyan-400/70 font-mono text-xs">
                    Didn't receive the email? Check your spam folder or try again in a few minutes.
                  </p>
                </div>
                <Link href="/login">
                  <Button
                    className="w-full bg-[#0a0e1a] border-2 border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-mono"
                    variant="outline"
                  >
                    BACK TO LOGIN
                  </Button>
                </Link>
              </div>
            </>
          )}
        </div>

        {/* Corner decorations */}
        <div className="absolute top-2 left-2 w-4 h-4 border-t-2 border-l-2 border-cyan-500/30"></div>
        <div className="absolute top-2 right-2 w-4 h-4 border-t-2 border-r-2 border-cyan-500/30"></div>
        <div className="absolute bottom-2 left-2 w-4 h-4 border-b-2 border-l-2 border-cyan-500/30"></div>
        <div className="absolute bottom-2 right-2 w-4 h-4 border-b-2 border-r-2 border-cyan-500/30"></div>
      </Card>
    </div>
  )
}