'use client';

import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet } from '@react-pdf/renderer';
import { DocumentTitle, COLORS, FONT_SIZES } from '../SharedUI';

const styles = StyleSheet.create({
    section: { marginBottom: 24 },
    sectionTitle: { fontSize: FONT_SIZES.BODY + 1, fontWeight: 'bold', marginBottom: 8, color: COLORS.CHARCOAL },
    configGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 },
    configItem: { width: '24%', marginBottom: 4 },
    configLabel: { fontSize: FONT_SIZES.BLUEPRINT, color: COLORS.TEXT_LIGHT, textTransform: 'uppercase', marginBottom: 2 },
    configValue: { fontSize: FONT_SIZES.TINY, color: COLORS.CHARCOAL, fontWeight: 'bold' },
    visionText: { fontSize: FONT_SIZES.BODY, color: COLORS.TEXT_MAIN, lineHeight: 1.8, textAlign: 'justify' },
});

export const BriefingModule = ({ state }: any) => (
    <>
        <DocumentTitle title="Projektdetails" />
        {state.briefingSummary && (
            <PDFView style={styles.section}>
                <PDFText style={styles.sectionTitle}>Briefing Analyse</PDFText>
                <PDFText style={{ fontSize: 8, color: '#334155', lineHeight: 1.6, textAlign: 'justify' }}>{state.briefingSummary}</PDFText>
            </PDFView>
        )}
        <PDFView style={styles.section}>
            <PDFText style={styles.sectionTitle}>Kern-Informationen</PDFText>
            <PDFView style={styles.configGrid}>
                <PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Kontakt</PDFText><PDFText style={styles.configValue}>{state.personName || "—"}</PDFText></PDFView>
                <PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Projekttyp</PDFText><PDFText style={styles.configValue}>{state.isRelaunch ? 'Website Evolution' : (state.statusQuo || 'Neukonzeption')}</PDFText></PDFView>
                <PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Mitarbeiter</PDFText><PDFText style={styles.configValue}>{state.employeeCount || "—"}</PDFText></PDFView>
                <PDFView style={styles.configItem}><PDFText style={styles.configLabel}>Zeitplan</PDFText><PDFText style={styles.configValue}>{state.deadline || 'Flexibel'}</PDFText></PDFView>
            </PDFView>
        </PDFView>
        {state.designVision && (
            <PDFView style={[styles.section, { padding: 16, borderLeftWidth: 2, borderLeftColor: COLORS.DIVIDER, backgroundColor: COLORS.GRID }]}>
                <PDFText style={[styles.sectionTitle, { color: COLORS.CHARCOAL }]}>Strategische Vision</PDFText>
                <PDFText style={styles.visionText}>{state.designVision}</PDFText>
            </PDFView>
        )}
    </>
);