import React from 'react';

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

import { getEventTimeIntervalString } from '@/utils/eventHelpers';

import { Event, EventInstitutionField } from '@/types/Events';

Font.register({
  family: 'Roboto',
  fonts: [
    {
      src: '/fonts/roboto/Roboto-Regular.ttf',
      fontWeight: 'normal',
    },
    {
      src: '/fonts/roboto/Roboto-Bold.ttf',
      fontWeight: 'bold',
    },
  ],
});

const styles = StyleSheet.create({
  page: {
    padding: 35,
    fontSize: 10,
    fontFamily: 'Roboto',
  },
  header: {
    marginBottom: 20,
    paddingBottom: 12,
    borderBottomWidth: 2,
    borderBottomColor: '#1f2937',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  headerLeft: {
    flex: 1,
  },
  headerTitle: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 4,
    color: '#111827',
  },
  headerSubtitle: {
    fontSize: 14,
    color: '#6b7280',
  },
  headerRight: {
    fontSize: 11,
    color: '#9ca3af',
    textAlign: 'right',
  },
  event: {
    marginBottom: 16,
    paddingBottom: 14,
    borderBottomWidth: 0.5,
    borderBottomColor: '#e5e7eb',
  },
  eventDate: {
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#374151',
  },
  eventTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 6,
    color: '#111827',
  },
  label: {
    fontWeight: 'bold',
    color: '#374151',
  },
  text: {
    lineHeight: 1,
    color: '#4b5563',
  },
  link: {
    color: '#111827',
    textDecoration: 'underline',
    fontWeight: 'bold',
  },
  persons: {
    marginTop: 0,
  },
});

interface EventsPDFDocumentProps {
  events: Event[];
  dateRange?: string;
  title?: string;
  getLocationString: (institutionField: EventInstitutionField) => string | null;
}

const EventsPDFDocument: React.FC<EventsPDFDocumentProps> = ({
  events,
  dateRange,
  title,
  getLocationString,
}) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <Text style={styles.headerTitle}>{title || 'Programok'}</Text>
          {dateRange && <Text style={styles.headerSubtitle}>{dateRange}</Text>}
        </View>
        <Text style={styles.headerRight}>azopus.hu</Text>
      </View>

      {events.map((event) => {
        const eventTimeString = getEventTimeIntervalString(event, true);
        const institutionField = event.intezmeny?.[0];
        const locationString = institutionField ? getLocationString(institutionField) : null;

        return (
          <View key={event.id} wrap={false}>
            <View style={styles.event}>
              <Text style={styles.eventDate}>{eventTimeString}</Text>
              <Text style={styles.eventTitle}>{event.nev}</Text>

              {locationString && (
                <Text style={styles.text}>
                  <Text style={styles.label}>Helyszín:</Text> {locationString}
                </Text>
              )}

              {event.leiras && (
                <Text style={styles.text}>{event.leiras.replace(/<[^>]*>/g, '')}</Text>
              )}

              {event.szemely && event.szemely.length > 0 && (
                <View style={styles.persons}>
                  <Text style={styles.text}>
                    <Text style={styles.label}>
                      {event.szemely.length > 1 ? 'Érintett alkotók: ' : 'Érintett alkotó: '}
                    </Text>
                    {event.szemely
                      .sort((a, b) => a.szemely.name.localeCompare(b.szemely.name))
                      .map((p, idx) => (
                        <Text key={p.id}>
                          <Link
                            src={`https://azopus.hu/alkoto/${p.szemely.alkotoAzonosito}`}
                            style={styles.link}
                          >
                            {p.szemely.name}
                          </Link>
                          {p.szemely.szakma?.name && ` ${p.szemely.szakma.name}`}
                          {idx < event.szemely.length - 1 && ', '}
                        </Text>
                      ))}
                  </Text>
                </View>
              )}

              {(event.infoUrl || event.jegyUrl) && (
                <Text style={styles.text}>
                  {event.infoUrl && (
                    <Link src={event.infoUrl} style={styles.link}>
                      Info
                    </Link>
                  )}
                  {event.infoUrl && event.jegyUrl && ' | '}
                  {event.jegyUrl && (
                    <Link src={event.jegyUrl} style={styles.link}>
                      Jegy
                    </Link>
                  )}
                </Text>
              )}
            </View>
          </View>
        );
      })}
    </Page>
  </Document>
);

export default EventsPDFDocument;