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

export default function Login() {
  const { login } = useAuth();
  const nav = useNavigate();
  const loc = useLocation();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await login(email, password);
      toast.success("Welcome back");
      nav(loc.state?.from || "/browse", { replace: true });
    } catch (err) {
      toast.error(err.response?.data?.detail || "Login failed");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen w-full grid md:grid-cols-2 bg-[#050505]" data-testid="login-page">
      <div className="hidden md:block relative overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1698159929270-c88bad6346fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA1ODR8MHwxfHNlYXJjaHwzfHxhYnN0cmFjdCUyMGRhcmslMjB0ZXh0dXJlJTIwZmlsbSUyMGdyYWlufGVufDB8fHx8MTc3NzQ3MzE2M3ww&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]">Personal Cinema</span>
          <h1 className="font-display text-6xl font-black tracking-tighter text-white mt-4 leading-none">
            Your library,<br/>your way.
          </h1>
          <p className="text-[#8A8A8A] mt-6 max-w-md leading-relaxed">
            Stream the films you own, the way you remember them — without the noise.
          </p>
        </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="login-form">
          <Link to="/" className="block mb-12" data-testid="login-logo">
            <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">Sign in</h2>
          <p className="text-sm text-[#8A8A8A] mt-2 mb-8">
            Don't have an account?{" "}
            <Link to="/register" className="text-[#D9381E] hover:text-[#ED4B32] transition-colors" data-testid="login-to-register">
              Create one
            </Link>
          </p>

          <label className="block">
            <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="login-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="login-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="login-submit-button"
          >
            {submitting ? "Signing in…" : "Sign in"}
          </button>

          <div className="mt-8 p-4 border border-[#222] text-xs text-[#8A8A8A]" data-testid="login-demo-credentials">
            <span className="text-[10px] uppercase tracking-[0.3em] text-[#D9381E] block mb-2">Demo Admin</span>
            admin@kino.local / kino-admin-2026
          </div>
        </form>
      </div>
    </div>
  );
}