"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,
    borderLeftWidth: 1,
    borderLeftColor: COLORS.GRID,
    marginLeft: 4,
    paddingLeft: 16,
  },
  rootTitle: {
    fontSize: FONT_SIZES.LABEL,
    fontWeight: "bold",
    color: COLORS.CHARCOAL,
    textTransform: "uppercase",
    letterSpacing: 1,
    marginBottom: 16,
    marginLeft: -16, // offset the padding
  },
  categorySection: { marginBottom: 16 },
  categoryHeader: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  categoryIcon: {
    width: 6,
    height: 6,
    backgroundColor: COLORS.CHARCOAL,
    marginRight: 8,
  },
  categoryTitle: {
    fontSize: FONT_SIZES.BODY,
    fontWeight: "bold",
    color: COLORS.CHARCOAL,
  },
  pageRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    marginBottom: 6,
    paddingLeft: 14,
  },
  pageBullet: {
    fontSize: FONT_SIZES.BODY,
    color: COLORS.TEXT_LIGHT,
    marginRight: 8,
    width: 10,
  },
  pageTitle: {
    fontSize: FONT_SIZES.BODY,
    color: COLORS.TEXT_MAIN,
    fontWeight: "bold",
  },
  pageDesc: {
    fontSize: FONT_SIZES.SMALL,
    color: COLORS.TEXT_DIM,
    marginLeft: 6,
    marginTop: 1,
  },
});

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

      <PDFView style={styles.sitemapTree}>
        <PDFText style={styles.rootTitle}>/ Root (Startseite)</PDFText>

        {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>
              {cat.pages.map((p: any, j: number) => (
                <PDFView key={j} style={styles.pageRow}>
                  <PDFText style={styles.pageBullet}>↳</PDFText>
                  <PDFText style={styles.pageTitle}>{p.title}</PDFText>
                  {p.desc && (
                    <PDFText style={styles.pageDesc}> – {p.desc}</PDFText>
                  )}
                </PDFView>
              ))}
            </PDFView>
          </PDFView>
        ))}
      </PDFView>
    </PDFView>
  </>
);