"use client"
import { useState, Suspense } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import Link from "next/link"

const PLAN_INFO: Record<string, { name: string; price: string; apps: string }> = {
  free:    { name: "Free",    price: "$0/mo",     apps: "5 apps" },
  starter: { name: "Starter", price: "$29/mo",    apps: "20 apps" },
  pro:     { name: "Pro",     price: "$69/mo",    apps: "100 apps" },
  ultra:   { name: "Ultra",   price: "$149/mo",   apps: "200 apps" },
  unlimited: { name: "Unlimited", price: "$199/mo", apps: "Unlimited" },
  agency_starter: { name: "Agency Starter", price: "$555/mo", apps: "1,000 submissions" },
  agency_growth:  { name: "Agency Growth",  price: "$999/mo", apps: "3,000 submissions" },
  agency_scale:   { name: "Agency Scale",   price: "$1,499/mo", apps: "5,000 submissions" },
  agency_pro:     { name: "Agency Pro",     price: "$3,699/mo", apps: "10,000 submissions" },
  agency_enterprise: { name: "Enterprise", price: "Contact Us", apps: "Unlimited" },
}

function SignupForm() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const planId = searchParams.get("plan") || "free"
  const userType = searchParams.get("type") || "private"
  const plan = PLAN_INFO[planId] || PLAN_INFO.free

  const [form, setForm] = useState({
    name: "", email: "", password: "", confirmPassword: ""
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (form.password !== form.confirmPassword) {
      setError("Passwords don't match")
      return
    }
    setLoading(true)
    setError("")
    
    try {
      const res = await fetch("/autojobs/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          name: form.name, 
          email: form.email, 
          password: form.password,
          user_type: userType,
          plan: planId
        })
      })
      
      if (res.ok) {
        const data = await res.json()
        
        if (planId === "free" || planId === "agency_enterprise") {
          router.push("/autojobs/dashboard")
          return
        }
        
        const checkoutRes = await fetch("https://hostpioneers.com/autojobs/api/create-checkout", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            user_id: data.user_id,
            plan_id: planId,
            user_type: userType
          })
        })
        
        if (checkoutRes.ok) {
          const checkoutData = await checkoutRes.json()
          if (checkoutData.checkout_url) {
            window.location.href = checkoutData.checkout_url
            return
          }
        }
        
        router.push("/autojobs/dashboard")
      } else {
        const data = await res.json()
        setError(data.error || "Signup failed")
      }
    } catch {
      setError("Network error")
    }
    setLoading(false)
  }

  return (
    <div className="min-h-screen bg-slate-900 flex items-center justify-center px-4 py-8">
      <div className="w-full max-w-sm">
        <div className="text-center mb-6">
          <Link href="/autojobs" className="text-2xl font-bold text-white">
            Auto<span className="text-blue-400">Jobs</span>
          </Link>
          <p className="text-slate-400 mt-2 text-sm">Create your account</p>
        </div>

        <div className="bg-slate-800 rounded-2xl p-5 border border-blue-500/30 mb-5">
          <div className="flex justify-between items-center">
            <div>
              <div className="text-xs text-slate-400">Selected Plan</div>
              <div className="text-lg font-bold text-white">{plan.name}</div>
              <div className="text-xs text-slate-400">{plan.apps}/month</div>
            </div>
            <div className="text-right">
              <div className="text-xl font-bold text-blue-400">{plan.price}</div>
              {planId !== "free" && planId !== "agency_enterprise" && (
                <div className="text-xs text-slate-400">billed monthly</div>
              )}
            </div>
          </div>
        </div>
        
        <form onSubmit={handleSubmit} className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
          {error && (
            <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-400 text-xs">
              {error}
            </div>
          )}
          
          <div className="space-y-4">
            <div>
              <label className="block text-xs text-slate-400 mb-1">Full Name</label>
              <input required type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})}
                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="John Smith" />
            </div>
            <div>
              <label className="block text-xs text-slate-400 mb-1">Email</label>
              <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}
                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="you@example.com" />
            </div>
            <div>
              <label className="block text-xs text-slate-400 mb-1">Password</label>
              <input required type="password" value={form.password} onChange={e => setForm({...form, password: e.target.value})}
                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="••••••••" />
            </div>
            <div>
              <label className="block text-xs text-slate-400 mb-1">Confirm Password</label>
              <input required type="password" value={form.confirmPassword} onChange={e => setForm({...form, confirmPassword: e.target.value})}
                className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 text-sm" placeholder="••••••••" />
            </div>
          </div>
          
          <button type="submit" disabled={loading}
            className="w-full mt-5 py-3 bg-blue-500 hover:bg-blue-600 disabled:bg-slate-600 text-white rounded-xl font-semibold transition text-sm">
            {loading ? "Creating account..." : planId === "free" ? "Create Free Account" : `Pay ${plan.price} & Subscribe`}
          </button>
        </form>
        
        <p className="text-center text-slate-400 mt-5 text-xs">
          Already have an account? <Link href="/autojobs/login" className="text-blue-400 hover:underline">Sign in</Link>
        </p>
        <p className="text-center text-slate-500 mt-3 text-xs">
          By signing up, you agree to our <a href="/autojobs/terms" className="text-blue-400 hover:underline">Terms</a> and <a href="/autojobs/privacy" className="text-blue-400 hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  )
}

export default function SignupPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-slate-900 flex items-center justify-center"><div className="text-white">Loading...</div></div>}>
      <SignupForm />
    </Suspense>
  )
}