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

// 入力からAPIを叩くまでの待ち時間（ミリ秒）
const SEARCH_DEBOUNCE_MS = 300;

// 議員検索画面。市区町村名・議員名を入力するとリアクティブに検索結果が更新される
const GiinSearch = ({ apiBase }) => {
  const [shichosonName, setShichosonName] = useState('');
  const [giinName, setGiinName] = useState('');
  const [giins, setGiins] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    // 市区町村名が空のときは検索しない（APIも空配列を返す）
    if (!shichosonName.trim()) {
      setGiins([]);
      setError('');
      setIsLoading(false);
      return;
    }

    // アンマウントや入力変更で古いリクエストの結果を反映させないためのフラグ
    let isCancelled = false;
    setIsLoading(true);

    const timerId = setTimeout(async () => {
      try {
        const query = new URLSearchParams({ shichoson_name: shichosonName, name: giinName });
        const response = await fetch(`${apiBase}/giins?${query}`);
        if (isCancelled) return;

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

    return () => {
      isCancelled = true;
      clearTimeout(timerId);
    };
  }, [shichosonName, giinName, apiBase]);

  // 検索結果の表示部分
  const renderResults = () => {
    if (!shichosonName.trim()) {
      return <div className="text-muted">市区町村名を入力してください</div>;
    }
    if (isLoading) {
      return (
        <div className="text-muted">
          <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
          検索中...
        </div>
      );
    }
    if (error) {
      return <div className="alert alert-danger" role="alert">{error}</div>;
    }
    if (giins.length === 0) {
      return <div className="text-muted">該当する議員が見つかりません</div>;
    }

    return (
      <div className="list-group">
        {giins.map((giin) => (
          <a
            key={giin.id}
            href={`/member_demo/giins/${giin.id}/giin_interests`}
            className="list-group-item list-group-item-action"
          >
            <span className="fw-semibold">{giin.name}</span>
            <small className="text-muted ms-2">
              {giin.shichoson_name}
              {giin.kaiha && ` / ${giin.kaiha}`}
            </small>
          </a>
        ))}
      </div>
    );
  };

  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-md-8">
          <h2 className="mb-3">関心事項</h2>
          <p className="text-muted">議員を検索して、その議員の関心事項を閲覧できます。</p>
          <div className="row g-2 mb-3">
            <div className="col-md-6">
              <input
                type="text"
                className="form-control"
                placeholder="市区町村名（例：和歌山市）"
                value={shichosonName}
                onChange={(e) => setShichosonName(e.target.value)}
              />
            </div>
            <div className="col-md-6">
              <input
                type="text"
                className="form-control"
                placeholder="議員名（省略可）"
                value={giinName}
                onChange={(e) => setGiinName(e.target.value)}
              />
            </div>
          </div>
          {renderResults()}
        </div>
      </div>
    </div>
  );
};

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

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

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