import {
  useMutation,
  useQueryClient,
  useSuspenseQuery,
} from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { useState } from 'react'
import { orpc } from '@/client/query-client'

export const Route = createFileRoute('/license')({
  component: License,
})

function License() {
  const [licenseInput, setLicenseInput] = useState('')
  const [copySuccess, setCopySuccess] = useState(false)
  const [showDeactivateConfirm, setShowDeactivateConfirm] = useState(false)
  const queryClient = useQueryClient()

  // 获取激活状态
  const { data } = useSuspenseQuery(orpc.license.getActivation.queryOptions())

  // 激活 mutation
  const activateMutation = useMutation({
    ...orpc.license.activate.mutationOptions(),
    onSuccess: () => {
      // 刷新数据
      queryClient.invalidateQueries({
        queryKey: orpc.license.getActivation.key(),
      })
      // 清空输入
      setLicenseInput('')
    },
  })

  // 反激活 mutation
  const deactivateMutation = useMutation({
    ...orpc.license.deactivate.mutationOptions(),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: orpc.license.getActivation.key(),
      })
      setShowDeactivateConfirm(false)
    },
  })

  const handleActivate = () => {
    if (!licenseInput.trim()) return
    activateMutation.mutate({ license: licenseInput.trim() })
  }

  const handleDeactivate = () => {
    deactivateMutation.mutate()
  }

  const handleCopyFingerprint = async () => {
    try {
      await navigator.clipboard.writeText(data.fingerprint)
      setCopySuccess(true)
      setTimeout(() => setCopySuccess(false), 2000)
    } catch (err) {
      console.error('Failed to copy fingerprint:', err)
    }
  }

  const isActivated = !!data.license

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
      <div className="w-full max-w-2xl space-y-6">
        {/* 页面标题 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
            License 激活管理
          </h1>
          <p className="text-gray-500 mt-2">管理您的设备授权与激活状态</p>
        </div>

        {/* 设备信息卡片 */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-blue-500"
              >
                <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
                <rect x="9" y="9" width="6" height="6"></rect>
                <line x1="9" y1="1" x2="9" y2="4"></line>
                <line x1="15" y1="1" x2="15" y2="4"></line>
                <line x1="9" y1="20" x2="9" y2="23"></line>
                <line x1="15" y1="20" x2="15" y2="23"></line>
                <line x1="20" y1="9" x2="23" y2="9"></line>
                <line x1="20" y1="14" x2="23" y2="14"></line>
                <line x1="1" y1="9" x2="4" y2="9"></line>
                <line x1="1" y1="14" x2="4" y2="14"></line>
              </svg>
              设备信息
            </h2>
            <div className="bg-gray-50 rounded-lg p-4 border border-gray-100">
              <p className="text-sm text-gray-500 mb-1">
                设备指纹 (Device Fingerprint)
              </p>
              <div className="flex items-center gap-3">
                <code className="flex-1 font-mono text-sm text-gray-700 break-all select-all">
                  {data.fingerprint}
                </code>
                <button
                  type="button"
                  onClick={handleCopyFingerprint}
                  className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors flex items-center gap-1.5 ${
                    copySuccess
                      ? 'bg-green-100 text-green-700 hover:bg-green-200'
                      : 'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900'
                  }`}
                >
                  {copySuccess ? (
                    <>
                      <svg
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                      已复制
                    </>
                  ) : (
                    <>
                      <svg
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <rect
                          x="9"
                          y="9"
                          width="13"
                          height="13"
                          rx="2"
                          ry="2"
                        ></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                      </svg>
                      复制
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* License 激活卡片 */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-purple-500"
              >
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </svg>
              License 激活
            </h2>

            <div className="space-y-4">
              <div>
                <label
                  htmlFor="license-key"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  License Key
                </label>
                <input
                  id="license-key"
                  type="text"
                  value={licenseInput}
                  onChange={(e) => setLicenseInput(e.target.value)}
                  disabled={isActivated || activateMutation.isPending}
                  placeholder={
                    isActivated ? '已激活，无需输入' : '请输入您的 License Key'
                  }
                  className="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500 placeholder:text-gray-400"
                />
              </div>

              {activateMutation.isError && (
                <div className="p-3 bg-red-50 border border-red-100 rounded-lg text-red-600 text-sm flex items-start gap-2">
                  <svg
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 shrink-0"
                  >
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="12"></line>
                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
                  </svg>
                  <span>激活失败: 请检查 License 是否正确或稍后重试</span>
                </div>
              )}

              <button
                type="button"
                onClick={handleActivate}
                disabled={
                  isActivated ||
                  activateMutation.isPending ||
                  !licenseInput.trim()
                }
                className={`w-full px-6 py-2.5 rounded-lg font-medium text-white shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 ${
                  isActivated
                    ? 'bg-gray-300 cursor-not-allowed'
                    : activateMutation.isPending
                      ? 'bg-purple-500 opacity-80 cursor-wait'
                      : 'bg-purple-600 hover:bg-purple-700 hover:shadow-md active:scale-[0.99] focus:ring-purple-500'
                }`}
              >
                {activateMutation.isPending ? (
                  <span className="flex items-center justify-center gap-2">
                    <svg
                      aria-hidden="true"
                      className="animate-spin h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    正在激活...
                  </span>
                ) : isActivated ? (
                  '已完成激活'
                ) : (
                  '立即激活'
                )}
              </button>
            </div>
          </div>
        </div>

        {/* 激活状态卡片 */}
        <div
          className={`rounded-xl shadow-sm border overflow-hidden transition-colors ${
            isActivated
              ? 'bg-green-50/50 border-green-100'
              : 'bg-white border-gray-100'
          }`}
        >
          <div className="p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className={isActivated ? 'text-green-500' : 'text-gray-400'}
              >
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
              激活状态
            </h2>

            {isActivated ? (
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-green-700 font-medium text-lg">
                  <svg
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-green-500"
                  >
                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                    <path d="M9 12l2 2 4-4"></path>
                  </svg>
                  <span>License 已激活</span>
                </div>
                <div className="pl-8 space-y-1">
                  <p className="text-gray-600 text-sm">
                    <span className="font-medium text-gray-700">
                      当前 License:{' '}
                    </span>
                    <span className="font-mono">{data.license}</span>
                  </p>
                  {data.licenseActivatedAt && (
                    <p className="text-gray-500 text-sm">
                      <span className="font-medium text-gray-700">
                        激活时间:{' '}
                      </span>
                      {new Date(data.licenseActivatedAt).toLocaleString(
                        'zh-CN',
                        {
                          year: 'numeric',
                          month: '2-digit',
                          day: '2-digit',
                          hour: '2-digit',
                          minute: '2-digit',
                          second: '2-digit',
                        },
                      )}
                    </p>
                  )}
                </div>

                {!showDeactivateConfirm ? (
                  <button
                    type="button"
                    onClick={() => setShowDeactivateConfirm(true)}
                    className="mt-4 px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 transition-colors shadow-sm"
                  >
                    反激活
                  </button>
                ) : (
                  <div className="mt-4 p-4 bg-red-50 rounded-lg border border-red-200">
                    <p className="text-red-700 text-sm mb-3 flex items-center gap-2">
                      <svg
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
                        <path d="M12 9v4" />
                        <path d="M12 17h.01" />
                      </svg>
                      确定要反激活吗？此操作会清除当前 License。
                    </p>
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={handleDeactivate}
                        disabled={deactivateMutation.isPending}
                        className="px-4 py-2 bg-red-600 text-white rounded-md text-sm font-medium hover:bg-red-700 disabled:bg-gray-300 transition-colors"
                      >
                        {deactivateMutation.isPending
                          ? '反激活中...'
                          : '确认反激活'}
                      </button>
                      <button
                        type="button"
                        onClick={() => setShowDeactivateConfirm(false)}
                        className="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors"
                      >
                        取消
                      </button>
                    </div>
                    {deactivateMutation.isError && (
                      <p className="text-red-500 mt-2 text-xs">
                        反激活失败，请重试
                      </p>
                    )}
                  </div>
                )}
              </div>
            ) : (
              <div className="flex items-start gap-3">
                <svg
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="text-orange-500 shrink-0 mt-0.5"
                >
                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                  <line x1="12" y1="9" x2="12" y2="13"></line>
                  <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <div>
                  <p className="text-orange-700 font-medium text-lg mb-1">
                    未激活
                  </p>
                  <p className="text-gray-500 text-sm">
                    您的设备尚未激活。请在上方输入 License Key
                    进行激活以解锁全部功能。
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}