import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import PageMeta from "../../components/common/PageMeta";
import SignUpFormUnified from "../../components/auth/SignUpFormUnified";

interface Plan {
  id: number;
  name: string;
  slug: string;
  price: string | number;
  billing_cycle: string;
  is_active: boolean;
  max_users: number;
  max_sites: number;
  max_keywords: number;
  max_clusters: number;
  max_content_ideas: number;
  monthly_word_count_limit: number;
  monthly_ai_credit_limit: number;
  monthly_image_count: number;
  daily_content_tasks: number;
  daily_ai_request_limit: number;
  daily_image_generation_limit: number;
  included_credits: number;
  image_model_choices: string[];
  features: string[];
}

export default function SignUp() {
  const planSlug = useMemo(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get("plan") || "";
  }, []);

  const [plans, setPlans] = useState<Plan[]>([]);
  const [plansLoading, setPlansLoading] = useState(true);
  const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);

  useEffect(() => {
    const fetchPlans = async () => {
      setPlansLoading(true);
      try {
        const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || "https://api.igny8.com/api";
        const res = await fetch(`${API_BASE_URL}/v1/auth/plans/`);
        const data = await res.json();
        const allPlans = data?.results || [];
        
        // Show all active plans (including free plan)
        const publicPlans = allPlans
          .filter((p: Plan) => p.is_active)
          .sort((a: Plan, b: Plan) => {
            const priceA = typeof a.price === 'number' ? a.price : parseFloat(String(a.price || 0));
            const priceB = typeof b.price === 'number' ? b.price : parseFloat(String(b.price || 0));
            return priceA - priceB;
          });
        
        setPlans(publicPlans);
        
        // Auto-select plan from URL or default to first plan
        if (planSlug) {
          const plan = publicPlans.find((p: Plan) => p.slug === planSlug);
          if (plan) {
            setSelectedPlan(plan);
          } else {
            setSelectedPlan(publicPlans[0] || null);
          }
        } else {
          setSelectedPlan(publicPlans[0] || null);
        }
      } catch (e) {
        console.error('Failed to load plans:', e);
      } finally {
        setPlansLoading(false);
      }
    };
    fetchPlans();
  }, [planSlug]);

  return (
    <>
      <PageMeta
        title="Sign Up - IGNY8"
        description="Create your IGNY8 account and start building topical authority with AI-powered content"
      />
      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
        <div className="flex min-h-screen">
          {/* Left Side - Signup Form */}
          <SignUpFormUnified 
            plans={plans}
            selectedPlan={selectedPlan}
            onPlanSelect={setSelectedPlan}
            plansLoading={plansLoading}
          />
          
          {/* Right Side - Pricing Plans */}
          <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 p-8 xl:p-12 items-start justify-center relative">
            {/* Logo - Top Right */}
            <Link to="/" className="absolute top-6 right-6">
              <img
                src="/igny8-logo-trnsp.png"
                alt="IGNY8"
                className="h-12 w-auto"
              />
            </Link>
            
            <div className="w-full max-w-2xl mt-20">

              {/* Pricing Plans Component Will Load Here */}
              <div id="signup-pricing-plans" className="w-full">
                {/* Plans will be rendered by SignUpFormUnified */}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
