SignUp Page

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "./authContext";
import { useNavigate } from "react-router-dom";
import { Ambulance } from "lucide-react";
import { womanWithAmbulane, whiteManInAmbulance } from "../assets/images/imageIdex";

const carouselData = [
  {
    image: womanWithAmbulane,
    text: "Swift response, every time."
  },
  {
    image: whiteManInAmbulance,
    text: "Get instant Ambulance Service"
  },
  // Add more images and texts here as needed
  // { image: anotherImage, text: "Your safety, our priority." },
];

export default function SignupPortal() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [age, setAge] = useState("");
  const [password, setPassword] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("");
  const [usePhone, setUsePhone] = useState(true); // toggle input mode
  const [admin, setAdmin] = useState(false); // toggle admin mode
  const [organizationName, setOrganizationName] = useState("");
  const [organizationAddress, setOrganizationAddress] = useState("");

  const {signup, loading} = useAuth();
  const navigate = useNavigate();

  // Carousel state
  const [carouselIndex, setCarouselIndex] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCarouselIndex((prev) => (prev + 1) % carouselData.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

const handleSubmit = async (e) => {
  e.preventDefault();

  const payload = {
    first_name: firstName,
    last_name: lastName,
    age: Number(age),
    role,
    password,
    ...(usePhone ? { phone_number: phone.replace(/^0/, "+233") } : { email }),
    ...(admin ? {
      organization: {
        org_name: organizationName,
        address: organizationAddress
      }
    } : {})
  };



    try {
        await signup(payload);
        navigate("/verify-token");
    }
    catch(error) {

    }

};


  return (
    <div className="min-h-screen w-full flex items-stretch bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 relative overflow-hidden">
      {/* Fixed carousel on the left for large screens */}
      <div className="hidden lg:flex flex-col justify-center items-start fixed left-0 top-0 h-full w-2/3 z-10">
        <div className="relative w-full h-2/3 flex items-center justify-center">
          <img
            src={carouselData[carouselIndex].image}
            alt="Ambulance carousel"
            className="object-cover h-full w-full rounded-2xl shadow-xl opacity-60 transition-all duration-700"
          />
          <div className="absolute bottom-12 left-12 bg-opacity-60 px-6 py-4 rounded-xl max-w-lg">
            <h2 className="text-3xl font-bold text-white drop-shadow-lg animate-fade-in-left" style={{animation: 'fadeInLeft 1.2s ease'}}>
              {carouselData[carouselIndex].text}
            </h2>
          </div>
        </div>
        <style>{`
          @keyframes fadeInLeft {
            0% { opacity: 0; transform: translateX(-40px); }
            100% { opacity: 1; transform: translateX(0); }
          }
          .animate-fade-in-left {
            animation: fadeInLeft 1.2s ease;
          }
        `}</style>
      </div>
      {/* Signup card on the right, scrollable */}
      <div className="flex-1 flex items-center justify-end ml-auto lg:pl-[66.6667%] min-h-screen">
        <div className="w-full max-w-lg bg-gray-800 bg-opacity-95 rounded-2xl shadow-2xl p-8 m-12 relative z-20 flex flex-col items-center">
          <Ambulance className="w-16 h-16 text-red-500 drop-shadow-lg mb-2" />
          <h1 className="text-3xl font-bold text-white mb-6 tracking-wide">Sign Up</h1>
          <form className="space-y-4 w-full" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-medium text-gray-300">First Name</label>
              <input
                type="text"
                className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-300">Last Name</label>
              <input
                type="text"
                className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-300">Age</label>
              <input
                type="number"
                className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                value={age}
                onChange={(e) => setAge(e.target.value)}
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-300">Role</label>
              <select
                className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                value={role}
                onChange={(e) => setRole(e.target.value)}
                required
              >
                <option value="">Select a role</option>
                {admin && <option value="HealthAdmin">Health Admin</option> }
                {admin && <option value="DriverAdmin">Driver Admin</option> }
                {!admin && <option value="Driver">Driver</option> }
                {!admin && <option value="Individual">Individual</option>}
              </select>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-sm font-medium text-gray-300">
                Use {usePhone ? "Phone" : "Email"}?
              </span>
              <button
                type="button"
                className="text-blue-400 text-sm"
                onClick={() => setUsePhone(!usePhone)}
              >
                Switch to {usePhone ? "Email" : "Phone"}
              </button>
            </div>
            {usePhone ? (
              <div>
                <label className="block text-sm font-medium text-gray-300">Phone</label>
                <input
                  type="tel"
                  className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  required
                />
              </div>
            ) : (
              <div>
                <label className="block text-sm font-medium text-gray-300">Email</label>
                <input
                  type="email"
                  className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>
            )}
            <div>
              <label className="block text-sm font-medium text-gray-300">Password</label>
              <input
                type="password"
                className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-400"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            { admin &&
              <div>
                <label className="block text-sm font-medium text-gray-300">Organization Name</label>
                <input
                  type="text"
                  className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                  value={organizationName}
                  onChange={(e) => setOrganizationName(e.target.value)}
                  required
                />
                <label className="block text-sm font-medium text-gray-300">Organization Address</label>
                <input
                  type="address"
                  className="mt-1 w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
                  value={organizationAddress}
                  onChange={(e) => setOrganizationAddress(e.target.value)}
                  required
                />
              </div>
            }
            <button
              type="submit"
              className="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg font-semibold shadow-md transition-colors"
            >
              {loading ?<p className="w-5 h-5 bg-white rounded-full animate-pulse"></p> : "Submit"}
            </button>
          </form>
          <button onClick={() => {setAdmin(!admin)}} className="text-blue-400 mt-2 cursor-pointer">
            {admin ? "Create an Individual Account" : "Create an Admin Account"}
          </button>
          <p className="text-center text-gray-400 mt-6">Already have an account? <Link to='/login' className="text-red-300 hover:underline">Login</Link></p>
        </div>
      </div>
    </div>
  );
}