import { useState, useEffect } from 'react';
import { supabase } from '../lib/supabaseClient';

export function ResetPassword() {
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState<string | null>(null);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        // Handle hash fragment if present (implicit flow)
        const hash = window.location.hash;
        if (hash && hash.includes('type=recovery')) {
            // Supabase handles the session automatically if the link is clicked
            // We just need to let the user set a new password
        }
    }, []);

    const handlePasswordReset = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError(null);
        setMessage(null);

        try {
            const { error } = await supabase.auth.updateUser({ password });
            if (error) throw error;
            setMessage('Password updated successfully! You can now login.');
            setTimeout(() => {
                if (typeof window !== 'undefined') {
                    window.location.href = '/';
                }
            }, 2000);
        } catch (err: any) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="login-container">
            <div className="login-card">
                <h1>Reset Password</h1>
                <p className="subtitle">Enter your new password below</p>

                <form onSubmit={handlePasswordReset}>
                    <div className="form-group">
                        <label>New Password</label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="New password"
                            required
                        />
                    </div>

                    {error && <div className="error-message">{error}</div>}
                    {message && <div className="success-message" style={{ color: '#00ff88', marginBottom: '20px', textAlign: 'center' }}>{message}</div>}

                    <button type="submit" disabled={loading || !!message} className="auth-button">
                        {loading ? 'Updating...' : 'Update Password'}
                    </button>
                </form>
            </div>
            <style>{`
        .login-container {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          background: #0a0b0d;
          color: #fff;
        }

        .login-card {
          background: #14151a;
          border: 1px solid rgba(255, 255, 255, 0.1);
          padding: 40px;
          border-radius: 16px;
          width: 100%;
          max-width: 400px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        h1 {
          margin: 0 0 8px 0;
          font-size: 1.5rem;
          text-align: center;
          background: linear-gradient(90deg, #fff, #00ff88);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .subtitle {
          text-align: center;
          color: #929292;
          margin-bottom: 32px;
          font-size: 0.9rem;
        }

        .form-group {
          margin-bottom: 20px;
        }

        label {
          display: block;
          margin-bottom: 8px;
          color: #ccc;
          font-size: 0.9rem;
        }

        input {
          width: 100%;
          padding: 12px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 8px;
          color: #fff;
          font-size: 1rem;
          box-sizing: border-box;
        }

        input:focus {
          outline: none;
          border-color: #00ff88;
        }

        .auth-button {
          width: 100%;
          padding: 12px;
          background: #00ff88;
          color: #000;
          border: none;
          border-radius: 8px;
          font-weight: bold;
          font-size: 1rem;
          cursor: pointer;
          margin-top: 10px;
          transition: opacity 0.2s;
        }

        .auth-button:disabled {
          opacity: 0.7;
          cursor: not-allowed;
        }

        .error-message {
          color: #ff3366;
          background: rgba(255, 51, 102, 0.1);
          padding: 10px;
          border-radius: 6px;
          margin-bottom: 20px;
          font-size: 0.9rem;
          text-align: center;
        }
      `}</style>
        </div>
    );
}