import { useSearchParams } from 'react-router'
import { useState } from 'react'

export default function SignupPage() {
  const [searchParams] = useSearchParams()
  const signupCode = searchParams.get('c')
  const [isSubmitting, setIsSubmitting] = useState(false)

  if (!signupCode) {
    return <RejectionMessage />
  }

  return (
    <main className="w-full max-w-3xl mx-auto p-4">
      <div className="mt-12">
        <form className="flex flex-col gap-4 max-w-md" onSubmit={(e) => e.preventDefault()}>
          <div className="flex flex-col gap-2">
            <label htmlFor="username" className="text-sm text-gray-600">
              Username
            </label>
            <input
              id="username"
              type="text"
              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="email" className="text-sm text-gray-600">
              Email (optional)
            </label>
            <input
              id="email"
              type="email"
              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
            />
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="password" className="text-sm text-gray-600">
              Password
            </label>
            <input
              id="password"
              type="password"
              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
              required
            />
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="mt-4 p-2 bg-gray-800 text-white rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSubmitting ? 'Creating account...' : 'Create account'}
          </button>
        </form>
      </div>
    </main>
  )
}

function RejectionMessage() {
  return (
    <main className="w-full max-w-3xl mx-auto p-4">
      <div className="mt-12 text-gray-600 flex flex-col gap-2">
        <p>An invitation is required to create an account.</p>
        <p>
          I'm surprised you even found your way here without one and honestly I'd prefer it if you
          would leave
        </p>
        <p>
          If you <span className="italic">do</span> want to create an account, you should know who
          to contact
        </p>
      </div>
    </main>
  )
}