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

Font.register({
  family: 'Open Sans',
  fonts: [{ src: '/fonts/OpenSans.ttf', fontWeight: 'normal' }]
});

const styles = StyleSheet.create({
  page: {
    padding: 25,
    fontSize: 14,
    fontFamily: 'Open Sans',
    backgroundColor: '#F8F9FA',
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 25,
    justifyContent: 'left',
  },
  headerText: {
    flexDirection: 'column',
    justifyContent: 'left',
    alignItems: 'center',
    marginLeft: 25,
  },
  logo: {
    width: 60,
    height: 60,
  },
  header: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2C3E50',
    letterSpacing: 1.5,
  },
  subHeader: {
    fontSize: 14,
    marginTop: 5,
    color: '#34495E'
  },
  tableHeader: {
    flexDirection: 'row',
    backgroundColor: '#3E8F5A',
    fontWeight: 'bold',
    paddingVertical: 8,
    paddingHorizontal: 5,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  headerCell: {
    paddingHorizontal: 5,
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 12,
  },
  row: {
    flexDirection: 'row',
    paddingVertical: 6,
    paddingHorizontal: 5,
    borderBottomWidth: 1,
    borderBottomColor: '#D5D8DC'
  },
  cell: {
    paddingHorizontal: 5,
    fontSize: 9,
    color: '#2C3E50'
  }
});

const parseDate = (dateStr) => {
  if (!dateStr) return '';
  const [y, m, d] = dateStr.split('-');
  return `${d}/${m}/${y}`;
};

export const SociosPDF = ({ socios }) => (
  <Document>
    <Page size="A4" orientation="landscape" style={styles.page}>
      <View style={styles.headerContainer}>
        <Image src={"/images/logo.png"} style={styles.logo} />
        <View style={styles.headerText}>
          <Text style={styles.header}>Listado de socios</Text>
          <Text style={styles.subHeader}>Asociación Huertos La Salud - Bellavista • Generado el {new Date().toLocaleDateString()} a las {new Date().toLocaleTimeString()}</Text>
        </View>
      </View>

      <View style={styles.tableHeader}>
        <Text style={[styles.headerCell, { flex: 0.2 }]}>S</Text>
        <Text style={[styles.headerCell, { flex: 0.2 }]}>H</Text>
        <Text style={[styles.headerCell, { flex: 3 }]}>Nombre</Text>
        <Text style={[styles.headerCell, { flex: 1 }]}>DNI</Text>
        <Text style={[styles.headerCell, { flex: 1 }]}>Teléfono</Text>
        <Text style={[styles.headerCell, { flex: 3 }]}>Email</Text>
        <Text style={[styles.headerCell, { flex: 1 }]}>Alta</Text>
        <Text style={[styles.headerCell, { flex: 1 }]}>Tipo</Text>
      </View>

      {socios.map((socio, idx) => (
        <View
          key={idx}
          style={[
            styles.row,
            { backgroundColor: idx % 2 === 0 ? '#ECF0F1' : '#FDFEFE' },
            { borderBottomLeftRadius: idx === socios.length - 1 ? 10 : 0 },
            { borderBottomRightRadius: idx === socios.length - 1 ? 10 : 0 },
          ]}
        >
          <Text style={[styles.cell, { flex: 0.2 }]}>{socio?.memberNumber}</Text>
          <Text style={[styles.cell, { flex: 0.2 }]}>{socio?.plotNumber}</Text>
          <Text style={[styles.cell, { flex: 3 }]}>{socio?.displayName}</Text>
          <Text style={[styles.cell, { flex: 1 }]}>{socio?.dni}</Text>
          <Text style={[styles.cell, { flex: 1 }]}>{socio?.phone}</Text>
          <Text style={[styles.cell, { flex: 3 }]}>{socio?.email || ''}</Text>
          <Text style={[styles.cell, { flex: 1 }]}>{parseDate(socio?.createdAt?.split('T')[0] || '')}</Text>
          <Text style={[styles.cell, { flex: 1 }]}>
            {(() => {
              switch (socio?.type) {
                case 0: return 'L. Espera';
                case 1: return 'Hortelano';
                case 2: return 'Invernadero';
                case 3: return 'Colaborador';
                default: return 'Desconocido';
              }
            })()}
          </Text>
        </View>
      ))}
    </Page>
  </Document>
);