import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { fontFamily: 'Helvetica', fontSize: 10, padding: 40, color: '#1E1E2D', backgroundColor: '#ffffff' },
  header: { marginBottom: 24 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 4 },
  subtitle: { fontSize: 10, color: '#8C9097' },
  divider: { borderBottom: '1px solid #E9ECEF', marginVertical: 16 },
  section: { marginBottom: 16 },
  sectionTitle: { fontSize: 11, fontWeight: 'bold', marginBottom: 8, color: '#4361EE' },
  row: { flexDirection: 'row', marginBottom: 5 },
  label: { width: 140, color: '#8C9097' },
  value: { flex: 1 },
  table: { marginTop: 8 },
  tableHeader: { flexDirection: 'row', backgroundColor: '#F5F7FA', padding: '6 8', borderRadius: 4, marginBottom: 4 },
  tableRow: { flexDirection: 'row', padding: '5 8', borderBottom: '1px solid #F0F0F0' },
  tableCell: { flex: 1, fontSize: 9 },
  totalRow: { flexDirection: 'row', padding: '8 8', backgroundColor: '#EEF2FF', borderRadius: 4, marginTop: 6 },
  totalLabel: { flex: 1, fontWeight: 'bold', fontSize: 11 },
  totalValue: { fontWeight: 'bold', fontSize: 13, color: '#4361EE' },
  footer: { position: 'absolute', bottom: 30, left: 40, right: 40, textAlign: 'center', color: '#8C9097', fontSize: 8 },
});

const FILM_LABELS = { 200: '200 мкм (стандарт)', 300: '300 мкм (усиленная)' };
const STATUS_LABELS = { 'новая': 'Новая', 'замер': 'Замер', 'согласование': 'Согласование', 'монтаж': 'Монтаж', 'закрыт': 'Завершён' };
const OBJECT_LABELS = { industrial: 'Промышленный объект', commercial: 'Коммерческая штаб-квартира', infrastructure: 'Критическая инфраструктура', residential: 'Частная резиденция', other: 'Другое' };

const fmt = (n) => n ? Number(n).toLocaleString('ru-RU') : '—';
const fmtDate = (d) => d ? new Date(d).toLocaleDateString('ru-RU') : '—';

export const InvoicePDF = ({ order }) => (
  <Document title={`Заказ — ${order.name}`} author="Осколкам.Нет">
    <Page size="A4" style={styles.page}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>Осколкам.Нет</Text>
        <Text style={styles.subtitle}>Бронирование стекол — защитная плёнка</Text>
      </View>
      <View style={styles.divider} />

      {/* Document info */}
      <View style={[styles.row, { marginBottom: 16 }]}>
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 13, fontWeight: 'bold' }}>Смета №{order.id?.slice(0, 8).toUpperCase()}</Text>
          <Text style={{ color: '#8C9097', marginTop: 2 }}>от {fmtDate(order.created_at)}</Text>
        </View>
        <View style={{ alignItems: 'flex-end' }}>
          <Text style={{ fontSize: 9, color: '#8C9097' }}>Статус:</Text>
          <Text style={{ fontWeight: 'bold', color: '#4361EE' }}>{STATUS_LABELS[order.status] || order.status}</Text>
        </View>
      </View>

      {/* Client */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Клиент</Text>
        <View style={styles.row}><Text style={styles.label}>ФИО / Организация</Text><Text style={styles.value}>{order.name || '—'}</Text></View>
        <View style={styles.row}><Text style={styles.label}>Телефон</Text><Text style={styles.value}>{order.phone || '—'}</Text></View>
        {order.telegram_username && <View style={styles.row}><Text style={styles.label}>Telegram</Text><Text style={styles.value}>{order.telegram_username}</Text></View>}
        {order.max_username && <View style={styles.row}><Text style={styles.label}>Max</Text><Text style={styles.value}>{order.max_username}</Text></View>}
        {order.address && <View style={styles.row}><Text style={styles.label}>Адрес объекта</Text><Text style={styles.value}>{order.address}</Text></View>}
      </View>

      {/* Order details */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Детали заказа</Text>
        <View style={styles.table}>
          <View style={styles.tableHeader}>
            <Text style={[styles.tableCell, { fontWeight: 'bold' }]}>Услуга</Text>
            <Text style={[styles.tableCell, { fontWeight: 'bold' }]}>Тип объекта</Text>
            <Text style={[styles.tableCell, { fontWeight: 'bold' }]}>Плёнка</Text>
            <Text style={[styles.tableCell, { fontWeight: 'bold', textAlign: 'right' }]}>Площадь</Text>
          </View>
          <View style={styles.tableRow}>
            <Text style={styles.tableCell}>Бронирование стекол</Text>
            <Text style={styles.tableCell}>{OBJECT_LABELS[order.object_type] || '—'}</Text>
            <Text style={styles.tableCell}>{FILM_LABELS[order.film_thickness] || '—'}</Text>
            <Text style={[styles.tableCell, { textAlign: 'right' }]}>{order.area_sqm ? `${order.area_sqm} м²` : '—'}</Text>
          </View>
        </View>
      </View>

      {/* Total */}
      <View style={styles.totalRow}>
        <Text style={styles.totalLabel}>Итого к оплате</Text>
        <Text style={styles.totalValue}>{fmt(order.final_cost)} ₽</Text>
      </View>

      {order.notes && (
        <View style={[styles.section, { marginTop: 16 }]}>
          <Text style={styles.sectionTitle}>Примечания</Text>
          <Text style={{ color: '#475569' }}>{order.notes}</Text>
        </View>
      )}

      <Text style={styles.footer}>Осколкам.Нет • Бронирование стекол</Text>
    </Page>
  </Document>
);
