import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { fetchMyChallenges } from '../api/challenges'
import { useChallengeStore } from '../store/challengeStore'
import { useUIStore } from '../store/uiStore'
import type { ChallengeDetail } from '../types/api'
import styles from './ChallengesListPanel.module.css'

/** Full-page side panel for My Challenges — rendered outside CesiumViewer. */
export function MyChallengesSidePanel() {
  const { showMyChallenges, setShowMyChallenges } = useUIStore()
  const { setSelectedChallengeId } = useChallengeStore()
  const navigate = useNavigate()
  const location = useLocation()

  const [challenges, setChallenges] = useState<ChallengeDetail[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (!showMyChallenges) return
    setLoading(true)
    setError(null)
    fetchMyChallenges()
      .then(setChallenges)
      .catch(() => setError('Failed to load your challenges.'))
      .finally(() => setLoading(false))
  }, [showMyChallenges])

  if (!showMyChallenges) return null

  function handleSelect(id: string) {
    setSelectedChallengeId(id)
    setShowMyChallenges(false)
    if (location.pathname !== '/') navigate('/')
  }

  return (
    <div className={styles.overlay} onClick={() => setShowMyChallenges(false)}>
      <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
        <div className={styles.panelHeader}>
          <h2 className={styles.title}>My Challenges</h2>
          <button className={styles.closeBtn} onClick={() => setShowMyChallenges(false)}>✕</button>
        </div>

        <div className={styles.body}>
          {loading && <p className={styles.state}>Loading…</p>}
          {error && <p className={styles.errorState}>{error}</p>}
          {!loading && !error && challenges.length === 0 && (
            <p className={styles.state}>You haven't created any challenges yet.</p>
          )}

          {challenges.map((c) => (
            <div key={c.id} className={styles.row} onClick={() => handleSelect(c.id)}>
              <span className={styles.rowTitle}>{c.title}</span>
              <div className={styles.rowMeta}>
                <span className={`${styles.statusBadge} ${c.status === 'active' ? styles.active : styles.closed}`}>
                  {c.status}
                </span>
                <span className={styles.metaText}>
                  {c.submission_count} submission{c.submission_count !== 1 ? 's' : ''}
                </span>
                {c.expires_at && (
                  <span className={styles.metaText}>
                    {new Date(c.expires_at) < new Date() ? 'Expired' : `Expires ${new Date(c.expires_at).toLocaleDateString()}`}
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}