"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: 32 },
  intro: {
    fontSize: FONT_SIZES.BODY,
    color: COLORS.TEXT_DIM,
    lineHeight: 1.4,
    marginBottom: 24,
    textAlign: "justify",
  },
  sitemapTree: { marginTop: 8 },
  rootNode: {
    padding: 12,
    backgroundColor: COLORS.GRID,
    marginBottom: 20,
    borderLeftWidth: 2,
    borderLeftColor: COLORS.CHARCOAL,
  },
  rootTitle: {
    fontSize: FONT_SIZES.HEADING,
    fontWeight: "bold",
    color: COLORS.CHARCOAL,
    letterSpacing: 0.5,
  },
  categorySection: { marginBottom: 20 },
  categoryHeader: {
    flexDirection: "row",
    alignItems: "center",
    paddingBottom: 6,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.BLUEPRINT,
    marginBottom: 10,
  },
  categoryIcon: {
    width: 8,
    height: 8,
    backgroundColor: COLORS.GRID,
    borderInlineWidth: 1,
    borderColor: COLORS.DIVIDER,
    marginRight: 10,
  },
  categoryTitle: {
    fontSize: FONT_SIZES.BODY,
    fontWeight: "bold",
    color: COLORS.CHARCOAL,
    textTransform: "uppercase",
    letterSpacing: 1,
  },
  pagesGrid: { flexDirection: "row", flexWrap: "wrap" },
  pageCard: {
    width: "48%",
    marginRight: "2%",
    marginBottom: 12,
    padding: 10,
    borderWidth: 1,
    borderColor: COLORS.GRID,
    backgroundColor: "#fafafa",
  },
  pageTitle: {
    fontSize: FONT_SIZES.BODY,
    fontWeight: "bold",
    color: COLORS.TEXT_MAIN,
    marginBottom: 4,
  },
  pageDesc: {
    fontSize: FONT_SIZES.TINY,
    color: COLORS.TEXT_DIM,
    lineHeight: 1.3,
  },
});

export const SitemapModule = ({ state }: any) => (
  <>
    <DocumentTitle title="Informationsarchitektur" isHero={true} />
    <PDFView style={styles.section}>
      <PDFText style={styles.intro}>
        Die folgende Struktur definiert die logische Hierarchie und
        Benutzerführung. Sie dient als Bauplan für die technische Umsetzung und
        stellt sicher, dass alle relevanten Geschäftsbereiche intuitiv
        auffindbar sind.
      </PDFText>

      <PDFView style={styles.sitemapTree}>
        <PDFView style={styles.rootNode}>
          <PDFText style={styles.rootTitle}>Seitenstruktur</PDFText>
        </PDFView>

        {state.sitemap?.map((cat: any, i: number) => (
          <PDFView key={i} style={styles.categorySection} wrap={false}>
            <PDFView style={styles.categoryHeader}>
              <PDFView style={styles.categoryIcon} />
              <PDFText style={styles.categoryTitle}>{cat.category}</PDFText>
            </PDFView>

            <PDFView style={styles.pagesGrid}>
              {cat.pages.map((p: any, j: number) => (
                <PDFView
                  key={j}
                  style={[
                    styles.pageCard,
                    j % 2 === 1 ? { marginRight: 0 } : {},
                  ]}
                >
                  <PDFText style={styles.pageTitle}>{p.title}</PDFText>
                  {p.desc && (
                    <PDFText style={styles.pageDesc}>{p.desc}</PDFText>
                  )}
                </PDFView>
              ))}
            </PDFView>
          </PDFView>
        ))}
      </PDFView>
    </PDFView>
  </>
);
