"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import SignupForm from "@/components/SignupForm";
import { parsePlanPreference, setPlanPreference } from "@/lib/plan-preference";

type UserType = "individual" | "practitioner";

interface SignupAudienceFormProps {
  initialUserType: UserType;
  /** Billing cycle carried from the landing page pricing CTA. */
  planType?: string;
  /** Plan tier carried from the landing page pricing CTA. */
  subscriptionType?: string;
}

export default function SignupAudienceForm({
  initialUserType,
  planType,
  subscriptionType,
}: SignupAudienceFormProps) {
  const t = useTranslations("signup");
  const [userType, setUserType] = useState<UserType>(initialUserType);

  useEffect(() => {
    // Persist the plan picked on the landing page. Email verification and the
    // login that follows both drop the URL, so the subscription page can only
    // honour the choice if it is stored here.
    const preference = parsePlanPreference(planType, subscriptionType);
    if (preference) setPlanPreference(preference);
  }, [planType, subscriptionType]);

  return (
    <>
      {/* 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} />
    </>
  );
}