/* components/FilterModal.jsx */
(() => {

  const METRIC_LABELS = {
    cpo: "CPO",
    ctr: "CTR",
    cvr: "CVR",
    cvCount: "CV数",
    cost: "広告費",
    click: "クリック",
    imp: "IMP",
  };

  const METRIC_UNITS = {
    cpo: "円",
    ctr: "%",
    cvr: "%",
    cvCount: "件",
    cost: "円",
    click: "",
    imp: "",
  };

  const MetricRow = ({ k, v, onChange }) => {
    const label = METRIC_LABELS[k] || k;
    const unit = METRIC_UNITS[k] || "";
    return (
      <div className="grid grid-cols-12 gap-2 items-center py-2 border-b border-white/5">
        <div className="col-span-4 text-sm">
          <div className="font-medium">{label}</div>
          <div className="text-xs opacity-60">範囲で絞り込み</div>
        </div>

        <div className="col-span-8 flex items-center gap-2">
          <div className="flex-1">
            <div className="text-[11px] opacity-60 mb-1">最小</div>
            <input
              value={v.min}
              onChange={(e) => onChange(k, { ...v, min: e.target.value })}
              inputMode="decimal"
              className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 focus:outline-none focus:ring-2 focus:ring-emerald-600 text-sm"
              placeholder="例：100"
            />
          </div>
          <div className="flex-1">
            <div className="text-[11px] opacity-60 mb-1">最大</div>
            <input
              value={v.max}
              onChange={(e) => onChange(k, { ...v, max: e.target.value })}
              inputMode="decimal"
              className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 focus:outline-none focus:ring-2 focus:ring-emerald-600 text-sm"
              placeholder="例：500"
            />
          </div>
          <div className="w-10 text-xs opacity-70 text-right">{unit}</div>
        </div>
      </div>
    );
  };

  function FilterModal(props) {
    const { open, onClose, filters, setFilters, matchedCount, totalCount } = props;
    if (!open) return null;

    const onRowChange = (k, next) => {
      setFilters((prev) => ({ ...prev, [k]: next }));
    };

    const clearAll = () => {
      const cleared = {};
      Object.keys(filters).forEach((k) => (cleared[k] = { min: "", max: "" }));
      setFilters(cleared);
    };

    // UX: クリエイティブ担当がよく使う「まずCVありに寄せる」ショートカット
    const setHasCV = () => {
      setFilters((prev) => ({ ...prev, cvCount: { ...(prev.cvCount || { min: "", max: "" }), min: "1" } }));
    };

    return (
      <div className="fixed inset-0 z-[95] flex items-end md:items-center justify-center" role="dialog" aria-modal="true">
        <div className="absolute inset-0 bg-black/70" onClick={onClose} />
        <div className="relative w-full md:w-[720px] max-h-[85vh] overflow-hidden rounded-2xl border border-white/10 bg-neutral-900 shadow-2xl">
          <div className="p-4 border-b border-white/10 flex items-center justify-between">
            <div>
              <div className="text-base font-semibold">フィルター</div>
              <div className="text-xs opacity-60 mt-0.5">
                {totalCount}件中 <span className="font-medium">{matchedCount}件</span> を表示
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button
                type="button"
                className="px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-sm"
                onClick={setHasCV}
                title="CVが出ているものだけに寄せる"
              >
                CVあり
              </button>
              <button
                type="button"
                className="px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-sm"
                onClick={clearAll}
              >
                クリア
              </button>
              <button
                type="button"
                className="px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm text-white"
                onClick={onClose}
              >
                閉じる
              </button>
            </div>
          </div>

          <div className="p-4 overflow-auto max-h-[calc(85vh-64px)]">
            <div className="text-xs opacity-60 mb-3">
              メモ：空欄は無視されます（その指標では絞り込みません）。
            </div>

            {/* よく使う項目を上に */}
            {["cpo", "ctr", "cvr", "cvCount"].map((k) => (
              <MetricRow key={k} k={k} v={filters[k]} onChange={onRowChange} />
            ))}

            <div className="mt-4 text-sm font-medium">その他（任意）</div>
            <div className="mt-1 rounded-xl border border-white/10 overflow-hidden">
              {["cost", "click", "imp"].map((k) => (
                <div key={k} className="px-3">
                  <MetricRow k={k} v={filters[k]} onChange={onRowChange} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.Cmp = window.Cmp || {};
  window.Cmp.FilterModal = FilterModal;
})();