"use client";
import { useState } from "react";
import { useDictionary } from "@/components/DictionaryContext";

export default function MailLogin({ onSuccess }: { onSuccess: (email: string) => void }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const dict = useDictionary();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    const res = await fetch("/api/mail/auth", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });
    const data = await res.json();
    setLoading(false);
    if (res.ok) {
      onSuccess(email);
    } else {
      setError(data.error || "Bağlantı başarısız");
    }
  };

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "60vh" }}>
      <div className="card" style={{ maxWidth: 420, width: "100%" }}>
        <div style={{ textAlign: "center", marginBottom: 24 }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>📧</div>
          <h2 style={{ fontSize: 18, fontWeight: 700, color: "var(--text-primary)" }}>{dict.mailClient.loginTitle || "IMAP Girişi"}</h2>
          <p style={{ fontSize: 13, color: "var(--text-secondary)", marginTop: 4 }}>
            {dict.mailClient.loginSubtitle || "Mail kutunuza bağlanın"}
          </p>
        </div>
        <form onSubmit={handleSubmit} className="form-group">
          {error && <div className="error-msg">{error}</div>}
          <div>
            <label className="label">{dict.mailClient.emailLabel || "E-posta"}</label>
            <input type="email" className="input" placeholder={dict.mailClient.emailPlaceholder || "isim@domain.com"} value={email}
              onChange={(e) => setEmail(e.target.value)} required autoFocus />
          </div>
          <div>
            <label className="label">{dict.mailClient.passwordLabel || "Şifre"}</label>
            <input type="password" className="input" placeholder={dict.mailClient.passwordPlaceholder || "********"} value={password}
              onChange={(e) => setPassword(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: "100%" }} disabled={loading}>
            {loading ? <span className="spinner" /> : (dict.mailClient.connect || "Bağlan")}
          </button>
        </form>
      </div>
    </div>
  );
}