property-match/src/components/anfragencenter/InquiryReplyComposer.tsx

import { useEffect, useState } from 'react'
import {
  Box,
  Button,
  CircularProgress,
  IconButton,
  TextField,
  Typography,
} from '@mui/material'
import { Send, Paperclip, X } from 'lucide-react'
import { useSendInquiryReply } from '../../hooks/useInquiries'
import { useToastStore } from '../../stores/toastStore'
import type { Attachment } from '../../domain/inquiry'
import { formatFileSize } from './inquiryUtils'

interface InquiryReplyComposerProps {
  inquiryId: string
  defaultSubject: string
  onSent?: () => void
  pendingAttachment?: Attachment | null
  onPendingAttachmentConsumed?: () => void
}

export function InquiryReplyComposer({
  inquiryId,
  defaultSubject,
  onSent,
  pendingAttachment,
  onPendingAttachmentConsumed,
}: InquiryReplyComposerProps) {
  const [subject, setSubject] = useState(
    defaultSubject.startsWith('Re:') ? defaultSubject : `Re: ${defaultSubject}`,
  )
  const [body, setBody] = useState('')
  const [attachments, setAttachments] = useState<Attachment[]>([])

  const sendReply = useSendInquiryReply()
  const showToast = useToastStore(s => s.showToast)

  useEffect(() => {
    if (pendingAttachment) {
      setAttachments(prev => {
        if (prev.find(a => a.id === pendingAttachment.id)) return prev
        return [...prev, pendingAttachment]
      })
      onPendingAttachmentConsumed?.()
    }
  }, [pendingAttachment, onPendingAttachmentConsumed])

  const sending = sendReply.isPending

  const handleAddMockAttachment = () => {
    const name = `Anhang_${attachments.length + 1}.pdf`
    setAttachments(prev => [
      ...prev,
      {
        id: crypto.randomUUID(),
        fileName: name,
        fileType: 'application/pdf',
        fileSize: 240_000 + Math.floor(Math.random() * 800_000),
      },
    ])
  }

  const handleRemoveAttachment = (id: string) => {
    setAttachments(prev => prev.filter(a => a.id !== id))
  }

  const handleSend = async () => {
    if (!body.trim()) {
      showToast('Bitte geben Sie eine Nachricht ein', 'warning')
      return
    }
    const result = await sendReply.mutateAsync({
      inquiryId,
      payload: { subject, body, attachments },
    })
    if (result.error) {
      showToast(`Fehler: ${result.error}`, 'error')
      return
    }
    showToast('Antwort gesendet', 'success')
    setBody('')
    setAttachments([])
    onSent?.()
  }

  return (
    <Box
      sx={{
        borderTop: '1px solid #e2e8f0',
        bgcolor: '#f8fafc',
        p: 2,
        display: 'flex',
        flexDirection: 'column',
        gap: 1.25,
      }}
    >
      <TextField
        size="small"
        label="Betreff"
        value={subject}
        onChange={e => setSubject(e.target.value)}
        fullWidth
      />
      <TextField
        size="small"
        label="Nachricht"
        value={body}
        onChange={e => setBody(e.target.value)}
        multiline
        rows={4}
        placeholder="Antwort verfassen..."
        fullWidth
      />

      {attachments.length > 0 && (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75 }}>
          {attachments.map(a => (
            <Box
              key={a.id}
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 0.75,
                border: '1px solid',
                borderColor: a.generated ? '#bfdbfe' : '#cbd5e1',
                borderRadius: 1,
                px: 1,
                py: 0.5,
                fontSize: '0.75rem',
                bgcolor: a.generated ? '#eff6ff' : 'white',
              }}
            >
              <Paperclip size={12} color={a.generated ? '#2563eb' : undefined} />
              <Typography variant="caption" sx={{ fontSize: '0.75rem', color: a.generated ? '#1d4ed8' : undefined }}>
                {a.fileName}
              </Typography>
              {a.fileSize && (
                <Typography variant="caption" sx={{ fontSize: '0.7rem', color: '#64748b' }}>
                  {formatFileSize(a.fileSize)}
                </Typography>
              )}
              <IconButton size="small" onClick={() => handleRemoveAttachment(a.id)} sx={{ p: 0.25 }}>
                <X size={12} />
              </IconButton>
            </Box>
          ))}
        </Box>
      )}

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, justifyContent: 'space-between' }}>
        <Button
          size="small"
          startIcon={<Paperclip size={14} />}
          onClick={handleAddMockAttachment}
          sx={{ textTransform: 'none' }}
        >
          Anhang
        </Button>
        <Button
          variant="contained"
          size="small"
          startIcon={
            sending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <Send size={14} />
          }
          onClick={handleSend}
          disabled={sending || !body.trim()}
          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
        >
          Antwort senden
        </Button>
      </Box>
    </Box>
  )
}