"use client";

import { useState, useRef, useEffect } from "react";
import styles from "../vip.module.css";

type LoginFormProps = {
  onVerify: (userId: string) => Promise<boolean>;
  onSuccess: () => void;
  autoFocus?: boolean;
};

export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
  const [userId, setUserId] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (autoFocus) inputRef.current?.focus();
  }, [autoFocus]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = userId.trim();
    if (!trimmed) {
      setError("请输入您的账号");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const ok = await onVerify(trimmed);
      if (ok) {
        onSuccess();
      } else {
        setError("未找到该账号的会员记录，请确认账号正确");
      }
    } catch {
      setError("验证失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={inputRef}
        type="text"
        value={userId}
        onChange={(e) => setUserId(e.target.value)}
        placeholder="例如：user1234567890"
        disabled={loading}
        style={{
          width: "100%",
          padding: "0.75rem 1rem",
          fontSize: "1rem",
          border: "1px solid var(--border)",
          borderRadius: "8px",
          background: "var(--background)",
          color: "var(--foreground)",
          marginBottom: "0.75rem",
        }}
      />
      {error && (
        <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>
          {error}
        </p>
      )}
      <button
        type="submit"
        disabled={loading}
        className={`${styles.btnPrimary} ${styles.btnLarge}`}
        style={{ width: "100%" }}
      >
        {loading ? "验证中..." : "验证并登录"}
      </button>
    </form>
  );
}