'use client'

import { useState } from 'react'
import { useTitleSuggestions } from '@/hooks/use-title-suggestions'

export default function TestTitleSuggestionsPage() {
  const [content, setContent] = useState('')

  const { suggestions, isAnalyzing, error } = useTitleSuggestions({
    content,
    enabled: true // Always enabled for testing
  })

  const wordCount = content.split(/\s+/).filter(w => w.length > 0).length

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Test Title Suggestions</h1>

      <div style={{ marginBottom: '20px' }}>
        <label>Content (need 50+ words):</label>
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          style={{ width: '100%', height: '200px', marginTop: '10px' }}
          placeholder="Type at least 50 words here..."
        />
      </div>

      <div style={{ marginBottom: '20px', padding: '10px', background: '#f0f0f0' }}>
        <p><strong>Word count:</strong> {wordCount} / 50</p>
        <p><strong>Status:</strong> {isAnalyzing ? 'Analyzing...' : 'Idle'}</p>
        {error && <p style={{ color: 'red' }}><strong>Error:</strong> {error}</p>}
      </div>

      <div>
        <h2>Suggestions ({suggestions.length}):</h2>
        {suggestions.length > 0 ? (
          <ul>
            {suggestions.map((s, i) => (
              <li key={i}>
                <strong>{s.title}</strong> (confidence: {s.confidence}%)
                {s.reasoning && <p>→ {s.reasoning}</p>}
              </li>
            ))}
          </ul>
        ) : (
          <p style={{ color: '#666' }}>No suggestions yet. Type 50+ words and wait 2 seconds.</p>
        )}
      </div>

      <div style={{ marginTop: '20px' }}>
        <button onClick={() => {
          setContent('word '.repeat(50))
        }}>
          Fill with 50 words (test)
        </button>
      </div>
    </div>
  )
}