import { Box, Typography } from '@mui/material'
import { FileText } from 'lucide-react'
import { useOfferWizardStore } from '../../stores/offerWizardStore'
import { mockProperties } from '../../mock-data/properties'

interface MockPdfPreviewProps {
  fields: Record<string, string>
  fallbackFields: Record<string, string>
}

export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps) {
  const needTitle = useOfferWizardStore(s => s.needTitle)
  const propertyIds = useOfferWizardStore(s => s.selectedPropertyIds)

  const properties = mockProperties.filter(p => propertyIds.includes(p.id))

  const v = (id: string) => fields[id] ?? fallbackFields[id] ?? ''

  return (
    <Box
      sx={{
        bgcolor: 'white',
        borderRadius: 1.5,
        border: '1px solid #cbd5e1',
        boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
        p: 4,
        height: '100%',
        overflowY: 'auto',
        fontFamily: '"Georgia", "Times New Roman", serif',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3, color: '#64748b' }}>
        <FileText size={16} />
        <Typography variant="caption" sx={{ textTransform: 'uppercase', letterSpacing: 1, fontSize: '0.7rem' }}>
          Angebotsvorschau (PDF)
        </Typography>
      </Box>

      <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', textAlign: 'right' }}>
        Wincasa AG · Zürich
      </Typography>
      <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', textAlign: 'right', mb: 4 }}>
        {new Date().toLocaleDateString('de-CH')}
      </Typography>

      <Typography variant="h6" sx={{ fontWeight: 700, color: '#0f172a', mb: 2, fontSize: '1.05rem' }}>
        Angebot: {needTitle}
      </Typography>

      <Typography variant="body2" sx={{ mb: 1.5, fontSize: '0.875rem' }}>
        {v('recipient_salutation')},
      </Typography>

      <Typography variant="body2" sx={{ mb: 2, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
        {v('offer_intro')}
      </Typography>

      <Typography variant="body2" sx={{ mb: 1, fontWeight: 700, fontSize: '0.875rem' }}>
        Hervorgehobene Kriterien
      </Typography>
      <Typography variant="body2" sx={{ mb: 2.5, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
        {v('highlighted_criteria')}
      </Typography>

      <Typography variant="body2" sx={{ mb: 1, fontWeight: 700, fontSize: '0.875rem' }}>
        Vorgeschlagene Objekte
      </Typography>
      <Box component="ul" sx={{ pl: 2, mb: 2.5 }}>
        {properties.map(p => (
          <Typography
            key={p.id}
            component="li"
            variant="body2"
            sx={{ fontSize: '0.875rem', mb: 0.5, lineHeight: 1.5 }}
          >
            <strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²/Jahr
          </Typography>
        ))}
        {properties.length === 0 && (
          <Typography variant="body2" sx={{ color: '#94a3b8', fontStyle: 'italic' }}>
            Keine Objekte ausgewählt.
          </Typography>
        )}
      </Box>

      <Typography variant="body2" sx={{ mb: 2.5, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
        {v('next_steps')}
      </Typography>

      <Typography variant="body2" sx={{ fontSize: '0.875rem', whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
        {v('closing')}
      </Typography>
    </Box>
  )
}