import { Box, Button, CircularProgress, Typography } from '@mui/material'
import { CheckCircle2 } from 'lucide-react'
import { useOfferWizardStore } from '../../stores/offerWizardStore'
import { useMarkOfferChecked } from '../../hooks/useOffers'
import { useToastStore } from '../../stores/toastStore'

export function OfferCheckedAction() {
  const offerDraftId = useOfferWizardStore(s => s.offerDraftId)
  const needTitle = useOfferWizardStore(s => s.needTitle)
  const setStep = useOfferWizardStore(s => s.setStep)
  const addAttachment = useOfferWizardStore(s => s.addAttachment)
  const setMessageDraft = useOfferWizardStore(s => s.setMessageDraft)
  const setMessageSubject = useOfferWizardStore(s => s.setMessageSubject)

  const markChecked = useMarkOfferChecked()
  const showToast = useToastStore(s => s.showToast)

  const handleConfirm = async () => {
    if (!offerDraftId) return
    const res = await markChecked.mutateAsync(offerDraftId)
    if (res.error) {
      showToast(`Fehler: ${res.error}`, 'error')
      return
    }
    // Add generated PDF as attachment to message
    addAttachment({
      id: crypto.randomUUID(),
      fileName: `Angebot_${needTitle.replace(/\s+/g, '_')}.pdf`,
      fileType: 'application/pdf',
      fileSize: 320_000,
      generated: true,
    })
    setMessageSubject(`Passende Gewerbeflächen zu Ihrer Anfrage: ${needTitle}`)
    setMessageDraft(
      `Sehr geehrte Damen und Herren,\n\nbitte finden Sie anbei unser Angebot zu Ihrem Bedarf "${needTitle}". Gerne stehen wir für Rückfragen und Besichtigungstermine zur Verfügung.\n\nFreundliche Grüsse\nWincasa AG`,
    )
    setStep('send')
  }

  return (
    <Box
      sx={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        bgcolor: '#f8fafc',
        p: 4,
        textAlign: 'center',
      }}
    >
      <Box
        sx={{
          width: 96,
          height: 96,
          borderRadius: '50%',
          bgcolor: '#dcfce7',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          mb: 3,
        }}
      >
        <CheckCircle2 size={48} color="#16a34a" />
      </Box>
      <Typography variant="h5" sx={{ fontWeight: 700, color: '#0f172a', mb: 1 }}>
        Bereit zur Prüfung
      </Typography>
      <Typography variant="body2" sx={{ color: '#475569', maxWidth: 480, mb: 4 }}>
        Bestätigen Sie das geprüfte Angebot. Das PDF wird automatisch als Anhang für den Chat
        vorbereitet, damit Sie es direkt versenden können.
      </Typography>
      <Button
        variant="contained"
        size="large"
        startIcon={
          markChecked.isPending ? <CircularProgress size={18} sx={{ color: 'white' }} /> : <CheckCircle2 size={18} />
        }
        onClick={handleConfirm}
        disabled={markChecked.isPending}
        sx={{
          textTransform: 'none',
          bgcolor: '#16a34a',
          fontSize: '1rem',
          fontWeight: 700,
          px: 4,
          py: 1.5,
          '&:hover': { bgcolor: '#15803d' },
        }}
      >
        ANGEBOT GEPRÜFT
      </Button>
    </Box>
  )
}
