'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export function LandingListForm() {
  const [url, setUrl] = useState('')
  const router = useRouter()

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const trimmed = url.trim()
    if (!trimmed) return
    router.push(`/list?url=${encodeURIComponent(trimmed)}`)
  }

  return (
    <form onSubmit={handleSubmit} className="w-full flex flex-col gap-3">
      <Input
        type="text"
        inputMode="url"
        placeholder="List link or at:// URI"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        className="h-12 rounded-xl font-mono text-sm px-4"
      />
      <Button
        type="submit"
        disabled={!url.trim()}
        className="h-11 w-full"
      >
        Preview list →
      </Button>
    </form>
  )
}