'use client'
import { useState, useEffect, CSSProperties } from 'react'
import { Box, Typography, IconButton, Paper, useMediaQuery, useTheme } from '@mui/material'
import { NavigateBefore, NavigateNext, Settings as SettingsIcon } from '@mui/icons-material'
import { BibleChapter } from '@/types'
import { getCSSVariables, loadPreferences } from '@/lib/reading-preferences'

interface ReadingViewProps {
  chapter: BibleChapter
  loading: boolean
  onPrevChapter: () => void
  onNextChapter: () => void
  onVerseClick: (verseId: string) => void
  onSettingsOpen: () => void
  hasPrevChapter: boolean
  hasNextChapter: boolean
}

export function ReadingView({
  chapter,
  loading,
  onPrevChapter,
  onNextChapter,
  onVerseClick,
  onSettingsOpen,
  hasPrevChapter,
  hasNextChapter,
}: ReadingViewProps) {
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
  const [preferences, setPreferences] = useState(loadPreferences())
  const [showControls, setShowControls] = useState(!isMobile)

  useEffect(() => {
    const handleStorageChange = () => {
      setPreferences(loadPreferences())
    }

    setPreferences(loadPreferences())
    window.addEventListener('storage', handleStorageChange)

    return () => window.removeEventListener('storage', handleStorageChange)
  }, [])

  const cssVars = getCSSVariables(preferences)

  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
        <Typography>Loading chapter...</Typography>
      </Box>
    )
  }

  return (
    <Box
      sx={{
        ...cssVars,
        backgroundColor: 'var(--bg-color)',
        color: 'var(--text-color)',
        minHeight: '100vh',
        transition: 'background-color 0.2s, color 0.2s',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative'
      } as CSSProperties}
      onClick={(e) => {
        if (isMobile) {
          const rect = e.currentTarget.getBoundingClientRect()
          const y = e.clientY - rect.top
          if (y < rect.height * 0.3) {
            setShowControls(true)
          } else if (y > rect.height * 0.7) {
            setShowControls(!showControls)
          } else {
            setShowControls(false)
          }
        }
      }}
    >
      {/* Header */}
      {(showControls || !isMobile) && (
        <Paper
          elevation={0}
          sx={{
            p: 2,
            backgroundColor: 'inherit',
            borderBottom: `1px solid var(--text-color)`,
            opacity: 0.7
          }}
        >
          <Typography variant="h5" fontWeight={600}>
            {chapter.bookName} {chapter.chapter}
          </Typography>
        </Paper>
      )}

      {/* Main Text Area */}
      <Box
        sx={{
          flex: 1,
          py: 3,
          maxWidth: 700,
          mx: 'auto',
          width: '100%',
          px: 'var(--margin-width)',
          lineHeight: 'var(--line-height)',
          fontSize: 'var(--font-size)',
          fontFamily: 'var(--font-family)',
          textAlign: 'var(--text-align)' as any,
        } as CSSProperties}
      >
        {chapter.verses.map((verse) => (
          <span
            key={verse.id}
            role="button"
            tabIndex={0}
            aria-label={`Verse ${verse.verseNum}: ${verse.text}`}
            onClick={(e) => {
              e.stopPropagation()
              onVerseClick(verse.id)
            }}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                onVerseClick(verse.id)
              }
            }}
            style={{
              cursor: 'pointer',
              transition: 'background-color 0.15s',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = 'rgba(255, 193, 7, 0.3)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'transparent'
            }}
          >
            <sup style={{ fontSize: '0.8em', marginRight: '0.25em', fontWeight: 600, opacity: 0.6 }}>
              {verse.verseNum}
            </sup>
            {verse.text}{' '}
          </span>
        ))}
      </Box>

      {/* Navigation Footer */}
      {(showControls || !isMobile) && (
        <Paper
          elevation={0}
          sx={{
            p: 2,
            backgroundColor: 'inherit',
            borderTop: `1px solid var(--text-color)`,
            opacity: 0.7,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <IconButton
            onClick={onPrevChapter}
            disabled={!hasPrevChapter}
            size={isMobile ? 'small' : 'medium'}
          >
            <NavigateBefore />
          </IconButton>

          <Typography variant="body2">
            Chapter {chapter.chapter}
          </Typography>

          <IconButton
            onClick={onSettingsOpen}
            size={isMobile ? 'small' : 'medium'}
          >
            <SettingsIcon />
          </IconButton>

          <IconButton
            onClick={onNextChapter}
            disabled={!hasNextChapter}
            size={isMobile ? 'small' : 'medium'}
          >
            <NavigateNext />
          </IconButton>
        </Paper>
      )}
    </Box>
  )
}