"use client";

import React, { useState } from "react";
import { useAuth } from "../../../contexts/AuthContext";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function RegisterPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [firstname, setFirstname] = useState("");
  const [lastname, setLastname] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const { register } = useAuth();
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setIsLoading(true);

    try {
      await register(email, password, firstname, lastname);
      router.push("/purchase-orders");
    } catch (err) {
      setError("Registration failed. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="login-container min-h-screen flex flex-col md:flex-row">
      <div className="login-left-panel bg-gradient-to-br from-blue-50 to-blue-100 flex-1 relative flex items-center justify-center p-8">
        <div className="absolute top-0 right-0 w-64 h-64 rounded-full bg-blue-300 opacity-20 -mr-32 -mt-32 blur-3xl"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-blue-300 opacity-20 -ml-32 -mb-32 blur-3xl"></div>
        <div className="login-left-content text-center z-10">
          <div className="logo-container mb-8">
            <div className="text-[#3997E0] font-bold flex items-center justify-center mb-4">
              <span className="text-[#3997E0] mr-2">
                <svg
                  width="48"
                  height="64"
                  viewBox="0 0 24 32"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0Z"
                    fill="#3997E0"
                  />
                  <path
                    d="M11.9997 5.33334C13.4144 5.33334 14.773 5.75432 15.9088 6.53334C17.0446 7.31236 17.9003 8.40256 18.3478 9.66806C18.7954 10.9336 18.8113 12.3142 18.3933 13.5899C17.9753 14.8657 17.1454 15.9746 16.0283 16.7788L18.4 21.3333H16.5333L14.6667 17.7067C13.8054 18.0487 12.8765 18.2225 11.9383 18.2158C10.5236 18.2158 9.16497 17.7948 8.02914 17.0158C6.89332 16.2367 6.03762 15.1466 5.59008 13.8811C5.14254 12.6155 5.12661 11.2349 5.54461 9.95918C5.96261 8.68348 6.79241 7.57454 7.90967 6.77037C9.02693 5.9662 10.387 5.54521 11.8018 5.54521L11.9997 5.33334ZM11.9997 16.6667C13.2361 16.6667 14.4227 16.1926 15.2979 15.3487C16.1731 14.5048 16.6663 13.3623 16.6663 12.1708C16.6663 10.9794 16.1731 9.8369 15.2979 8.99297C14.4227 8.14904 13.2361 7.67501 11.9997 7.67501C10.7632 7.67501 9.57659 8.14904 8.70138 8.99297C7.82616 9.8369 7.33301 10.9794 7.33301 12.1708C7.33301 13.3623 7.82616 14.5048 8.70138 15.3487C9.57659 16.1926 10.7632 16.6667 11.9997 16.6667Z"
                    fill="white"
                  />
                  <path
                    d="M8.5 25.3333L12 32L15.5 25.3333H8.5Z"
                    fill="#3997E0"
                  />
                </svg>
              </span>
              <span className="text-4xl">
                spring<span className="text-[#3997E0]">aqua</span>
              </span>
            </div>
          </div>
          <div className="tagline-container">
            <h2 className="text-2xl font-medium text-gray-700">
              Purchase Order Management System
            </h2>
            <p className="mt-4 text-gray-600">
              Create an account to get started with our ERP system
            </p>
          </div>
        </div>
      </div>
      <div className="login-right-panel bg-white flex-1 flex items-center justify-center p-8">
        <div className="login-form-container w-full max-w-md">
          <h1 className="text-2xl font-bold mb-6 text-gray-800">
            Create your account
          </h1>

          {error && (
            <div className="bg-red-100 text-red-700 p-3 rounded mb-4 w-full">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="w-full space-y-6">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  First Name
                </label>
                <input
                  type="text"
                  value={firstname}
                  onChange={(e) => setFirstname(e.target.value)}
                  placeholder="Enter your first name"
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Last Name
                </label>
                <input
                  type="text"
                  value={lastname}
                  onChange={(e) => setLastname(e.target.value)}
                  placeholder="Enter your last name"
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Email
                </label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email"
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Password
                </label>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Create a password"
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  required
                />
              </div>
            </div>

            <button
              type="submit"
              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-150"
              disabled={isLoading}
            >
              {isLoading ? "Creating account..." : "Create account"}
            </button>

            <div className="text-center">
              <Link href="/login" className="text-blue-600 hover:underline">
                Already have an account? Sign in
              </Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}