import { Link } from 'react-router-dom';
import TitleBar from '../../components/layout/TitleBar';

export default function LoginPage() {
  return (
    <div
      className="h-screen flex flex-col"
      style={{
        background:
          'linear-gradient(180deg, rgba(247, 249, 252, 1) 0%, rgba(235, 241, 247, 1) 100%)',
      }}
    >
      <TitleBar variant="light" />

      <main className="box-border pl-2 pr-2 pb-2 flex-auto flex pt-2">
        <div className="w-[520px] box-border bg-white dark:bg-[#1b1b1d] rounded-2xl p-8 flex flex-col shadow-[0_18px_50px_rgba(15,23,42,0.12)] border border-black/5 dark:border-[#2a2a2d]">
          <div className="flex items-center">
            <div className="w-12 h-12 rounded-[14px] bg-[#2B7FFF] text-white flex items-center justify-center font-bold">
              Z
            </div>
          </div>

          <div className="flex flex-col items-center justify-center mb-6 box-border pt-10">
            <div className="w-20 h-20 mb-3 rounded-full bg-[#f3f4f6] dark:bg-[#222225] flex items-center justify-center border border-black/5 dark:border-[#2a2a2d]">
              <span className="text-[28px] font-semibold text-[#525866] dark:text-gray-300">◌</span>
            </div>
            <div className="text-[24px] font-medium text-gray-800 dark:text-gray-100 leading-[32px] mb-1">
              欢迎回到 zn-ai
            </div>
            <div className="text-[16px] text-gray-500 dark:text-gray-400 leading-[24px]">
              React 登录壳
            </div>
          </div>

          <div className="w-[392px] ml-auto mr-auto flex flex-col gap-4">
            <div>
              <div className="text-[14px] text-gray-600 dark:text-gray-300 mb-2">用户名</div>
              <div className="h-10 rounded-[10px] border border-black/10 dark:border-[#2a2a2d] bg-gray-50 dark:bg-[#222225] px-4 flex items-center text-[13px] text-gray-400">
                username@example.com
              </div>
            </div>

            <div>
              <div className="text-[14px] text-gray-600 dark:text-gray-300 mb-2">密码</div>
              <div className="h-10 rounded-[10px] border border-black/10 dark:border-[#2a2a2d] bg-gray-50 dark:bg-[#222225] px-4 flex items-center text-[13px] text-gray-400">
                ••••••••
              </div>
            </div>

            <div>
              <div className="text-[14px] text-gray-600 dark:text-gray-300 mb-2">验证码</div>
              <div className="h-10 rounded-[10px] border border-black/10 dark:border-[#2a2a2d] bg-gray-50 dark:bg-[#222225] px-4 flex items-center justify-between text-[13px] text-gray-400">
                <span>请输入验证码</span>
                <span className="w-20 h-8 rounded-md bg-white dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d] flex items-center justify-center text-[#99A0AE]">
                  1234
                </span>
              </div>
            </div>

            <button
              type="button"
              className="w-full py-2 bg-blue-600 cursor-pointer text-white rounded-lg hover:bg-blue-700 mt-4"
            >
              登录
            </button>

            <div className="text-[13px] text-gray-500 dark:text-gray-400 text-center">
              迁移阶段先提供静态登录壳，后续再接入真实认证。
            </div>

            <Link
              to="/home"
              className="text-[13px] text-center text-[#2B7FFF] hover:underline mt-2"
            >
              进入应用
            </Link>
          </div>
        </div>

        <div className="flex-1 ml-2 rounded-2xl bg-[radial-gradient(circle_at_top,rgba(43,127,255,0.25),transparent_35%),linear-gradient(180deg,#f8fafc_0%,#e2e8f0_100%)] dark:bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.2),transparent_35%),linear-gradient(180deg,#111827_0%,#0f172a_100%)] border border-black/5 dark:border-[#2a2a2d] overflow-hidden relative">
          <div className="absolute inset-0 opacity-60" />
          <div className="relative h-full flex items-end p-10">
            <div className="max-w-lg">
              <div className="text-[42px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal tracking-tight leading-tight">
                平移原有视觉壳，逐步接管 React 入口
              </div>
              <div className="mt-4 text-[15px] text-[#171717]/70 dark:text-gray-400 leading-7">
                当前先保持当前 Vue 登录页的结构感和信息密度，后续认证、主题和窗口行为会按迁移计划逐步接入。
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}