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

const COLORS = {
  primary: '#5B9A9F',
  headerBg: '#5B9A9F',
  tableHeaderBg: '#B8E6E6',
  accent: '#5B9A9F',
  text: '#000000',
  textLight: '#666666',
};

const styles = StyleSheet.create({
  page: {
    paddingTop: 0,
    paddingBottom: 50,
    paddingHorizontal: 50,
    fontSize: 10,
    fontFamily: 'Helvetica',
    lineHeight: 1.4,
  },
  headerBand: {
    backgroundColor: COLORS.headerBg,
    height: 80,
    marginLeft: -50,
    marginRight: -50,
    marginBottom: 30,
    paddingRight: 50,
    paddingTop: 15,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-start',
  },
  logoSmall: {
    width: 100,
    height: 'auto',
  },
  mainTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 15,
  },
  subtitle: {
    fontSize: 10,
    textAlign: 'center',
    marginBottom: 3,
    lineHeight: 1.4,
  },
  accentText: {
    color: COLORS.accent,
  },
  parties: {
    marginTop: 30,
    marginBottom: 25,
  },
  partyBlock: {
    marginBottom: 20,
  },
  partyLabel: {
    fontWeight: 'bold',
    marginBottom: 8,
    fontSize: 11,
  },
  partyText: {
    marginBottom: 4,
    fontSize: 10,
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 11,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  paragraph: {
    marginBottom: 10,
    lineHeight: 1.5,
  },
  table: {
    border: '1px solid #000',
    marginTop: 15,
    marginBottom: 20,
  },
  tableHeaderRow: {
    flexDirection: 'row',
    backgroundColor: COLORS.tableHeaderBg,
    borderBottom: '1px solid #000',
  },
  tableRow: {
    flexDirection: 'row',
    borderBottom: '1px solid #000',
  },
  tableRowLast: {
    flexDirection: 'row',
  },
  tableCell: {
    padding: 10,
    borderRight: '1px solid #000',
    fontSize: 9.5,
    lineHeight: 1.4,
  },
  tableCellLast: {
    padding: 10,
    fontSize: 9.5,
    lineHeight: 1.4,
  },
  tableCellLeft: {
    width: '35%',
    fontWeight: 'bold',
  },
  tableCellMiddle: {
    width: '45%',
  },
  tableCellRight: {
    width: '20%',
    textAlign: 'center',
  },
  tableCellFull: {
    width: '50%',
  },
  radioOption: {
    marginBottom: 5,
  },
  signatureSection: {
    marginTop: 40,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  signatureBox: {
    width: '48%',
  },
  signatureLabel: {
    fontSize: 10,
    marginBottom: 5,
  },
  signatureLine: {
    borderTop: '1px solid #000',
    marginTop: 50,
    paddingTop: 8,
    fontSize: 10,
  },
  signature: {
    marginTop: 10,
    marginBottom: 5,
    maxHeight: 50,
  },
  contactInfo: {
    fontSize: 8,
    marginTop: 2,
  },
  bulletPoint: {
    marginLeft: 20,
    marginBottom: 6,
  },
  numberedList: {
    marginLeft: 10,
    marginBottom: 8,
  },
  emptyLineForSignature: {
    borderBottom: '1px solid #999',
    height: 1,
    marginTop: 40,
    marginBottom: 5,
  },
});

interface ContractData {
  booking: any;
  location: any;
  photobox: any;
  signatureData?: string;
  signedBy?: string;
  signedAt?: Date;
  signedIp?: string;
  logoBase64?: string;
}

export const ContractPDF = ({ 
  booking, 
  location, 
  photobox, 
  signatureData, 
  signedBy, 
  signedAt, 
  signedIp,
  logoBase64 
}: ContractData) => {
  const basePrice = booking.calculatedPrice || 0;
  const distance = booking.distance || 0;
  const totalKm = distance * 2;
  
  return (
    <Document>
      {/* Page 1 */}
      <Page size="A4" style={styles.page}>
        {/* Header Band */}
        <View style={styles.headerBand}>
          {logoBase64 && <Image src={logoBase64} style={styles.logoSmall} />}
        </View>

        {/* Title */}
        <Text style={styles.mainTitle}>SAVE THE MOMENT MIETVERTRAG</Text>
        <Text style={styles.subtitle}>
          über ein Fotobox-Modell inklusive sämtlicher Bestandteile und Zubehör gemäß Ziffer 1
        </Text>
        <Text style={[styles.subtitle, styles.accentText]}>
          (nachfolgend die „Mietgegenstände")
        </Text>

        {/* Parties */}
        <View style={styles.parties}>
          <View style={styles.partyBlock}>
            <Text style={styles.partyLabel}>zwischen</Text>
            <Text style={styles.partyText}>Dennis Forte (DJ Forte), Bahnhofstrasse 14c, 23626 Ratekau</Text>
            <Text style={[styles.partyText, styles.accentText]}>(nachfolgend der „Vermieter")</Text>
          </View>

          <View style={styles.partyBlock}>
            <Text style={styles.partyLabel}>und</Text>
            {booking.customerName && <Text style={styles.partyText}>{booking.customerName}</Text>}
            {booking.customerAddress && (
              <Text style={styles.partyText}>
                {booking.customerAddress}, {booking.customerZip} {booking.customerCity}
              </Text>
            )}
            {!booking.customerName && <View style={styles.emptyLineForSignature} />}
            <Text style={[styles.partyText, styles.accentText]}>(nachfolgend der „Mieter")</Text>
          </View>
        </View>

        {/* Section 1 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>1. MIETGEGENSTÄNDE UND NEBENLEISTUNGEN:</Text>
          <Text style={styles.paragraph}>
            Der Mieter mietet vom Vermieter folgende Mietgegenstände inklusive der genannten Nebenleistungen:
          </Text>

          <View style={styles.table}>
            {/* Header */}
            <View style={styles.tableHeaderRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Mietgegenstand / Leistung</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text> </Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>Bitte ankreuzen</Text>
              </View>
            </View>
            
            {/* Modell */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Modell</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Fotobox Vintage    ○ Smile    ○ Photos</Text>
                <Text style={styles.radioOption}>○ Magic Mirror</Text>
                <Text style={styles.radioOption}>○ Nostalgie</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* Fotodruck vor Ort */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Fotodruck vor Ort</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Ja, 140 Ausdrucke</Text>
                <Text style={styles.radioOption}>○ Ja, Flatrate (400 Ausdrucke soweit nicht anders vereinbart)</Text>
                <Text style={styles.radioOption}>○ Nein, nur digital in der Cloud</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* Accessoires */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Accessoires</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Ja</Text>
                <Text>○ Nein</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* VIP Absperrung */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>VIP Absperrung</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Ja</Text>
                <Text>○ Nein</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* Roter Teppich */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Roter Teppich</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Ja</Text>
                <Text>○ Nein</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* Lieferung */}
            <View style={styles.tableRow}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Lieferung inkl. Aufbau</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text style={styles.radioOption}>○ Ja, einfache Strecke umfasst {distance.toFixed(1)} km. Gesamt = {totalKm.toFixed(1)} km</Text>
                <Text>○ Nein</Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text>☐</Text>
                <Text>☐</Text>
              </View>
            </View>

            {/* Sonstiges */}
            <View style={styles.tableRowLast}>
              <View style={[styles.tableCell, styles.tableCellLeft]}>
                <Text>Sonstiges</Text>
              </View>
              <View style={[styles.tableCell, { width: '45%' }]}>
                <Text> </Text>
              </View>
              <View style={[styles.tableCellLast, styles.tableCellRight]}>
                <Text> </Text>
              </View>
            </View>
          </View>
        </View>

        {/* Section 2 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>2. MIETZWECK</Text>
          <Text style={styles.paragraph}>
            Der Mieter wird die Mietgegenstände entsprechend der bestimmungsgemäßen Verwendung auf folgender Veranstaltung nutzen:
          </Text>
        </View>

        {/* Section 3 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>3. MIETZEIT</Text>
          <Text style={styles.paragraph}>Die Mietzeit geht vom:</Text>
        </View>

        {/* Section 4 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>4. MIETPREIS</Text>
          <Text style={styles.paragraph}>
            Für die Überlassung der Mietgegenstände inklusive Nebenleistungen gemäß Ziffer 1 vereinbaren die Parteien einen Preis von {basePrice.toFixed(2)} € inkl. USt.
          </Text>
        </View>
      </Page>

      {/* Page 2 */}
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>5. ZAHLUNG</Text>
          <Text style={styles.paragraph}>
            Der Mietpreis für die vereinbarte Mietdauer ist im Voraus nach Rechnungstellung des Vermieters zu bezahlen.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>6. ÜBERGABE DER MIETGEGENSTÄNDE</Text>
          <Text style={styles.paragraph}>
            Je nach Vereinbarung liefert der Vermieter die Mietgegenstände an den Veranstaltungsort und baut diese dort auf oder stellt dem Mieter die Mietgegenstände an seinem Geschäftssitz zur Abholung bereit. Der Mieter hat Anspruch auf einen Testlauf. Macht der Mieter von diesem Recht keinen Gebrauch, gelten die Mietgegenstände als mangelfrei übergeben.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>7. VERFÜGBARKEIT VON FOTOS</Text>
          <Text style={styles.numberedList}>
            7.1 Die mit den Mietgegenständen hergestellten Fotos sind zwei Wochen in einer Cloud digital abrufbar.
          </Text>
          <Text style={styles.numberedList}>
            7.2 Bei Buchung einer Druck-Option besteht darüber hinaus die Möglichkeit, Fotos während der Veranstaltung vor Ort auszudrucken. Die Anzahl der Ausdrucke hängt von der gebuchten Option ab. Die Buchung der Flatrate umfasst den Druck von bis zu 400 Blättern, sofern nicht etwas anderes vereinbart wird. Diese Anzahl deckt üblicherweise den gesamten Bedarf. Ist ausnahmsweise von einem höheren Bedarf auszugehen, vereinbaren die Parteien eine höhere Anzahl von Ausdrucken.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>8. KÜNDIGUNG</Text>
          <Text style={styles.numberedList}>
            8.1 Der Abschluss des Mietvertrags ist grundsätzlich verbindlich. Eine Kündigung ist nur aus wichtigem Grund möglich. Sofern der Vermieter den wichtigen Grund nicht gesetzt hat, schuldet der Mieter bei einer Kündigung des Mieters je nach Zeitpunkt der Kündigung folgende Entschädigung:
          </Text>
          <Text style={styles.bulletPoint}>• Kündigung mehr als 6 Monate vor Beginn der Mietzeit: 5 % des Netto-Mietpreises</Text>
          <Text style={styles.bulletPoint}>• Kündigung weniger als 6 Monate vor Beginn der Mietzeit: 20 % des Netto-Mietpreises</Text>
          <Text style={styles.bulletPoint}>• Kündigung weniger als 3 Monate vor Beginn der Mietzeit: 40 % des Netto-Mietpreises</Text>
          <Text style={styles.bulletPoint}>• Kündigung weniger als 1 Monat vor Beginn der Mietzeit: 80 % des Netto-Mietpreises</Text>
          <Text style={styles.paragraph}>
            Dem Mieter steht offen, einen im konkreten Fall gänzlich fehlenden oder wesentlich niedrigeren Anspruch des Vermieters nachzuweisen.
          </Text>
          <Text style={styles.numberedList}>
            8.2 Ein dem Mieter gesetzlich zustehendes Widerrufsrecht bleibt von der vorstehenden Regelung unberührt.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>9. PERSÖNLICHE DATEN</Text>
          <Text style={styles.paragraph}>
            Der Mieter ist damit einverstanden, dass der Vermieter personenbezogene Daten wie Name, Anschrift aus dessen Personalausweis notiert und die erhobenen Daten zur eigenen Verwendung speichert.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>10. PFLICHTEN DES MIETERS</Text>
          <Text style={styles.paragraph}>
            Der Mieter verpflichtet sich, die Mietgegenstände nur für die vereinbarten Zwecke zu nutzen. Der Mieter verpflichtet sich weiter die Mietgegenstände pfleglich zu behandeln und sie jederzeit in geeigneter Weise vor Beschädigung, Verlust oder Diebstahl zu schützen. Bei Diebstahl verpflichtet er sich, unverzüglich den Vermieter zu informieren und auf dessen Verlangen hin bei der nächstgelegenen Polizeidienststelle Anzeige zu erstatten.
          </Text>
        </View>
      </Page>

      {/* Page 3 */}
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>11. HAFTUNG DES MIETERS</Text>
          <Text style={styles.paragraph}>
            Der Mieter haftet dem Vermieter für den Verlust der Mietgegenstände sowie für Schäden an diesen, die durch unsachgemäße Behandlung oder mutwillige Beschädigung der Mietgegenstände entstehen. Der Mieter hat auch für Schäden, die durch unsachgemäße Behandlung oder mutwillige Beschädigung durch Dritte, denen der Mieter Mietgegenstände zum Gebrauch überlässt, einzustehen. Bei einer zweckfremden Nutzung oder nicht berechtigten Weiterüberlassung der Mietgegenstände haftet der Mieter dem Vermieter für sämtliche Schäden an den Mietgegenständen.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>12. HAFTUNG DES VERMIETERS</Text>
          <Text style={styles.paragraph}>
            Der Vermieter hat den Mieter auf die ordnungsgemäße Handhabung der Mietgegenstände hingewiesen. Der Vermieter haftet darüber hinaus nicht für selbstverschuldete Unfälle des Mieters im Zusammenhang mit der Benutzung der Mietgegenstände. Eine sonstige Haftung des Vermieters für Sachschäden des Mieters bzw. Dritter bei Nutzung der Mietgegenstände ist mit Ausnahme von Vorsatz und grober Fahrlässigkeit des Vermieters ausgeschlossen, soweit sich aus den nachfolgenden Regelungen nichts Abweichendes ergibt. Im Falle der Verletzung wesentlicher Vertragspflichten (solche Pflichten, deren Erfüllung die ordnungsgemäße Durchführung des Vertrags überhaupt erst ermöglichen und auf deren Einhaltung der Mieter regelmäßig vertrauen darf) haftet der Vermieter auch bei einfacher Fahrlässigkeit für Sachschäden, jedoch der Höhe nach auf den vorhersehbaren, vertragstypischen Schaden begrenzt. Für Personenschäden gelten die gesetzlichen Bestimmungen. Die Regelungen des Produkthaftungsgesetzes bleiben unberührt.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>13. RÜCKGABE, VERZUGSSCHADEN</Text>
          <Text style={styles.numberedList}>
            13.1 Sofern keine abweichenden Vereinbarungen getroffen werden, gelten für die Rückgabe folgende Regelungen: Die Rückgabe der Mietgegenstände hat spätestens an dem Tag, an dem der Mietzeitraum endet, zu erfolgen. Hat der Mieter die Mietgegenstände inklusive Anlieferung und Abholung gebucht, hat er dem Vermieter nach Ende des Mietzeitraums an dem Tag, an dem der Mietzeitraum endet, die Abholung zu ermöglichen.
          </Text>
          <Text style={styles.numberedList}>
            13.2 Bei verspäteter Rückgabe hat der Mieter dem Vermieter für jeden Verzugstag Schadensersatz in Höhe des sich aus dem Preis gemäß Ziffer 4 und der Mietzeit gemäß Ziffer 3 ergebenden Tagesmietpreises, begrenzt durch den Neuverkaufspreis der Mietgegenstände, zu bezahlen. Bei der Berechnung des Tagesmietpreises sind etwaige Kosten für Lieferung inkl. Aufbau sowie Fotopapier außer Betracht zu lassen. Bei vorzeitiger Rückgabe der Mietsache hat der Mieter keinen Anspruch auf anteilige Rückzahlung des Mietpreises.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>14. VERSCHIEDENES</Text>
          <Text style={styles.numberedList}>
            14.1 Dieser Vertrag enthält die gesamte Vereinbarung. Mündliche Nebenabreden bestehen nicht.
          </Text>
          <Text style={styles.numberedList}>
            14.2 Sollten einzelne Bestimmungen dieses Vertrags unwirksam sein oder werden, bleibt hiervon die Wirksamkeit der übrigen Bestimmungen des Vertrags unberührt. Die Parteien vereinbaren, dass sie im Falle einer unwirksamen Bestimmung dieses Mietvertrags über eine Ersatzregelung verhandeln, die dem von den Parteien mit der unwirksamen Bestimmung verfolgten wirtschaftlichen Zweck am nächsten kommt und die rechtlich zulässigen Inhalt hat.
          </Text>
        </View>

        {/* Signatures */}
        <View style={styles.signatureSection}>
          <View style={styles.signatureBox}>
            <Text style={styles.signatureLabel}>Ort, Datum</Text>
            <Text style={styles.signatureLine}>Ratekau, {formatDate(new Date())}</Text>
            <Text style={{ marginTop: 10, fontSize: 10, fontWeight: 'bold' }}>Dennis Forte (DJ Forte)</Text>
            <Text style={styles.contactInfo}>Tel. 01729140374</Text>
            <Text style={styles.contactInfo}>E-Mail: info@fotobox-luebeck.de</Text>
            <Text style={styles.contactInfo}>Web: fotobox-luebeck.de</Text>
          </View>

          <View style={styles.signatureBox}>
            <Text style={styles.signatureLabel}>Ort, Datum</Text>
            {signatureData ? (
              <>
                <Image src={signatureData} style={styles.signature} />
                <Text style={styles.signatureLine}>{signedBy}</Text>
                {signedAt && (
                  <Text style={{ marginTop: 5, fontSize: 7, color: '#666' }}>
                    Digital signiert am {formatDate(signedAt)}
                  </Text>
                )}
              </>
            ) : (
              <Text style={styles.signatureLine}>Mieter</Text>
            )}
          </View>
        </View>
      </Page>
    </Document>
  );
};