components/speed-comparison-result/simulation-table.tsx

'use client';

import { useState } from 'react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
import { SimulationModal } from './simulation-modal';

const tableData = [
  ['0秒の場合のCV試算', '16.00%', '10,000', '8,400', '1.00%', '84'],
  ['2秒の場合のCV試算', '21.12%', '10,000', '7,887', '1.00%', '78'],
  ['4秒の場合のCV試算', '30.40%', '10,000', '6,959', '1.00%', '78'],
  ['6秒の場合のCV試算', '30.40%', '10,000', '6,959', '1.00%', '69'],
  ['8秒の場合のCV試算', '32.96%', '10,000', '6,704', '1.00%', '67'],
  ['10秒の場合のCV試算', '40.00%', '10,000', '6,000', '1.00%', '60'],
];

export function SimulationTable() {
  const [modalOpen, setModalOpen] = useState(false);
  const [selectedRowIndex, setSelectedRowIndex] = useState<number | null>(null);

  const handleRowClick = (index: number) => {
    setSelectedRowIndex(index);
  };

  return (
    <div>
      <div className="mt-10 flex items-center gap-2 text-2xl font-bold">
        シミュレーション
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="bg-secondary-text mt-[2px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full text-xs text-white">
                ?
              </div>
            </TooltipTrigger>
            <TooltipContent className="w-[273px] p-4 text-xs font-medium">
              <span className="text-[12px]">
                Google：URL〜〜〜 <br /> 「離脱率」は40%と仮定 <br /> 見込みのユーザー数＝流入数×離脱率40% <br />
                あくまで表示速度と離脱率の関係で算出しており、実際はUIやデザインによる影響も含まれる。
                <br />
                速度改善に伴い「離脱率」も改善されるため、「見込みのユーザー数」が増加する。その際CVRは据え置きだとすると、CVの機会損失を防げると言える。
              </span>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      <div className="flex items-center justify-between">
        <h2 className="mt-5 text-[13px]">
          タグ導入して表示速度改善を行った場合の​離脱率減少（≒CVR向上）シミュレーション
        </h2>
        <button
          type="button"
          className="h-[40px] w-[192px] cursor-pointer rounded-full border bg-[#212121] px-5 py-1 text-sm text-[#FFFFFF] shadow-none"
          onClick={() => setModalOpen(true)}
        >
          シミュレーション値を変更
        </button>
      </div>
      <div className="mt-5 overflow-hidden">
        <table className="w-full text-center">
          <thead className="bg-[#fcfcfc] text-[13px] text-[#777777]">
            <tr>
              <th className="border-r border-b border-[#CCCCCCCC] p-2 text-left w-1/6">タイトル</th>
              <th className="border-r border-b border-[#CCCCCCCC] p-2 w-1/6">離脱率</th>
              <th className="border-r border-b border-[#CCCCCCCC] p-2 w-1/6">流入数</th>
              <th className="border-r border-b border-[#CCCCCCCC] p-2 w-1/6">見込みのユーザー数</th>
              <th className="border-r border-b border-[#CCCCCCCC] p-2 w-1/6">CVR</th>
              <th className="border-b border-[#CCCCCCCC] p-2 w-1/6">CV見込み</th>
            </tr>
          </thead>
          <tbody className='bg-[#ECF6FC]'>
            {tableData.map((row, i) => (
              <tr
                key={i}
                onClick={() => handleRowClick(i)}
                className={`h-[46px] w-[207px] border-b text-[13px] cursor-pointer ${
                  selectedRowIndex === i ? 'bg-[#D6EFFC] text-[#0186C9]' : ''
                }`}
              >
                {row.map((cell, j) => (
                  <td
                    key={j}
                    className={`px-4 py-2 align-middle ${j === 0 ? 'text-left' : 'text-center'} ${
                      j !== row.length - 1 ? 'border-r border-[#CCCCCCCC]' : ''
                    }`}
                  >
                    {j === 0 ? (
                      <div className="flex items-center gap-1">
                        {selectedRowIndex === i && (
                          <svg
                            className="h-4 w-4 flex-shrink-0"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 2C8.13401 2 5 5.13401 5 9C5 13.25 12 22 12 22C12 22 19 13.25 19 9C19 5.13401 15.866 2 12 2Z"
                              fill="#0186C9"
                            />
                            <circle cx="12" cy="9" r="2.5" fill="white" />
                          </svg>
                        )}
                        {cell}
                      </div>
                    ) : (
                      cell
                    )}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <SimulationModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </div>
  );
}