'use client';

import Link from 'next/link';
import type { ReactNode } from 'react';
import { useState } from 'react';

type Props = {
  languageSwitcher: ReactNode;
};

export function ForgotPasswordCard({ languageSwitcher }: Props) {
  const [email, setEmail] = useState('');
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  async function submit() {
    setPending(true);
    setMessage('');
    setError('');

    try {
      const response = await fetch('/api/auth/password-reset', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const payload = await response.json();
      if (!response.ok) {
        setError(payload.message || 'Failed to request password reset.');
        return;
      }

      setMessage('If the account exists, a reset link has been sent to the email address.');
    } finally {
      setPending(false);
    }
  }

  return (
    <main className="auth-page auth-page-enterprise auth-page-login">
      <div className="auth-enterprise-glow auth-enterprise-glow-right" />
      <div className="auth-enterprise-glow auth-enterprise-glow-left" />
      <div className="auth-page-symbol auth-page-symbol-top">
        <span className="material-symbols-outlined">mark_email_unread</span>
      </div>
      <div className="auth-page-symbol auth-page-symbol-bottom">
        <span className="material-symbols-outlined">lock_reset</span>
      </div>

      <section className="auth-container auth-container-login">
        <div className="auth-login-toolbar">
          <div className="auth-login-locale">{languageSwitcher}</div>
        </div>

        <header className="auth-brand">
          <div className="auth-brand-mark">
            <span className="material-symbols-outlined">lock_reset</span>
          </div>
          <div className="auth-brand-copy">
            <h1>BizOne</h1>
            <p>Reset access securely. We will send a password reset link if the account exists.</p>
          </div>
        </header>

        <section className="auth-card auth-card-enterprise">
          <div className="two-factor-copy auth-public-copy">
            <h2>Forgot Password</h2>
            <p>Enter your email address and we will send you a reset link if the account exists.</p>
          </div>

          <div className="invite-form">
            <label className="invite-field">
              <span>Email Address</span>
              <input
                type="email"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                placeholder="admin@example.com"
              />
            </label>

            <button type="button" className="invite-submit-button" onClick={submit} disabled={pending || !email.trim()}>
              {pending ? 'Sending...' : 'Send Reset Link'}
            </button>

            {error ? <p className="form-error">{error}</p> : null}
            {message ? <p className="form-success">{message}</p> : null}
          </div>

          <div className="invite-footer auth-inline-footer">
            <span>Remembered your password?</span>
            <Link href="/login">Back to login</Link>
          </div>
        </section>
      </section>
    </main>
  );
}
