import { useState } from "react";
import { Link } from "react-router-dom";
import { register } from "../api/authApi";
import { formatAuthError } from "../utils/formatAuthError";
import { AuthField } from "./AuthField";
import { AuthMessage } from "./AuthMessage";
import { AuthSubmit } from "./AuthSubmit";
import { AuthSwitch } from "./AuthSwitch";

function UserIcon(): JSX.Element {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path
        d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function LockIcon(): JSX.Element {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path
        d="M7 11V7a5 5 0 0 1 10 0v4M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function RegisterForm(): JSX.Element {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [consent, setConsent] = useState(false);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <form
      className="z-login-form"
      onSubmit={async (event) => {
        event.preventDefault();
        if (!consent) {
          setError("Please accept the privacy policy to register.");
          return;
        }
        setMessage("");
        setError("");
        setIsSubmitting(true);
        try {
          await register({ email, password });
          setMessage("Registration submitted. Check your email.");
        } catch (registerError) {
          setError(formatAuthError(registerError, "Registration failed"));
        } finally {
          setIsSubmitting(false);
        }
      }}
    >
      <AuthField
        icon={<UserIcon />}
        placeholder="Email"
        type="email"
        autoComplete="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        required
      />
      <AuthField
        icon={<LockIcon />}
        placeholder="Password"
        type="password"
        autoComplete="new-password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        required
        minLength={8}
      />
      <p className="z-login-meta">
        Password: at least 8 characters with uppercase, lowercase, and a digit.
      </p>
      <AuthSwitch checked={consent} onChange={(event) => setConsent(event.target.checked)}>
        I agree to the{" "}
        <Link className="z-login-link" to="/pages/privacy">
          privacy policy
        </Link>
        .
      </AuthSwitch>
      <AuthSubmit loading={isSubmitting} loadingText="Registering..." idleText="Register" />
      {error ? <AuthMessage type="error" text={error} /> : null}
      {message ? <AuthMessage type="success" text={message} /> : null}
      <p className="z-login-meta">
        Already registered?{" "}
        <Link className="z-login-link" to="/login">
          Login
        </Link>
      </p>
    </form>
  );
}
