learning_ai_invt_trdg/web/src/components/ResetPassword.tsx

import { useState, useEffect } from 'react';
import type { ChangeEvent } from 'react';
import { resetPlatformPassword } from '../lib/authSession';
import { Button, Input } from './ui/Primitives';

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 {
            await resetPlatformPassword(password);
            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">
                        <Input
                            label="New Password"
                            type="password"
                            value={password}
                            onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
                            placeholder="New password"
                            required
                        />
                    </div>

                    {error && <div className="error-message">{error}</div>}
                    {message && <div className="success-message">{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: var(--background);
          color: var(--foreground);
        }

        .login-card {
          background: var(--card);
          border: 1px solid var(--border);

          padding: 40px;
          border-radius: 16px;
          width: 100%;
          max-width: 400px;
          box-shadow: var(--card-shadow);
        }

        h1 {
          margin: 0 0 8px 0;
          font-size: 1.5rem;
          text-align: center;
          background: linear-gradient(90deg, var(--foreground), var(--bl-success));

          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .subtitle {
          text-align: center;
          color: var(--muted-foreground);

          margin-bottom: 32px;
          font-size: 0.9rem;
        }

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

        label {
          display: block;
          margin-bottom: 8px;
          color: var(--muted-foreground);

          font-size: 0.9rem;
        }

        input {
          width: 100%;
          padding: 12px;
          background: var(--input);
          border: 1px solid var(--border);

          border-radius: 8px;
          color: var(--foreground);
          font-size: 1rem;
          box-sizing: border-box;
        }

        input:focus {
          outline: none;
          border-color: var(--bl-focus-ring);

        }

        .auth-button {
          width: 100%;
          padding: 12px;
          background: var(--bl-success);
          color: var(--primary-foreground);

          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: var(--bl-danger);
          background: var(--bl-danger-muted);

          padding: 10px;
          border-radius: 6px;
          margin-bottom: 20px;
          font-size: 0.9rem;
          text-align: center;
        }

        .success-message {
          color: var(--bl-success);
          margin-bottom: 20px;
          text-align: center;
        }
      `}</style>
        </div>
    );
}