'use client'
import { Box, Button, Typography, Divider } from '@mui/material'
import { BibleVerse, HighlightColor } from '@/types'
import { SyncStatusIndicator } from './sync-status-indicator'

const HIGHLIGHT_COLORS: HighlightColor[] = ['yellow', 'orange', 'pink', 'blue']

const COLOR_MAP: Record<HighlightColor, { bg: string; hex: string }> = {
  yellow: { bg: 'rgba(255, 193, 7, 0.3)', hex: '#FFC107' },
  orange: { bg: 'rgba(255, 152, 0, 0.3)', hex: '#FF9800' },
  pink: { bg: 'rgba(233, 30, 99, 0.3)', hex: '#E91E63' },
  blue: { bg: 'rgba(33, 150, 243, 0.3)', hex: '#2196F3' }
}

interface HighlightsTabProps {
  verse: BibleVerse | null
  isHighlighted: boolean
  currentColor: HighlightColor | null
  onToggleHighlight: () => void
  onColorChange: (color: HighlightColor) => void
  syncStatus?: 'synced' | 'syncing' | 'pending' | 'error'
  syncErrorMessage?: string
}

export function HighlightsTab({
  verse,
  isHighlighted,
  currentColor,
  onToggleHighlight,
  onColorChange,
  syncStatus,
  syncErrorMessage
}: HighlightsTabProps) {
  if (!verse) return null

  return (
    <Box sx={{ p: 2 }}>
      {!isHighlighted ? (
        <Button
          fullWidth
          variant="contained"
          color="primary"
          onClick={onToggleHighlight}
        >
          Highlight this verse
        </Button>
      ) : (
        <>
          <Button
            fullWidth
            variant="outlined"
            color="error"
            onClick={onToggleHighlight}
            sx={{ mb: 2 }}
          >
            Remove highlight
          </Button>

          <Typography variant="subtitle2" sx={{ mb: 1 }}>
            Highlight Color
          </Typography>

          <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
            {HIGHLIGHT_COLORS.map((color) => (
              <Box key={color} sx={{ flex: 1 }}>
                <Button
                  data-testid={`color-${color}`}
                  fullWidth
                  variant={currentColor === color ? 'contained' : 'outlined'}
                  onClick={() => onColorChange(color)}
                  sx={{
                    bgcolor: COLOR_MAP[color].bg,
                    borderColor: COLOR_MAP[color].hex,
                    border: currentColor === color ? `2px solid ${COLOR_MAP[color].hex}` : undefined,
                    minHeight: 50,
                    textTransform: 'capitalize',
                    color: currentColor === color ? '#000' : 'inherit'
                  }}
                >
                  {color}
                </Button>
              </Box>
            ))}
          </Box>

          <Divider sx={{ my: 2 }} />

          {syncStatus && (
            <Box sx={{ mt: 2 }}>
              <Typography variant="subtitle2" sx={{ mb: 1 }}>
                Sync Status
              </Typography>
              <SyncStatusIndicator
                status={syncStatus}
                errorMessage={syncErrorMessage}
              />
            </Box>
          )}

          <Typography variant="body2" color="textSecondary">
            You can highlight the same verse multiple times with different colors.
          </Typography>
        </>
      )}
    </Box>
  )
}