/**
 * Forgot password — request reset email
 */

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../components/common/Button';
import { Input } from '../../components/common/Input';
import { Card } from '../../components/common/Card';
import { handleApiError } from '../../services/api';
import { authService } from '../../services/auth';

export const ForgotPassword: React.FC = () => {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await authService.requestPasswordReset(email.trim());
      setSubmitted(true);
    } catch (err) {
      setError(handleApiError(err));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="page-bg" style={{ display: 'grid', placeItems: 'center', padding: '2rem 1.5rem' }}>
      <div style={{ width: '100%', maxWidth: 420 }}>
        <Card padding="none">
          <div style={{ padding: '2rem' }}>
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <h1
                style={{
                  margin: 0,
                  fontSize: 32,
                  fontWeight: 900,
                  background: 'linear-gradient(90deg, var(--color-brand-dark), var(--color-brand))',
                  WebkitBackgroundClip: 'text',
                  backgroundClip: 'text',
                  color: 'transparent',
                }}
              >
                Forgot password
              </h1>
              <p style={{ margin: '12px 0 0', color: 'var(--text-muted)', fontSize: 14 }}>
                Enter the email you used to register. We&apos;ll send you a reset link.
              </p>
            </div>

            {error && (
              <div
                style={{
                  marginBottom: 16,
                  padding: 16,
                  background: '#fef2f2',
                  border: '1px solid #fecaca',
                  borderRadius: 12,
                }}
              >
                <p style={{ margin: 0, color: '#b91c1c', fontSize: 14 }}>{error}</p>
              </div>
            )}

            {submitted ? (
              <div
                style={{
                  padding: 16,
                  background: '#ecfdf5',
                  border: '1px solid #a7f3d0',
                  borderRadius: 12,
                  marginBottom: 20,
                }}
              >
                <p style={{ margin: 0, color: '#047857', fontSize: 14 }}>
                  If an account exists for that email, check your inbox for reset instructions.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 16 }}>
                <Input
                  label="Email"
                  type="email"
                  name="email"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                    setError('');
                  }}
                  placeholder="you@example.com"
                  required
                  autoComplete="email"
                />
                <Button type="submit" variant="primary" fullWidth loading={loading}>
                  {loading ? 'Sending…' : 'Send reset link'}
                </Button>
              </form>
            )}

            <div
              style={{
                borderTop: '1px solid rgba(15,23,42,0.08)',
                marginTop: 24,
                paddingTop: 20,
                textAlign: 'center',
              }}
            >
              <Link
                to="/login"
                style={{ color: 'var(--color-brand)', fontWeight: 800, textDecoration: 'none', fontSize: 14 }}
              >
                Back to login
              </Link>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};
