'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import toast from 'react-hot-toast';
import { Mail, ArrowLeft, Send, CheckCircle } from 'lucide-react';
import api from '@/lib/axios';

const schema = z.object({
  email: z.string().email('Email tidak valid'),
});
type FormData = z.infer<typeof schema>;

export default function ForgotPasswordPage() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [email, setEmail] = useState('');

  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    setLoading(true);
    try {
      const res = await api.post('/end-user/forgot-password', data);
      setEmail(data.email);
      setSuccess(true);
      toast.success(res.data.message || 'Link reset password telah dikirim!');
    } catch (err: any) {
      toast.error(err.response?.data?.message ?? 'Gagal mengirim email reset password');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="relative min-h-screen w-full bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 flex items-center justify-center px-4 py-8 overflow-hidden">
        {/* Decorative blobs */}
        <div className="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2 pointer-events-none" />
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl translate-x-1/3 translate-y-1/3 pointer-events-none" />

        <div className="relative w-full max-w-md">
          {/* Success Card */}
          <div className="bg-white/15 backdrop-blur-md border border-white/20 rounded-3xl p-8 shadow-2xl text-white text-center">
            <div className="inline-flex items-center justify-center w-20 h-20 bg-green-500/20 backdrop-blur-sm rounded-full mb-6">
              <CheckCircle className="w-10 h-10 text-green-300" />
            </div>
            
            <h1 className="text-2xl font-extrabold text-white mb-3">Email Terkirim!</h1>
            
            <p className="text-white/80 text-sm mb-6">
              Kami telah mengirim link reset password ke:
            </p>
            
            <div className="bg-white/10 border border-white/20 rounded-xl p-4 mb-6">
              <p className="text-white font-semibold">{email}</p>
            </div>
            
            <div className="bg-blue-500/20 border border-blue-300/30 rounded-xl p-4 mb-6 text-left">
              <p className="text-white/90 text-sm mb-2">
                <strong>📧 Langkah selanjutnya:</strong>
              </p>
              <ol className="text-white/80 text-sm space-y-1 list-decimal list-inside">
                <li>Buka email Anda</li>
                <li>Cari email dari Bonus-MU Reward Portal</li>
                <li>Klik link reset password</li>
                <li>Buat password baru Anda</li>
              </ol>
            </div>
            
            <p className="text-white/60 text-xs mb-6">
              Tidak menerima email? Cek folder spam atau tunggu beberapa menit.
            </p>
            
            <Link
              href="/login"
              className="inline-flex items-center justify-center gap-2 w-full h-11 bg-white text-indigo-700 font-bold rounded-xl shadow-lg hover:bg-white/90 transition"
            >
              <ArrowLeft className="h-4 w-4" />
              Kembali ke Login
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative min-h-screen w-full bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 flex items-center justify-center px-4 py-8 overflow-hidden">
      {/* Decorative blobs */}
      <div className="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2 pointer-events-none" />
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl translate-x-1/3 translate-y-1/3 pointer-events-none" />

      <div className="relative w-full max-w-md">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl mb-4 shadow-lg">
            <Mail className="w-8 h-8 text-white" />
          </div>
          <h1 className="text-3xl font-extrabold text-white">Lupa Password?</h1>
          <p className="text-white/70 text-sm mt-1">Masukkan email Anda untuk reset password</p>
        </div>

        {/* Card */}
        <div className="bg-white/15 backdrop-blur-md border border-white/20 rounded-3xl p-7 shadow-2xl text-white">
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
            <div>
              <label className="flex items-center gap-2 text-sm font-medium text-white/90 mb-1.5">
                <Mail className="h-4 w-4" /> Email
              </label>
              <input
                {...register('email')}
                type="email"
                placeholder="nama@email.com"
                className="w-full h-11 bg-white/20 border border-white/30 rounded-xl px-4 text-sm text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 transition"
              />
              {errors.email && <p className="text-red-300 text-xs mt-1">{errors.email.message}</p>}
            </div>

            <div className="bg-blue-500/20 border border-blue-300/30 rounded-xl p-3">
              <p className="text-white/80 text-xs">
                💡 Kami akan mengirim link reset password ke email Anda. Link berlaku selama 1 jam.
              </p>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full h-11 bg-white text-indigo-700 font-bold rounded-xl shadow-lg hover:bg-white/90 disabled:opacity-50 transition flex items-center justify-center gap-2"
            >
              {loading ? (
                <span className="h-4 w-4 animate-spin rounded-full border-2 border-indigo-600 border-t-transparent" />
              ) : (
                <Send className="h-4 w-4" />
              )}
              {loading ? 'Mengirim...' : 'Kirim Link Reset'}
            </button>
          </form>

          <div className="mt-6 text-center">
            <Link href="/login" className="inline-flex items-center gap-2 text-sm text-white/70 hover:text-white transition">
              <ArrowLeft className="h-4 w-4" />
              Kembali ke Login
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}