import { useNavigate } from 'react-router-dom'
import { Navbar } from '../components/Navbar'
import { useEffect, useState } from 'react'
import { api } from '../store/api'

export function Home() {
  const navigate = useNavigate()
  const [scripts, setScripts] = useState<any[]>([])

  useEffect(() => {
    api.scripts.list().then(setScripts).catch(() => {})
  }, [])

  return (
    <div>
      <Navbar />
      <div className="hero">
        <h1>AI 剧本杀</h1>
        <p>随时开局，人人都是主角。1 人即可开局，AI 队友补位。</p>
        <div className="actions">
          <button className="btn-primary" onClick={() => navigate('/scripts')}>
            开始游戏
          </button>
          <button className="btn-secondary" onClick={() => navigate('/login')}>
            登录 / 注册
          </button>
        </div>
      </div>
      <div className="page">
        <h2 style={{ marginBottom: 16 }}>推荐剧本</h2>
        <div className="script-grid">
          {scripts.map((s) => (
            <div
              key={s.id}
              className="card script-card"
              style={{ cursor: 'pointer' }}
              onClick={() => navigate(`/scripts/${s.id}`)}
            >
              <h3>{s.title}</h3>
              <div className="tags">
                <span className="tag">{s.type}</span>
                <span className="tag difficulty">{'⭐'.repeat(s.difficulty)}</span>
                <span className="tag">{s.duration}</span>
                <span className="tag">{s.min_players}-{s.max_players}人</span>
              </div>
              <p style={{ color: '#aaa', fontSize: 14, lineHeight: 1.6 }}>{s.background}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}