import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../lib/auth";
import { toast } from "sonner";

export default function Register() {
  const { register } = useAuth();
  const nav = useNavigate();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (password.length < 6) {
      toast.error("Password must be at least 6 characters");
      return;
    }
    setSubmitting(true);
    try {
      await register(email, password, name);
      toast.success("Welcome to Kino");
      nav("/browse", { replace: true });
    } catch (err) {
      toast.error(err.response?.data?.detail || "Could not register");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen w-full grid md:grid-cols-2 bg-[#050505]" data-testid="register-page">
      <div className="hidden md:block relative overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1705147651064-36aedc005020?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2ODh8MHwxfHNlYXJjaHwxfHxjaW5lbWF0aWMlMjBsYW5kc2NhcGUlMjBkYXJrfGVufDB8fHx8MTc3NzQ3MzE2M3ww&ixlib=rb-4.1.0&q=85"
          alt=""
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#050505]/60 to-[#050505]" />
        <div className="absolute bottom-12 left-12 right-12 z-10">
          <span className="text-xs uppercase tracking-[0.3em] text-[#D9381E]">Join Kino</span>
          <h1 className="font-display text-6xl font-black tracking-tighter text-white mt-4 leading-none">
            Curate.<br/>Stream.<br/>Repeat.
          </h1>
        </div>
      </div>

      <div className="flex items-center justify-center px-6 md:px-12 py-12">
        <form onSubmit={onSubmit} className="w-full max-w-sm fade-up" data-testid="register-form">
          <Link to="/" className="block mb-12">
            <span className="font-display text-3xl font-black tracking-tighter text-white">Kino</span>
            <span className="text-[#D9381E] text-3xl">.</span>
          </Link>
          <h2 className="font-display text-3xl font-bold tracking-tight text-white">Create account</h2>
          <p className="text-sm text-[#8A8A8A] mt-2 mb-8">
            Already have an account?{" "}
            <Link to="/login" className="text-[#D9381E] hover:text-[#ED4B32] transition-colors" data-testid="register-to-login">
              Sign in
            </Link>
          </p>

          <label className="block">
            <span className="text-[10px] uppercase tracking-[0.3em] text-[#8A8A8A]">Name</span>
            <input
              required value={name}
              onChange={(e) => setName(e.target.value)}
              className="mt-2 w-full bg-[#0F0F0F] border border-[#222] focus:border-[#D9381E] focus:outline-none text-white px-4 py-3 transition-colors"
              data-testid="register-name-input"
            />
          </label>
          <label className="block mt-5">
            <span className="text-[10px] uppercase tracking-[0.3em] text-[#8A8A8A]">Email</span>
            <input
              type="email" required value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="mt-2 w-full bg-[#0F0F0F] border border-[#222] focus:border-[#D9381E] focus:outline-none text-white px-4 py-3 transition-colors"
              data-testid="register-email-input"
            />
          </label>
          <label className="block mt-5">
            <span className="text-[10px] uppercase tracking-[0.3em] text-[#8A8A8A]">Password</span>
            <input
              type="password" required value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-2 w-full bg-[#0F0F0F] border border-[#222] focus:border-[#D9381E] focus:outline-none text-white px-4 py-3 transition-colors"
              data-testid="register-password-input"
            />
          </label>

          <button
            type="submit"
            disabled={submitting}
            className="mt-8 w-full bg-[#D9381E] hover:bg-[#ED4B32] disabled:opacity-60 text-white py-3 text-sm uppercase tracking-[0.2em] font-medium transition-colors duration-300"
            data-testid="register-submit-button"
          >
            {submitting ? "Creating…" : "Create account"}
          </button>
        </form>
      </div>
    </div>
  );
}