import { CreateScriptResponse, isShellRuntime, getSourceCommand } from '../types'
import CommandCard from './CommandCard'

interface Props {
  result: CreateScriptResponse
  onReset: () => void
}

export default function ResultCard({ result, onReset }: Props) {
  const detailUrl = `${window.location.origin}/s/${result.id}`
  const showSource = isShellRuntime(result.runtime)
  const sourceCommand = showSource ? getSourceCommand(result.url, result.runtime) : null

  return (
    <div className="space-y-6">
      <div className="text-center">
        <div className="text-4xl mb-2">✅</div>
        <h2 className="text-xl font-bold">运行链接已生成</h2>
      </div>

      <CommandCard command={result.command} />

      {showSource && sourceCommand && (
        <div>
          <p className="text-xs text-gray-500 mb-2">
            如果脚本设置了环境变量（如代理），请使用以下命令在当前 shell 中执行：
          </p>
          <CommandCard
            command={sourceCommand}
            label="继承环境变量"
            variant="secondary"
          />
        </div>
      )}

      <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">脚本 ID</span>
          <span className="font-mono text-blue-400">{result.id}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">运行环境</span>
          <span>{result.runtime}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">过期时间</span>
          <span>{new Date(result.expires_at).toLocaleString('zh-CN')}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">详情页</span>
          <a
            href={detailUrl}
            target="_blank"
            rel="noreferrer"
            className="text-blue-400 hover:underline font-mono text-xs"
          >
            {detailUrl}
          </a>
        </div>
        <div className="pt-2 border-t border-gray-700">
          <div className="text-xs text-gray-500 mb-1">管理令牌（请妥善保存，仅此一次）</div>
          <div className="font-mono text-xs bg-gray-900 px-3 py-2 rounded break-all select-all">
            {result.admin_token}
          </div>
        </div>
      </div>

      <div className="flex gap-3 justify-center">
        <button
          onClick={onReset}
          className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm transition-colors"
        >
          创建另一个
        </button>
        <a
          href={detailUrl}
          target="_blank"
          rel="noreferrer"
          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors"
        >
          查看详情
        </a>
      </div>
    </div>
  )
}