"use client";

import Link from "next/link";
import { FormEvent, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/Button";
import { useMockAuth } from "@/providers/auth/MockAuthProvider";

export function RegisterForm({
  labels
}: {
  emailLabel: string;
  passwordLabel: string;
  confirmPasswordLabel: string;
  submitLabel: string;
  orDivider: string;
  googleLabel: string;
  loginCta: string;
  loginLink: string;
  errorGeneric: string;
  passwordMismatch: string;
}) {
  const params = useParams() as { locale?: string };
  const router = useRouter();
  const locale = params?.locale ?? "en";
  const { register } = useMockAuth();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (password !== confirmPassword) {
      setError(labels.passwordMismatch);
      return;
    }

    setIsSubmitting(true);
    setError(null);

    try {
      await register(email, password);
      router.push(`/${locale}/account`);
    } catch (err) {
      const message = err instanceof Error ? err.message : labels.errorGeneric;
      setError(message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 320 }}
    >
      <div style={{ textAlign: "left" }}>
        <label htmlFor="email" style={{ display: "block", fontWeight: 600 }}>
          {labels.emailLabel}
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          required
          style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(0,0,0,0.12)" }}
        />
      </div>
      <div style={{ textAlign: "left" }}>
        <label htmlFor="password" style={{ display: "block", fontWeight: 600 }}>
          {labels.passwordLabel}
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autoComplete="new-password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
          required
          style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(0,0,0,0.12)" }}
        />
      </div>
      <div style={{ textAlign: "left" }}>
        <label htmlFor="confirmPassword" style={{ display: "block", fontWeight: 600 }}>
          {labels.confirmPasswordLabel}
        </label>
        <input
          id="confirmPassword"
          name="confirmPassword"
          type="password"
          autoComplete="new-password"
          value={confirmPassword}
          onChange={(event) => setConfirmPassword(event.target.value)}
          required
          style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(0,0,0,0.12)" }}
        />
      </div>
      {error ? <p style={{ color: "#ef4444", fontSize: 14 }}>{error}</p> : null}
      <Button type="submit" disabled={isSubmitting}>
        {isSubmitting ? `${labels.submitLabel}...` : labels.submitLabel}
      </Button>

      <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--color-muted)", fontSize: 13 }}>
        <span style={{ flex: 1, height: 1, background: "rgba(0,0,0,0.1)" }} aria-hidden />
        {labels.orDivider}
        <span style={{ flex: 1, height: 1, background: "rgba(0,0,0,0.1)" }} aria-hidden />
      </div>

      <Button
        type="button"
        onClick={() => setError("Регистрация через Google доступна только в полной версии.")}
        style={{ background: "#ffffff", color: "var(--color-foreground)", border: "1px solid rgba(0,0,0,0.12)" }}
      >
        {labels.googleLabel}
      </Button>

      <p style={{ fontSize: 14, color: "var(--color-muted)" }}>
        {labels.loginCta}{" "}
        <Link href={`/${locale}/login`} style={{ color: "var(--color-foreground)", fontWeight: 600 }}>
          {labels.loginLink}
        </Link>
      </p>
    </form>
  );
}
