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

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

// 区分（kind）の表示順。サーバーの enum 定義順に合わせる
const KIND_ORDER = ['todofuken', 'tokubetsu_ku', 'seirei_shitei_toshi', 'chukaku_shi', 'shikouji_tokurei_shi', 'ippan_shi', 'cho', 'mura'];

// 主要区分（都道府県〜中核市）のセクションを区別するための border 色。
// その他の区分（一般市以下）は強調しない
const KIND_BORDER_COLORS = {
  todofuken: '#0d6efd',
  tokubetsu_ku: '#b8860b',
  seirei_shitei_toshi: '#6f42c1',
  shikouji_tokurei_shi: '#0f766e',
  chukaku_shi: '#dc3545',
};

// 指標のアイコン。ホバーで CSS ツールチップ（data-label の中身）に指標名を表示する
const MetricIcon = ({ label, iconClass }) => (
  <span className="metric-icon" data-label={label} aria-label={label} tabIndex="0">
    <i className={`bi ${iconClass} fs-5 text-machi-teal`}></i>
  </span>
);

// 比較モード中にカード下部へ出す操作エリア。
// カード全体が <a> なので、preventDefault / stopPropagation でカルテへの遷移を止める
const CompareControl = ({ shichoson, compareFirstId, onToggleFirst }) => {
  if (compareFirstId && compareFirstId !== shichoson.id) {
    // 1つめが選ばれていれば、他のカードは「このまちと比較」で比較画面へ
    return (
      <div className="border-top pt-3 mt-3 border-machi-subtle d-grid">
        <button
          type="button"
          className="btn btn-machi btn-sm"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            window.location.href = `/shichosons/${compareFirstId}/compares/${shichoson.id}`;
          }}
        >
          <i className="bi bi-arrow-left-right me-1"></i>
          このまちと比較
        </button>
      </div>
    );
  }

  // 1つめの選択チェックボックス（選択済みカードはチェック解除で選び直せる）
  return (
    <div
      className="border-top pt-3 mt-3 border-machi-subtle form-check mb-0"
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        onToggleFirst(shichoson.id);
      }}
    >
      <input
        id={`compare-first-${shichoson.id}`}
        type="checkbox"
        className="form-check-input"
        checked={compareFirstId === shichoson.id}
        readOnly
      />
      <label htmlFor={`compare-first-${shichoson.id}`} className="form-check-label small fw-bold text-machi-teal">
        このまちをくらべる
      </label>
    </div>
  );
};

// 自治体カード。クリックで3分カルテへ遷移する
const ShichosonCard = ({ shichoson, compareMode, compareFirstId, onToggleFirst }) => (
  <a href={`/shichosons/${shichoson.id}`} className="card card-machi h-100 bg-white text-decoration-none text-reset">
    <div className="card-body p-4">
      <div className="d-flex justify-content-between align-items-start mb-2">
        <h3 className="font-rounded fw-bold fs-4 mb-0">{shichoson.name}</h3>
        {shichoson.top_type_name && (
          <span className="badge badge-machi-soft flex-shrink-0">{shichoson.top_type_name}</span>
        )}
      </div>
      <div className="d-flex align-items-start gap-3 small mb-3">
        {Object.entries(shichoson.metrics).map(([key, metric]) => (
          <div key={key} className="text-center flex-fill">
            <div className="mb-1">
              <MetricIcon label={metric.label} iconClass={metric.icon} />
            </div>
            <div
              className={`fw-bold ${metric.text === null ? 'text-secondary' : metric.judged ? (metric.danger ? 'text-danger' : 'text-primary') : ''}`}
            >
              {metric.text === null ? '—' : metric.text}
            </div>
          </div>
        ))}
      </div>
      {shichoson.summary_50 && <p className="small text-secondary mb-3">{shichoson.summary_50}</p>}
      {compareMode && (
        <CompareControl shichoson={shichoson} compareFirstId={compareFirstId} onToggleFirst={onToggleFirst} />
      )}
    </div>
  </a>
);

// 区分（kind）ごとのサブ見出しを KIND_ORDER の順で作る
const groupByKind = (shichosons) =>
  KIND_ORDER.flatMap((kind) => {
    const items = shichosons.filter((shichoson) => shichoson.kind === kind);
    return items.length > 0 ? [{ kind, kindName: items[0].kind_name, shichosons: items }] : [];
  });

