'use client'

import { useRef } from 'react'
import generatePDF, { Margin, Resolution } from 'react-to-pdf'

export default function SurveySaleDownloadPdf() {
  const targetRef = useRef<HTMLDivElement>(null)
  const handleDownPdf = () => {
    const options = {
      method: 'open' as const,
      resolution: Resolution.HIGH,
      page: {
        margin: Margin.SMALL,
        format: 'A4',
        orientation: 'portrait' as const,
      },
      canvas: {
        mimeType: 'image/png' as const,
        qualityRatio: 1,
      },
      overrides: {
        pdf: {
          compress: true,
        },
        canvas: {
          useCORS: true,
        },
      },
    }

    generatePDF(targetRef, options)
    // generatePDF(targetRef, { filename: 'page.pdf' })
  }
  return (
    <>
      <button onClick={handleDownPdf}>down</button>
      <div ref={targetRef} style={{ boxSizing: 'border-box' }}>
        <div style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}>
          <div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
            <div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
              HWJ 現地調査シート1/2
            </div>
            <div style={{ float: 'right', overflow: 'hidden' }}>
              <div style={{ float: 'left', marginRight: '20px' }}>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic', textAlign: 'right' }}>
                  現地明登施工店名
                </p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
                  Sheet2 No.4Sheet2
                </p>
              </div>
              <div style={{ float: 'right' }}>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>2025.05.09</p>
              </div>
            </div>
          </div>
          <div style={{ padding: '24px 20px 12px' }}>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '73px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    お客様名
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.1
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '73px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    ご住所
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.2
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>も気開係</div>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    雨気契约容国
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.1
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    電気契約会社
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.1
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    電気付带設備
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.7 選式回答表示/自由入力回答表示
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    設置希望システム
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    Sheet2No.8 選択式回表示/自由入力回表
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>屋根眀係</div>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    築年数
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.9
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    至根材
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.10
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    座根形状
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.11
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    座根勾配
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.12
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    住宅樠造
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.13
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    並木材質
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.14
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木サイズ
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.15
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木ビッチ
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.16
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木方向
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.17
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    野地板種類
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.18
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    野地板厚さ
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.19
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    兩漏の形跡
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.20
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    ルーフィング種類
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.21
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    断熱材の有無
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.22
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    屋根構造の順番
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.23
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px' }}>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '160px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    区根製品名設置可否確認
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    No.23
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>メモ</div>
            <div
              style={{
                boxSizing: 'border-box',
                padding: '10px',
                fontSize: '13px',
                fontWeight: 400,
                fontFamily: 'M-Gothic',
                color: '#FF5656',
                border: '1px solid #2E3A59',
                height: '150px',
              }}
            >
              No.25
            </div>
          </div>
        </div>
      </div>
    </>
  )
}