'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useToastStore } from '@/lib/store';

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const toast = useToastStore(s => s.show);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
        toast('Reset link sent! Check your email.', 'success');
      } else {
        toast(data.error || 'Something went wrong', 'error');
      }
    } catch {
      toast('Network error', 'error');
    }
    setLoading(false);
  }

  if (sent) {
    return (
      <div className="min-h-screen flex items-center justify-center p-8">
        <div className="text-center max-w-md">
          <div className="text-6xl mb-4">📧</div>
          <h1 className="text-2xl font-black text-gray-900 mb-3">Check Your Email</h1>
          <p className="text-gray-500 mb-6">We sent a password reset link to <strong>{email}</strong>. Click the link to reset your password.</p>
          <Link href="/login" className="btn-primary px-8 py-3 rounded-xl font-bold text-sm inline-block">Back to Sign In</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-8">
      <div className="w-full max-w-md">
        <div className="flex items-center gap-2 mb-8 justify-center">
          <div className="w-10 h-10 bg-accent rounded-xl flex items-center justify-center shadow-lg">
            <span className="text-primary font-black text-xl">S</span>
          </div>
          <div>
            <span className="text-primary font-black text-xl tracking-tight leading-none block">SceneKey</span>
            <span className="text-accent text-xs font-semibold tracking-widest">STORE</span>
          </div>
        </div>
        <h1 className="text-2xl font-black text-gray-900 mb-1 text-center">Forgot Password?</h1>
        <p className="text-gray-500 text-sm mb-6 text-center">Enter your email and we&apos;ll send you a reset link.</p>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-gray-700 mb-1">Email Address</label>
            <input type="email" required value={email} onChange={e => setEmail(e.target.value)}
              className="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:border-primary" placeholder="you@example.com" />
          </div>
          <button type="submit" disabled={loading}
            className="w-full btn-primary py-3 rounded-xl font-bold text-sm disabled:opacity-50 flex items-center justify-center gap-2">
            {loading ? <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div> : 'Send Reset Link'}
          </button>
        </form>
        <p className="text-center mt-6 text-sm text-gray-500">
          Remember your password? <Link href="/login" className="text-primary font-semibold hover:underline">Sign In</Link>
        </p>
      </div>
    </div>
  );
}