'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Button, Input, toast } from '@/components/common';
import { isValidEmail } from '@/utils/validators';
import styles from './forgot-password.module.scss';

export default function ForgotPasswordPage() {
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [sent, setSent] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!email) {
      setError('请输入邮箱');
      return;
    }

    if (!isValidEmail(email)) {
      setError('请输入有效的邮箱地址');
      return;
    }

    setLoading(true);

    try {
      // 模拟发送重置邮件
      await new Promise((resolve) => setTimeout(resolve, 1500));
      setSent(true);
      toast.success('重置邮件已发送');
    } catch {
      toast.error('发送失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  if (sent) {
    return (
      <div className={styles.forgotPassword}>
        <div className={styles.forgotPassword__card}>
          <div className={styles.forgotPassword__header}>
            <div className={styles.forgotPassword__icon}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                <polyline points="22,6 12,13 2,6" />
              </svg>
            </div>
            <h1 className={styles.forgotPassword__title}>邮件已发送</h1>
            <p className={styles.forgotPassword__subtitle}>
              我们已向 {email} 发送了密码重置链接，请查收邮件并按照提示操作。
            </p>
          </div>

          <div className={styles.forgotPassword__actions}>
            <Link href="/login">
              <Button variant="primary" fullWidth>
                返回登录
              </Button>
            </Link>
            <Button variant="ghost" fullWidth onClick={() => setSent(false)}>
              重新发送
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.forgotPassword}>
      <div className={styles.forgotPassword__card}>
        <div className={styles.forgotPassword__header}>
          <div className={styles.forgotPassword__logo}>🔐</div>
          <h1 className={styles.forgotPassword__title}>忘记密码</h1>
          <p className={styles.forgotPassword__subtitle}>
            请输入您的邮箱地址，我们将发送密码重置链接
          </p>
        </div>

        <form className={styles.forgotPassword__form} onSubmit={handleSubmit}>
          <Input
            type="email"
            placeholder="请输入邮箱"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
              setError('');
            }}
            error={error}
            prefix={
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                <polyline points="22,6 12,13 2,6" />
              </svg>
            }
          />

          <Button type="submit" variant="primary" fullWidth loading={loading}>
            发送重置链接
          </Button>
        </form>

        <div className={styles.forgotPassword__footer}>
          <Link href="/login" className={styles.forgotPassword__link}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="19" y1="12" x2="5" y2="12" />
              <polyline points="12 19 5 12 12 5" />
            </svg>
            返回登录
          </Link>
        </div>
      </div>
    </div>
  );
}
