"use client";

import { useState } from 'react';
import Link from 'next/link';
import '@/styles/Auth.css';

export default function ForgotPasswordPage() {
    const [emailOrUsername, setEmailOrUsername] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [successMessage, setSuccessMessage] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setSuccessMessage('');
        setLoading(true);

        try {
            const res = await fetch('/api/auth/forgot-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ emailOrUsername }),
            });

            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Något gick fel');

            setSuccessMessage(data.message);
        } catch (err: unknown) {
            setError(err instanceof Error ? err.message : 'Ett oväntat fel uppstod');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="auth-page-container">
            <div className="profile-card card-sm">
                <h2 className="auth-title">HAR DU GLÖMT DITT LÖSENORD?</h2>

                <p className="auth-subtitle">
                    Skriv ditt email eller användarnamn när du skapade kontot så att vi kan skicka ett nytt lösenord.
                </p>

                {successMessage ? (
                    <div className="text-center">
                        <div className="auth-success">
                            {successMessage}
                        </div>
                        <Link href="/login" className="auth-button">
                            Tillbaka till inloggning
                        </Link>
                    </div>
                ) : (
                    <form className="auth-form" onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label className="form-label">E-post / Användarnamn</label>
                            <input
                                id="email"
                                type="text"
                                required
                                className="form-input"
                                value={emailOrUsername}
                                onChange={(e) => setEmailOrUsername(e.target.value)}
                            />
                        </div>

                        {error && (
                            <div className="auth-error">
                                {error}
                            </div>
                        )}

                        <button
                            type="submit"
                            disabled={loading}
                            className="auth-button"
                        >
                            {loading ? 'Skickar...' : 'Återställ Lösenord'}
                        </button>

                        <div className="text-center mt-4">
                            <Link href="/login" className="auth-link text-sm">
                                Gå tillbaka
                            </Link>
                        </div>
                    </form>
                )}
            </div>
        </div>
    );
}
