const { useState, useEffect } = React;
const { createRoot } = ReactDOM;

// 検索入力のデバウンス時間（ミリ秒）
const SEARCH_DEBOUNCE_MS = 300;

// 市区町村の検索・一覧表示。選択すると議事録一覧へ遷移する
const ShichosonList = ({ apiBase }) => {
  const [name, setName] = useState('');
  const [shichosons, setShichosons] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  // 入力からデバウンスして検索する。マウント時も空クエリで初期一覧を取得する
  useEffect(() => {
    let isCancelled = false;

    const timerId = setTimeout(async () => {
      setIsLoading(true);
      setError('');
      try {
        const query = new URLSearchParams({ name: name });
        const response = await fetch(`${apiBase}/shichosons?${query}`);
        if (isCancelled) return;

        if (response.ok) {
          const data = await response.json();
          setShichosons(data.shichosons);
        } else {
          setError('検索に失敗しました');
        }
      } catch (e) {
        if (isCancelled) return;
        console.error('Error:', e);
        setError('ネットワークエラーが発生しました');
      } finally {
        if (!isCancelled) setIsLoading(false);
      }
    }, SEARCH_DEBOUNCE_MS);

    // 入力が続いた場合は前回のリクエスト結果を破棄する
    return () => {
      isCancelled = true;
      clearTimeout(timerId);
    };
  }, [name, apiBase]);

  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-md-8">
          <h2 className="mb-4">議事録一覧</h2>
          <p className="text-muted">市区町村を選ぶと、その議会の議事録を閲覧できます。</p>

          <div className="mb-3">
            <label htmlFor="shichoson-name" className="form-label">市区町村名</label>
            <input
              id="shichoson-name"
              type="text"
              className="form-control"
              placeholder="市区町村名（例：和歌山市）"
              value={name}
              onChange={(e) => setName(e.target.value)}
              autoFocus
            />
          </div>

          {error && (
            <div className="alert alert-danger" role="alert">
              {error}
            </div>
          )}

          {isLoading ? (
            <div className="text-muted">読み込み中...</div>
          ) : shichosons.length === 0 ? (
            <div className="text-muted">該当する市区町村が見つかりません</div>
          ) : (
            <div className="list-group">
              {shichosons.map((shichoson) => (
                <a
                  key={shichoson.id}
                  href={`/member_demo/shichosons/${shichoson.id}/gijirokus`}
                  className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                >
                  <span>
                    <i className="bi bi-geo-alt me-1"></i>
                    {shichoson.name}
                  </span>
                  <span className="badge bg-secondary rounded-pill">
                    議事録 {shichoson.gijiroku_count}件
                  </span>
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

function initializeApp() {
  const container = document.getElementById('shichosons-root');

  if (container) {
    try {
      const apiBase = container.dataset.apiBase;
      const root = createRoot(container);
      root.render(<ShichosonList apiBase={apiBase} />);
    } catch (error) {
      console.error('Error rendering ShichosonList component:', error);
    }
  } else {
    console.error('shichosons-root element not found!');
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeApp);
} else {
  initializeApp();
}