"use client";

import { Suspense, useState } from "react";
import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import SignupForm from "@/components/SignupForm";
import ImageCarousel, { placeholderImages } from "@/components/ImageCarousel";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { useSearchParams } from "next/navigation";

type UserType = "individual" | "practitioner";

function SignupContent() {
  const t = useTranslations("signup");
  const th = useTranslations("hero");
  const searchParams = useSearchParams();
  // Therapist-first: default to practitioner; self-screeners arrive via ?type=individual
  const [userType, setUserType] = useState<UserType>(
    searchParams.get("type") === "individual" ? "individual" : "practitioner"
  );

  // Keep the original portrait carousel images, adding brand value-prop
  // captions. Captions reuse the approved (and translated) hero copy.
  const carouselCaptions = [
    `${th("titleLead")} ${th("titleHighlight")}`,
    th("pills.screening"),
    th("pills.reports"),
    th("pills.progress"),
  ];
  const carouselSlides = placeholderImages.map((image, index) => ({
    ...image,
    caption: carouselCaptions[index % carouselCaptions.length],
  }));

  return (
    <main className="min-h-screen flex bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      {/* Left Side - Form */}
      <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 py-12 lg:px-16 xl:px-24">
        <div className="max-w-[520px] w-full">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 mb-12 w-fit cursor-pointer hover:opacity-80 transition">
            <Image src={mbhsLogo} alt="MBHS" width={56} height={56} className="rounded-xl" />
            <span className="text-[36px] font-extrabold text-gray-900 tracking-tight">MBHS</span>
          </Link>

          {/* Title */}
          <h1 className="text-[28px] font-bold text-gray-900 mb-2">
            {t("title")}
          </h1>
          <p className="text-gray-500 text-sm mb-8">
            {t("subtitle")}
          </p>

          {/* User Type Toggle */}
          <div className="flex gap-2 mb-8">
            {/* For Individuals */}
            <button
              type="button"
              onClick={() => setUserType("individual")}
              className={`flex-1 flex flex-col items-center justify-center px-3 py-4 rounded-xl border-2 transition-all cursor-pointer ${
                userType === "individual"
                  ? "border-[#3B9EC9] bg-white shadow-sm"
                  : "border-gray-200 bg-white hover:border-gray-300"
              }`}
            >
              {/* Avatar Icon - Individual */}
              <div className="w-10 h-10 mb-2">
                <svg viewBox="0 0 48 48" fill="none" className="w-full h-full">
                  <circle cx="24" cy="14" r="7" fill="#F5D0C5" />
                  <path
                    d="M17 13c0-3.9 3.1-7 7-7s7 3.1 7 7c0 0.8-0.1 1.6-0.4 2.3-0.8-3.3-3.3-5.3-6.6-5.3s-5.8 2-6.6 5.3C17.1 14.6 17 13.8 17 13z"
                    fill="#8B5A2B"
                  />
                  <path
                    d="M14 44v-7c0-5.5 4.5-10 10-10s10 4.5 10 10v7H14z"
                    fill="#4ECDC4"
                  />
                  <circle cx="21" cy="13" r="1" fill="#333" />
                  <circle cx="27" cy="13" r="1" fill="#333" />
                  <path
                    d="M22 17c0.5 0.5 1 0.8 2 0.8s1.5-0.3 2-0.8"
                    stroke="#333"
                    strokeWidth="0.8"
                    strokeLinecap="round"
                    fill="none"
                  />
                </svg>
              </div>
              <span className="text-xs font-medium text-gray-700">
                {t("forIndividuals")}
              </span>
            </button>

            {/* For Practitioners */}
            <button
              type="button"
              onClick={() => setUserType("practitioner")}
              className={`flex-1 flex flex-col items-center justify-center px-3 py-4 rounded-xl border-2 transition-all cursor-pointer ${
                userType === "practitioner"
                  ? "border-[#3B9EC9] bg-white shadow-sm"
                  : "border-gray-200 bg-white hover:border-gray-300"
              }`}
            >
              {/* Avatar Icon - Practitioner */}
              <div className="w-10 h-10 mb-2">
                <svg viewBox="0 0 48 48" fill="none" className="w-full h-full">
                  <circle cx="24" cy="14" r="7" fill="#F5D0C5" />
                  <path
                    d="M17 13c0-3.9 3.1-7 7-7s7 3.1 7 7c0 0.8-0.1 1.6-0.4 2.3-0.8-3.3-3.3-5.3-6.6-5.3s-5.8 2-6.6 5.3C17.1 14.6 17 13.8 17 13z"
                    fill="#2C3E50"
                  />
                  <path
                    d="M14 44v-7c0-5.5 4.5-10 10-10s10 4.5 10 10v7H14z"
                    fill="#F5A623"
                  />
                  <path
                    d="M20 27v5l4 2 4-2v-5"
                    fill="#FFFFFF"
                    stroke="#E8E8E8"
                    strokeWidth="0.5"
                  />
                  <circle cx="21" cy="13" r="1" fill="#333" />
                  <circle cx="27" cy="13" r="1" fill="#333" />
                  <path
                    d="M22 17c0.5 0.5 1 0.8 2 0.8s1.5-0.3 2-0.8"
                    stroke="#333"
                    strokeWidth="0.8"
                    strokeLinecap="round"
                    fill="none"
                  />
                  <circle cx="24" cy="35" r="2" fill="#3B9EC9" />
                </svg>
              </div>
              <span className="text-xs font-medium text-gray-700">
                {t("forPractitioners")}
              </span>
            </button>
          </div>

          {/* Signup Form */}
          <SignupForm userType={userType} />
        </div>
      </div>

      {/* Right Side - Image Carousel */}
      <div className="hidden lg:flex lg:w-1/2 items-center justify-center p-8">
        <ImageCarousel images={carouselSlides} />
      </div>
    </main>
  );
}

export default function SignupPage() {
  return (
    <Suspense>
      <SignupContent />
    </Suspense>
  );
}