packages/web/src/components/VerifyForm.tsx

// ============================================================================
// agent verf - Verify Form Component
// Version: 0.1.0
// Last Updated: 2026-01-13
//
// URL input form for submitting content for verification.
// ============================================================================

'use client'

import { useState } from 'react'

interface VerifyFormProps {
  onSubmit: (url: string) => Promise<void>
  isLoading: boolean
  error: string | null
}

export default function VerifyForm({ onSubmit, isLoading, error }: VerifyFormProps) {
  const [url, setUrl] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!url.trim()) return
    await onSubmit(url.trim())
  }

  // Validate URL format
  const isValidUrl = (str: string) => {
    try {
      new URL(str)
      return true
    } catch {
      return false
    }
  }

  const canSubmit = url.trim() && isValidUrl(url) && !isLoading

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* URL Input */}
      <div>
        <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-2">
          Paste a URL to verify
        </label>
        <input
          id="url"
          type="url"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="https://twitter.com/... or any URL"
          className="input"
          disabled={isLoading}
          autoFocus
        />
        {url && !isValidUrl(url) && (
          <p className="mt-1 text-sm text-red-500">Please enter a valid URL</p>
        )}
      </div>

      {/* Error Message */}
      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          {error}
        </div>
      )}

      {/* Submit Button */}
      <button
        type="submit"
        disabled={!canSubmit}
        className={`
          w-full py-3 px-4 rounded-lg font-medium text-white
          transition-all duration-200
          ${canSubmit
            ? 'bg-brand-primary hover:bg-brand-secondary'
            : 'bg-gray-300 cursor-not-allowed'
          }
        `}
      >
        {isLoading ? (
          <span className="flex items-center justify-center gap-2">
            <span className="spinner w-5 h-5" />
            Verifying...
          </span>
        ) : (
          'Verify Content'
        )}
      </button>

      {/* Help Text */}
      <p className="text-center text-sm text-gray-500">
        Supports Twitter/X, TikTok, YouTube, Instagram, and news articles
      </p>
    </form>
  )
}