'use client'

import { use, useEffect, useState } from 'react'
import LoadMoreButton from '../LoadMoreButton'

const inquiryDummy = [
  { id: 1, category: '屋根', title: '屋根材適合性確認依頼', date: '2025.04.02', status: 'completed' },
  { id: 2, category: '外壁', title: '外壁仕上げ材確認', date: '2025.04.03', status: 'completed' },
  { id: 3, category: '設備', title: '換気システム図面確認', date: '2025.04.04', status: 'completed' },
  { id: 4, category: '基礎', title: '基礎配筋検査依頼', date: '2025.04.05', status: 'completed' },
  { id: 5, category: '内装', title: 'クロス仕様確認', date: '2025.04.06', status: 'waiting' },
  { id: 6, category: '構造', title: '耐震壁位置変更申請', date: '2025.04.07', status: 'completed' },
  { id: 7, category: '屋根', title: '雨樋取付方法確認', date: '2025.04.08', status: 'completed' },
  { id: 8, category: '外構', title: 'フェンス高さ変更相談', date: '2025.04.09', status: 'completed' },
  { id: 9, category: '設備', title: '給湯器設置位置確認', date: '2025.04.10', status: 'completed' },
  { id: 10, category: '外壁', title: 'タイル割付案確認依頼', date: '2025.04.11', status: 'waiting' },
  { id: 11, category: '内装', title: '照明配置図面確認', date: '2025.04.12', status: 'completed' },
  { id: 12, category: '構造', title: '梁補強案確認', date: '2025.04.13', status: 'completed' },
  { id: 13, category: '基礎', title: '杭長設計確認依頼', date: '2025.04.14', status: 'completed' },
  { id: 14, category: '屋根', title: '断熱材施工方法確認', date: '2025.04.15', status: 'completed' },
  { id: 15, category: '外構', title: '駐車場勾配図確認', date: '2025.04.16', status: 'completed' },
]

const badgeStyle = [
  {
    id: 'completed',
    label: '回答完了',
    color: 'blue',
  },
  {
    id: 'waiting',
    label: '回答待ち',
    color: 'orange',
  },
]
export default function ListTable() {
  const [offset, setOffset] = useState(0)
  const [hasMore, setHasMore] = useState(true)

  const inquiryList = inquiryDummy.slice(0, offset + 10)

  useEffect(() => {
    if (inquiryDummy.length > offset + 10) {
      setHasMore(true)
    } else {
      setHasMore(false)
    }
  }, [inquiryList])

  return (
    <>
      <div className="sale-frame">
        <div className="inquiry-table-filter">
          <div className="filter-check">
            <div className="check-form-box">
              <input type="checkbox" id="ch01" />
              <label htmlFor="ch01">私が書いたお問い合わせ</label>
            </div>
          </div>
          <div className="filter-select">
            <select className="select-form" name="" id="">
              <option value="">全体</option>
              <option value="">回答待ち</option>
              <option value="">回答完了</option>
            </select>
          </div>
        </div>
        <div className="inquiry-list-wrap">
          <div className="inquiry-list-tit">
            合計 <span>98</span>個
          </div>
          <ul className="inquiry-list">
            <li className="inquiry-item">
              <div className="inquiry-item-bx">
                <div className="inquiry-item-category">
                  <span>屋根</span>
                  <span>適合性</span>
                  <span>屋根材</span>
                </div>
                <div className="inquiry-item-tit">屋根材適合性確認依頼</div>
                <div className="inquiry-item-date">2025.04.02</div>
                <div className="inquiry-badge badge blue">回答待ち</div>
              </div>
            </li>
            <li className="inquiry-item">
              <div className="inquiry-item-bx">
                <div className="inquiry-item-category">
                  <span>屋根</span>
                  <span>適合性</span>
                  <span>屋根材</span>
                </div>
                <div className="inquiry-item-tit">設置可能ですか？</div>
                <div className="inquiry-item-date">2025.04.02</div>
                <div className="inquiry-badge badge orange">回答完了</div>
              </div>
            </li>
            <li className="inquiry-item">
              <div className="inquiry-item-bx">
                <div className="inquiry-item-category">
                  <span>屋根</span>
                  <span>適合性</span>
                  <span>屋根材</span>
                </div>
                <div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
                <div className="inquiry-item-date">2025.04.02</div>
                <div className="inquiry-badge badge blue">回答待ち</div>
              </div>
            </li>
            <li className="inquiry-item">
              <div className="inquiry-item-bx">
                <div className="inquiry-item-category">
                  <span>屋根</span>
                  <span>適合性</span>
                  <span>屋根材</span>
                </div>
                <div className="inquiry-item-tit">設置可能ですか？</div>
                <div className="inquiry-item-date">2025.04.02</div>
                <div className="inquiry-badge badge orange">回答完了</div>
              </div>
            </li>
            <li className="inquiry-item">
              <div className="inquiry-item-bx nodata">
                <div className="inquiry-item-nodata">조회된 데이터가 없습니다</div>
              </div>
            </li>
          </ul>
          <div className="sale-edit-btn">
            <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
          </div>
        </div>
      </div>
    </>
  )
}
