import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAdminAuth } from "../AdminAuthContext";
import { isAdminLoginError, type LoginFieldErrors } from "../lib/loginErrors";
import orionLogo from "@/assets/orion-logo.svg";

const emptyFieldErrors: LoginFieldErrors = {};

export default function AdminLogin() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [alertError, setAlertError] = useState("");
  const [fieldErrors, setFieldErrors] = useState<LoginFieldErrors>(emptyFieldErrors);
  const [submitting, setSubmitting] = useState(false);
  const { login } = useAdminAuth();
  const navigate = useNavigate();

  const clearErrors = () => {
    setAlertError("");
    setFieldErrors(emptyFieldErrors);
  };

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

    clearErrors();
    setSubmitting(true);

    try {
      await login(email.trim(), password);
      navigate("/dashboard", { replace: true });
    } catch (err: unknown) {
      if (isAdminLoginError(err)) {
        if (err.type === "validation") {
          setFieldErrors(err.fieldErrors);
        } else {
          setAlertError(err.message);
        }
      } else {
        setAlertError("Sign in failed. Please try again.");
      }
    } finally {
      setSubmitting(false);
    }
  };

  const inputStyle = (hasError: boolean): React.CSSProperties => ({
    width: "100%",
    padding: "10px 12px",
    border: hasError ? "1px solid #ef4444" : "1px solid #e2e8f0",
    borderRadius: 8,
    boxSizing: "border-box",
  });

  const fieldErrorStyle: React.CSSProperties = {
    color: "#dc2626",
    fontSize: 13,
    marginTop: 6,
  };

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(135deg, #161c24 0%, #0d1117 100%)" }}>
      <div style={{ background: "#fff", padding: 40, borderRadius: 12, boxShadow: "0 4px 24px rgba(0,0,0,0.15)", width: "100%", maxWidth: 400 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 24, textAlign: "center" }}>
          <img src={orionLogo} alt="Orion" style={{ height: 64, marginBottom: 16 }} />
          <h1 style={{ margin: "0 0 8px", fontSize: 24, fontWeight: 700 }}>Admin</h1>
          <p style={{ color: "#64748b", margin: 0 }}>Sign in to the admin panel</p>
        </div>
        <form onSubmit={handleSubmit} noValidate>
          {alertError && (
            <div
              role="alert"
              style={{
                background: "#fef2f2",
                color: "#b91c1c",
                padding: "10px 12px",
                borderRadius: 8,
                marginBottom: 16,
                border: "1px solid #fecaca",
              }}
            >
              {alertError}
            </div>
          )}
          <div style={{ marginBottom: 16 }}>
            <label htmlFor="admin-email" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>
              Email
            </label>
            <input
              id="admin-email"
              type="email"
              value={email}
              onChange={(e) => {
                setEmail(e.target.value);
                if (fieldErrors.email) {
                  setFieldErrors((current) => ({ ...current, email: undefined }));
                }
              }}
              autoComplete="email"
              aria-invalid={Boolean(fieldErrors.email)}
              aria-describedby={fieldErrors.email ? "admin-email-error" : undefined}
              style={inputStyle(Boolean(fieldErrors.email))}
            />
            {fieldErrors.email && (
              <p id="admin-email-error" style={fieldErrorStyle}>
                {fieldErrors.email}
              </p>
            )}
          </div>
          <div style={{ marginBottom: 24 }}>
            <label htmlFor="admin-password" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>
              Password
            </label>
            <input
              id="admin-password"
              type="password"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
                if (fieldErrors.password) {
                  setFieldErrors((current) => ({ ...current, password: undefined }));
                }
              }}
              autoComplete="current-password"
              aria-invalid={Boolean(fieldErrors.password)}
              aria-describedby={fieldErrors.password ? "admin-password-error" : undefined}
              style={inputStyle(Boolean(fieldErrors.password))}
            />
            {fieldErrors.password && (
              <p id="admin-password-error" style={fieldErrorStyle}>
                {fieldErrors.password}
              </p>
            )}
          </div>
          <button
            type="submit"
            disabled={submitting}
            aria-busy={submitting}
            style={{
              width: "100%",
              padding: "12px",
              background: submitting ? "#475569" : "#161c24",
              color: "#fff",
              border: "none",
              borderRadius: 8,
              fontWeight: 600,
              cursor: submitting ? "not-allowed" : "pointer",
              opacity: submitting ? 0.85 : 1,
            }}
          >
            {submitting ? "Signing in..." : "Sign in"}
          </button>
        </form>
      </div>
    </div>
  );
}