import fs from 'fs'
import path from 'path'
import { Font, Page, Text, View, StyleSheet } from '@react-pdf/renderer'
import type { Suitable, SuitableDetail } from '@/types/Suitable'

Font.register({
  family: 'NotoSansJP',
  src: `data:font/ttf;base64,${fs.readFileSync(path.resolve(process.cwd(), 'src/components/pdf/NotoSansJP-Regular.ttf')).toString('base64')}`,
})

const styles = StyleSheet.create({
  page: {
    maxWidth: 840,
    minWidth: 840,
    margin: '0 auto',
    padding: 20,
    fontFamily: 'NotoSansJP',
  },
  introPage: {
    height: 550,
    padding: '60 20',
  },
  introTitWrap: {
    textAlign: 'center',
    marginBottom: 70,
  },
  introTit: {
    fontSize: 18,
    fontWeight: 500,
    color: '#101010',
    fontFamily: 'NotoSansJP',
    marginBottom: 20,
  },
  introDate: {
    fontSize: 16,
    fontWeight: 400,
    color: '#101010',
    fontFamily: 'NotoSansJP',
  },
  introContText: {
    fontSize: 13,
    fontWeight: 400,
    color: '#101010',
    fontFamily: 'NotoSansJP',
  },
  tableGridWrap: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    gap: 20,
  },
  tableCard: {
    width: '48.7%',
  },
  tableTitWrap: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  tableTit: {
    fontSize: 8,
    fontWeight: 500,
    fontFamily: 'NotoSansJP',
    color: '#101010',
  },
  tableTit01: {
    paddingRight: 6,
    borderRight: '1px solid #101010',
  },
  tableTit02: {
    padding: '0 6',
    borderRight: '1px solid #101010',
  },
  tableTit03: {
    paddingLeft: 6,
  },
  table: {
    display: 'flex',
    width: '100%',
  },
  tableRow: {
    flexDirection: 'row',
  },
  tableCol01: {
    width: '18%',
  },
  tableCol02: {
    width: '23%',
  },
  tableCol03: {
    width: '18%',
  },
  tableCol04: {
    width: '41%',
  },
  tableTh: {
    fontSize: 5,
    fontWeight: 500,
    color: '#fff',
    backgroundColor: '#18B490',
    border: '1px solid #18B490',
    textAlign: 'center',
  },
  tableTd: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    fontSize: 5,
    fontWeight: 300,
    color: '#101010',
    backgroundColor: '#fff',
    border: '1px solid #CBCBCB',
    padding: 3,
  },
  marginL: {
    marginLeft: -1,
  },
  marginT: {
    marginTop: -1,
  },
  footer: {
    position: 'absolute',
    bottom: 5,
    left: 30,
    right: 30,
  },
  footerDate: {
    fontSize: 7,
    textAlign: 'right',
    fontFamily: 'NotoSansJP',
    fontWeight: 400,
    color: '#101010',
  },
})

export default function SuitablePdf({
  createTime,
  data,
  fileTitle,
  firstPage,
}: {
  createTime: string
  data: Suitable[]
  fileTitle: string
  firstPage: boolean
}) {
  return (
    <Page size="A4" orientation="landscape" style={styles.page}>
      {/* Intro Section */}
      {firstPage && (
        <View style={styles.introPage}>
          <View style={styles.introTitWrap}>
            <Text style={styles.introTit}>ハンファジャパン株式会社</Text>
            <Text style={styles.introTit}>{fileTitle}</Text>
            <Text style={styles.introDate}>{createTime}</Text>
          </View>
          <View>
            <Text style={styles.introContText}>本適合表は参考資料としてご使用下さい。</Text>
            <Text style={styles.introContText}>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</Text>
            <Text style={styles.introContText}>
              又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。
            </Text>
            <Text style={styles.introContText}>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</Text>
          </View>
        </View>
      )}

      <View style={styles.tableGridWrap}>
        {/* Cards Section */}
        {data?.map((item: Suitable) => (
          <View key={item.id} style={styles.tableCard} wrap={false}>
            {/* Table Title */}
            <View style={styles.tableTitWrap}>
              <Text style={[styles.tableTit, styles.tableTit01]}>{item.productName}</Text>
              <Text style={[styles.tableTit, styles.tableTit02]}>{item.manuFtCd}</Text>
              <Text style={[styles.tableTit, styles.tableTit03]}>{item.roofMtCd}</Text>
            </View>

            {/* Table */}
            <View style={styles.table}>
              {/* Table Header */}
              <View style={styles.tableRow}>
                <Text style={[styles.tableCol01, styles.tableTh]}>金具タイプ</Text>
                <Text style={[styles.tableCol02, styles.tableTh, styles.marginL]}>金具名</Text>
                <Text style={[styles.tableCol03, styles.tableTh, styles.marginL]}>設置可否</Text>
                <Text style={[styles.tableCol04, styles.tableTh, styles.marginL]}>備考</Text>
              </View>

              {/* Table Body */}
              <View>
                {JSON.parse(item.detail)?.map((subItem: SuitableDetail) => (
                  <View key={subItem.id} style={styles.tableRow}>
                    <View style={[styles.tableCol01, styles.tableTd, styles.marginT]}>
                      <Text>{item.roofShCd}</Text>
                    </View>
                    <View style={[styles.tableCol02, styles.tableTd, styles.marginL, styles.marginT]}>
                      <Text>{subItem.trestleMfpcCd}</Text>
                    </View>
                    <View style={[styles.tableCol03, styles.tableTd, styles.marginL, styles.marginT]}>
                      <Text>{subItem.trestleManufacturerProductName}</Text>
                    </View>
                    <View style={[styles.tableCol04, styles.tableTd, styles.marginL, styles.marginT]}>
                      <Text>{subItem.memo}</Text>
                    </View>
                  </View>
                ))}
              </View>
            </View>
          </View>
        ))}
      </View>

      {/* Footer */}
      <View style={styles.footer} fixed>
        <Text style={styles.footerDate}>{createTime}</Text>
      </View>
    </Page>
  )
}
