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

export default function TrashPage() {
  const [trashed, setTrashed] = useState([])
  const [loading, setLoading] = useState(true)
  const navigate = useNavigate()

  useEffect(() => {
    api.get('/quizzes/trash')
      .then(res => setTrashed(res.data))
      .catch(console.error)
      .finally(() => setLoading(false))
  }, [])

  const restore = async (id) => {
    await api.patch(`/quizzes/${id}/restore`)
    setTrashed(prev => prev.filter(q => q.id !== id))
  }

  const permanentDelete = async (id) => {
    await api.delete(`/quizzes/${id}/permanent`)
    setTrashed(prev => prev.filter(q => q.id !== id))
  }

  if (loading) return <div className="loading"><div className="spinner" /></div>

  return (
    <div style={{ maxWidth: 700, margin: '0 auto' }}>
      <div className="card" style={{ marginBottom: 16 }}>
        <h2>Trash</h2>
        <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', marginTop: 4 }}>
          Deleted quizzes — restore or permanently delete.
        </p>
      </div>

      {trashed.length === 0 ? (
        <div className="card"><div className="empty-state">Trash is empty</div></div>
      ) : trashed.map(quiz => (
        <div className="card" key={quiz.id} style={{ marginBottom: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <div>
            <div style={{ fontWeight: 600 }}>{quiz.title}</div>
            <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
              {quiz.questions_count} questions · deleted {new Date(quiz.deleted_at).toLocaleDateString()}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
            <button className="btn btn-primary btn-sm" onClick={() => restore(quiz.id)}>Restore</button>
            <ConfirmButton
              label="Delete forever"
              confirmLabel="Yes, permanently delete"
              onConfirm={() => permanentDelete(quiz.id)}
            />
          </div>
        </div>
      ))}
    </div>
  )
}
