import { useState } from 'react'
import { Box, Button, TextField, Typography } from '@mui/material'
import { MessageSquare } from 'lucide-react'
import type { ReviewNote } from '../../domain/review'

interface ReviewNotesPanelProps {
  notes: ReviewNote[]
  canAddNote: boolean
  onAddNote: (content: string) => void
  isSubmitting?: boolean
}

export function ReviewNotesPanel({ notes, canAddNote, onAddNote, isSubmitting }: ReviewNotesPanelProps) {
  const [noteText, setNoteText] = useState('')

  const handleSubmit = () => {
    if (!noteText.trim()) return
    onAddNote(noteText.trim())
    setNoteText('')
  }

  return (
    <Box>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.25 }}>
        <MessageSquare size={14} color="#64748b" />
        <Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#64748b' }}>
          Notizen ({notes.length})
        </Typography>
      </Box>

      {/* Existing notes */}
      {notes.length > 0 ? (
        <Box sx={{ mb: 1.5 }}>
          {[...notes].reverse().map(note => (
            <Box
              key={note.id}
              sx={{
                px: 1.5,
                py: 1,
                mb: 0.75,
                bgcolor: '#f8fafc',
                borderRadius: 1,
                borderLeft: '3px solid #e2e8f0',
              }}
            >
              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
                <Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', fontSize: '0.7rem' }}>
                  {note.createdBy}
                </Typography>
                <Typography variant="caption" color="text.disabled" sx={{ fontSize: '0.65rem' }}>
                  {new Date(note.createdAt).toLocaleString('de-CH', { dateStyle: 'short', timeStyle: 'short' })}
                </Typography>
              </Box>
              <Typography variant="body2" sx={{ fontSize: '0.8125rem', color: '#334155', lineHeight: 1.5 }}>
                {note.content}
              </Typography>
            </Box>
          ))}
        </Box>
      ) : (
        <Typography variant="caption" color="text.disabled" sx={{ display: 'block', mb: 1.5 }}>
          Noch keine Notizen.
        </Typography>
      )}

      {/* Add note */}
      {canAddNote && (
        <Box>
          <TextField
            multiline
            rows={2}
            fullWidth
            size="small"
            placeholder="Notiz hinzufügen..."
            value={noteText}
            onChange={e => setNoteText(e.target.value)}
            sx={{ mb: 0.75, fontSize: '0.8125rem' }}
          />
          <Button
            size="small"
            variant="outlined"
            disabled={!noteText.trim() || isSubmitting}
            onClick={handleSubmit}
            sx={{ textTransform: 'none', fontSize: '0.75rem' }}
          >
            Notiz speichern
          </Button>
        </Box>
      )}
    </Box>
  )
}
