import { Button } from "@/components/ui/button"
import Wrap from "@/components/wrap"

export default function IpLinePage() {
  return (
    <Wrap className="flex flex-col gap-4 mt-30 max-w-6xl mx-auto px-4 pb-20">
      <div className="grid grid-cols-3">
        <div></div>
        <h3 className="text-3xl font-bold text-gray-800 text-center">
          IP线路表
        </h3>
        <div className="flex gap-4 text-sm justify-end items-end text-blue-500">
          <a
            href="/softDownload"
            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
          >
            下载客户端
          </a>
          <a
            href="/help"
            className="no-underline hover:text-blue-700 active:no-underline focus:no-underline"
          >
            教程&amp;帮助
          </a>
        </div>
      </div>

      <ul className="flex justify-between gap-4 text-xs text-gray-600 px-2">
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          线路表和账户必须为同一产品才能使用
        </li>
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          请优先选择客户端连接
        </li>
        <li className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          无对应客户端时，可通过线路表直连支持所有设备
        </li>
      </ul>

      <div className="flex flex-wrap  items-center gap-3">
        <Button className="px-6 py-1.5 rounded-full text-white bg-linear-to-r from-cyan-400 to-blue-500 shadow-md shadow-blue-200 font-medium">
          极狐IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          极光IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          蘑菇IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          麒麟IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          猎豹IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          水滴独享IP
        </Button>
        <Button className="px-6 py-1.5 rounded-full text-gray-600 border border-gray-200 hover:border-blue-400 transition-colors bg-white">
          火狐静态IP
        </Button>
      </div>

      <div className="flex items-center justify-center gap-4 w-full">
        <div className="relative w-1/2">
          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
            <svg
              className="w-4 h-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </div>
          <input
            type="text"
            placeholder="混拨"
            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm"
          />
        </div>
        <button className="px-8 py-2 bg-linear-to-r from-cyan-400 to-blue-500 text-white rounded-full text-sm font-medium shadow-md shadow-blue-200">
          搜索当前线路表
        </button>
        <button className="flex items-center gap-1.5 px-4 py-2 border border-blue-400 text-blue-500 rounded text-sm bg-white hover:bg-blue-50 transition-colors">
          <svg
            className="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            />
          </svg>
          导出
        </button>
      </div>

      <div className="bg-orange-50 border border-orange-100 rounded-lg p-2 flex justify-center items-center gap-8 text-sm font-medium">
        <div className="flex items-center gap-2 text-orange-500">
          <span>L2TP密钥：</span>
          <span className="text-orange-600">1234</span>
        </div>
        <div className="flex items-center gap-2 text-orange-500">
          <span>STTP端口：</span>
          <span className="text-orange-600">4430</span>
        </div>
      </div>

      <div className="flex items-center gap-6 text-xs text-gray-600 px-1">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          <span>
            实时总线路：<span className="font-bold text-gray-800">486条</span>
          </span>
        </div>
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          <span>
            实时可用线路：<span className="font-bold text-gray-800">486条</span>
          </span>
        </div>
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
          <span className="text-gray-400">
            极狐IP- (每5分钟更新一次,禁止频繁访问！) :{" "}
          </span>
        </div>
      </div>

      <div className="border border-gray-200 rounded overflow-hidden">
        <table className="w-full text-center text-sm">
          <thead className="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
            <tr>
              <th className="py-3 px-4 border-r border-gray-200 w-24">产品</th>
              <th className="py-3 px-4 border-r border-gray-200 w-32">城市</th>
              <th className="py-3 px-4 border-r border-gray-200 w-48">
                运营商
              </th>
              <th className="py-3 px-4 border-r border-gray-200">服务器域名</th>
              <th className="py-3 px-4 border-r border-gray-200 w-20">IP量</th>
              <th className="py-3 px-4 border-r border-gray-200 w-24">
                实时带宽
              </th>
              <th className="py-3 px-4 border-r border-gray-200 w-24">
                维护状态
              </th>
              <th className="py-3 px-4 w-24">负载状态</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-100">
            <tr>
              <td
                className="py-3 px-4 border-r border-gray-200 text-gray-500"
                rowSpan={10}
              >
                极狐
              </td>

              <td
                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
                rowSpan={7}
              >
                全国
              </td>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hb1.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hb2.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hb3.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hb4.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hb5.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hbdx2.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>hbdx1.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>

            <tr>
              <td
                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
                rowSpan={2}
              >
                北京
              </td>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>bj1.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
            <tr>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>bj2.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>

            <tr>
              <td
                className="py-3 px-4 border-r border-gray-200 text-green-600 font-medium"
                rowSpan={1}
              >
                上海
              </td>
              <td className="py-3 px-4 border-r border-gray-200 text-gray-500">
                电信/联通/移动
              </td>
              <td className="py-3 px-4 border-r border-gray-200">
                <span>sh1.jhip.net</span>
                <span className="ml-2 text-green-500 cursor-pointer hover:text-green-700">
                  复制
                </span>
              </td>
              <td className="py-3 px-4 border-r border-gray-200">100M</td>
              <td className="py-3 px-4 border-r border-gray-200">正常</td>
              <td className="py-3 px-4 border-r border-gray-200"></td>
              <td className="py-3 px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </Wrap>
  )
}
