import { CreateScriptResponse } from '../types'
import { Link } from 'react-router-dom'

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

export default function ResultCard({ result, onReset }: Props) {
  return (
    <div className="space-y-6">
      <div className="text-center">
        <div className="text-4xl mb-2">✅</div>
        <h2 className="text-xl font-bold">
          {result.status === 'published' ? '脚本已发布' : '草稿已创建'}
        </h2>
      </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">标题</span>
          <span>{result.title}</span>
        </div>
        <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>
          <a href={result.url} target="_blank" rel="noreferrer" className="font-mono text-blue-400 hover:underline break-all text-right max-w-[70%]">
            {result.url}
          </a>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">状态</span>
          <span className={result.status === 'published' ? 'text-green-400' : 'text-gray-400'}>
            {result.status === 'published' ? '已发布' : '草稿'}
          </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="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>
        <Link
          to={`/s/${result.id}`}
          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors"
        >
          查看详情和命令
        </Link>
      </div>
    </div>
  )
}