'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'

export function LoginForm() {
  const [handle, setHandle] = useState('')

  function handleChange(value: string) {
    setHandle(value.startsWith('@') ? value.slice(1) : value)
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const loginUrl = `/api/login?handle=${encodeURIComponent(handle.trim())}`
    window.location.href = loginUrl
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3 w-full">
      <div className="relative">
        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--fo-text3)] text-sm font-mono select-none pointer-events-none">
          @
        </span>
        <input
          id="handle"
          name="handle"
          type="text"
          value={handle}
          onChange={(e) => handleChange(e.target.value)}
          placeholder="handle.bsky.social"
          className="w-full h-12 rounded-lg border border-border bg-card pl-8 pr-4 text-sm font-mono placeholder:text-[var(--fo-text3)] focus:outline-none focus:ring-2 focus:ring-[var(--fo-ember)] transition-shadow"
          autoFocus
          autoComplete="username"
          spellCheck={false}
        />
      </div>
      <Button type="submit" disabled={!handle.trim()} className="h-11 w-full">
        Sign In
      </Button>
      <p className="text-xs text-[var(--fo-text3)] text-center mt-1">
        Uses AT Protocol OAuth. FlockOff only requests permission to manage your blocks.
      </p>
    </form>
  )
}