// 地域ブロックごとのアコーディオン。開いたときだけ中の自治体カードを描画する
const RegionAccordionItem = ({ group, isOpen, onToggle, compareMode, compareFirstId, onToggleFirst }) => (
  <div className="accordion-item">
    <h2 className="accordion-header">
      <button
        type="button"
        className={`accordion-button ${isOpen ? '' : 'collapsed'}`}
        aria-expanded={isOpen}
        onClick={onToggle}
      >
        <span className="font-rounded fw-bold me-2">{group.regionName}</span>
        <span className="badge bg-secondary rounded-pill">{group.shichosons.length}</span>
      </button>
    </h2>
    <div className={`accordion-collapse collapse ${isOpen ? 'show' : ''}`}>
      <div className="accordion-body">
        {groupByKind(group.shichosons).map((kindGroup) => {
          const borderColor = KIND_BORDER_COLORS[kindGroup.kind];
          return (
            <div
              key={kindGroup.kind}
              className="mb-4"
              style={borderColor ? { borderLeft: `4px solid ${borderColor}`, paddingLeft: '0.75rem' } : undefined}
            >
              <div className="d-flex align-items-center gap-2 mb-3">
                <h3
                  className="font-rounded fw-bold fs-5 mb-0"
                  style={borderColor ? { color: borderColor } : undefined}
                >
                  {kindGroup.kindName}
                </h3>
                <span className="badge badge-machi-soft rounded-pill">{kindGroup.shichosons.length}</span>
              </div>
              <div className="row g-4">
                {kindGroup.shichosons.map((shichoson) => (
                  <div key={shichoson.id} className="col-md-4 col-lg-3">
                    <ShichosonCard
                      shichoson={shichoson}
                      compareMode={compareMode}
                      compareFirstId={compareFirstId}
                      onToggleFirst={onToggleFirst}
                    />
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </div>
);

// サーバーの並び順（都道府県コード順・名前順）を保ったまま地域ブロックごとにまとめる。
// 都道府県コード順では同じ地域の都道府県が隣り合わないことがあるため、連続でなくても
// 同じ region は同じグループにまとめる（例: 北関東甲信の ibaraki..gunma と yamanashi..nagano）
const groupByRegion = (shichosons) => {
  const groups = [];
  const groupByRegion = new Map();
  shichosons.forEach((shichoson) => {
    const group = groupByRegion.get(shichoson.region);
    if (group) {
      group.shichosons.push(shichoson);
    } else {
      const newGroup = {
        region: shichoson.region,
        regionName: shichoson.region_name,
        shichosons: [shichoson],
      };
      groupByRegion.set(shichoson.region, newGroup);
      groups.push(newGroup);
    }
  });
  return groups;
};

// URL の ?compare= から比較モードの初期状態を読み取る。
// 「compare=1」はトグルONのみ、「compare=<public_id>」は1つめのまちも選択済みにする（3分カルテの「くらべる」導線）
const initialCompareParam = () => new URLSearchParams(window.location.search).get('compare');

// URL の ?name= から検索ワードを読み取る（LPトップの検索フォームからの遷移を受ける）
const initialNameParam = () => new URLSearchParams(window.location.search).get('name') || '';

// 自治体一覧。名前・データ種別での絞り込みはリアクティブに /api/shichosons を叩く
const ShichosonIndex = ({ apiUrl }) => {
  const [name, setName] = useState(initialNameParam);
  const [checkedFeatures, setCheckedFeatures] = useState({});
  const compareParam = initialCompareParam();
  const [compareMode, setCompareMode] = useState(compareParam !== null);
  const [compareFirstId, setCompareFirstId] = useState(compareParam && compareParam !== '1' ? compareParam : null);
  const [shichosons, setShichosons] = useState([]);
  const [featureLabels, setFeatureLabels] = useState({});
  const [openRegions, setOpenRegions] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  const activeFeatures = Object.keys(checkedFeatures).filter((feature) => checkedFeatures[feature]);
  const isFiltering = name.trim() !== '' || activeFeatures.length > 0;

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

    const timerId = setTimeout(async () => {
      setIsLoading(true);
      setError('');
      try {
        const query = new URLSearchParams({ name: name });
        activeFeatures.forEach((feature) => query.set(`feature_${feature}`, 'true'));
        const response = await fetch(`${apiUrl}?${query}`);
        if (isCancelled) return;

        if (response.ok) {
          const data = await response.json();
          setShichosons(data.shichosons);
          setFeatureLabels(data.feature_labels);
          // 絞り込み中は該当地域ブロックをすべて開き、絞り込み解除で閉じる
          const allOpen = {};
          if (isFiltering) data.shichosons.forEach((s) => { allOpen[s.region] = true; });
          setOpenRegions(allOpen);
        } 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, JSON.stringify(activeFeatures), apiUrl]);

  const toggleFeature = (feature) => {
    setCheckedFeatures((prev) => ({ ...prev, [feature]: !prev[feature] }));
  };

  const toggleRegion = (region) => {
    setOpenRegions((prev) => ({ ...prev, [region]: !prev[region] }));
  };

  // 比較モードのON/OFF。OFFにしたら選択もリセットする
  const toggleCompareMode = () => {
    setCompareMode((prev) => !prev);
    setCompareFirstId(null);
  };

  // 1つめのまちの選択／解除（同じカードをもう一度押すと解除）
  const onToggleFirst = (id) => {
    setCompareFirstId((prev) => (prev === id ? null : id));
  };

  const groups = groupByRegion(shichosons);
  const compareFirstShichoson = shichosons.find((shichoson) => shichoson.id === compareFirstId);

  return (
    <div>
      <div className="row g-2 align-items-center my-4">
        <div className="col-lg-6">
          <div className="input-group">
            <span className="input-group-text">
              <i className="bi bi-search text-machi-teal"></i>
            </span>
            <input
              type="text"
              className="form-control"
              placeholder="自治体名で検索（例：サンプル市）"
              aria-label="自治体名で検索"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>
        </div>
        <div className="col-12 mt-2">
          <fieldset className="border border-machi-subtle rounded-3 p-3 bg-white">
            <legend className="h6 font-rounded fw-bold text-machi-teal mb-2 w-auto px-2">データ種別で絞り込む</legend>
            <div className="d-flex flex-wrap gap-3 align-items-center">
              {Object.keys(featureLabels).map((feature) => (
                <div key={feature} className="form-check form-check-inline mb-0">
                  <input
                    id={`feature-${feature}`}
                    type="checkbox"
                    className="form-check-input"
                    checked={!!checkedFeatures[feature]}
                    onChange={() => toggleFeature(feature)}
                  />
                  <label htmlFor={`feature-${feature}`} className="form-check-label small">
                    {featureLabels[feature]}
                  </label>
                </div>
              ))}
            </div>
          </fieldset>
        </div>
      </div>

      <div className="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <p className="text-secondary small mb-0">{isLoading ? '検索中...' : `${shichosons.length}件の自治体`}</p>
        <div className="form-check form-switch mb-0">
          <input
            id="compare-mode"
            type="checkbox"
            role="switch"
            className="form-check-input"
            checked={compareMode}
            onChange={toggleCompareMode}
          />
          <label htmlFor="compare-mode" className="form-check-label small fw-bold link-machi">
            <i className="bi bi-arrow-left-right me-1"></i>
            2つのまちをくらべる
          </label>
        </div>
      </div>

      {compareMode && (
        <div className="alert alert-light border small py-2">
          {compareFirstId
            ? `「${compareFirstShichoson ? compareFirstShichoson.name : '選択中のまち'}」と比較するまちの「このまちと比較」を押してください。`
            : 'まず1つめのまちをカードのチェックボックスで選んでください。'}
        </div>
      )}

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

      {!error && !isLoading && shichosons.length === 0 ? (
        <div className="alert alert-light border">条件に合う自治体が見つかりませんでした。検索条件を変えてお試しください。</div>
      ) : (
        <div className="accordion">
          {groups.map((group) => (
            <RegionAccordionItem
              key={group.region}
              group={group}
              isOpen={!!openRegions[group.region]}
              onToggle={() => toggleRegion(group.region)}
              compareMode={compareMode}
              compareFirstId={compareFirstId}
              onToggleFirst={onToggleFirst}
            />
          ))}
        </div>
      )}
    </div>
  );
};

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

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

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