'use client'

import { useState } from 'react'
import Image from 'next/image'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Check, Copy } from 'lucide-react'

export default function KMSActivationGuide() {
  const [copiedStates, setCopiedStates] = useState({
    quickAction1: false,
    quickAction2: false,
    setKMS: false,
    activate: false,
    replaceKey: false,
  })

  const copyToClipboard = (text: string, key: keyof typeof copiedStates) => {
    navigator.clipboard.writeText(text)
    setCopiedStates(prev => ({ ...prev, [key]: true }))
    setTimeout(() => setCopiedStates(prev => ({ ...prev, [key]: false })), 2000)
  }

  return (
    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
      <div className="max-w-2xl w-full space-y-8">
        <h1 className="text-4xl font-bold text-center mb-8">KMS 激活指南</h1>
        
        <Card className="bg-card">
          <CardHeader>
            <CardTitle>快速操作</CardTitle>
            <CardDescription>复制并在 PowerShell (管理员) 中运行以下命令</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center space-x-2">
              <code className="bg-muted p-2 rounded flex-grow">slmgr /skms kms.flinty.moe</code>
              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /skms kms.flinty.moe', 'quickAction1')}>
                {copiedStates.quickAction1 ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <div className="flex items-center space-x-2">
              <code className="bg-muted p-2 rounded flex-grow">slmgr /ato</code>
              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ato', 'quickAction2')}>
                {copiedStates.quickAction2 ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-card">
          <CardHeader>
            <CardTitle>步骤 1: 打开 PowerShell</CardTitle>
          </CardHeader>
          <CardContent>
            <p>右键点击开始菜单，选择 &quot;PowerShell (管理员)&quot; 或 &quot;终端管理员&quot;</p>
            <div className="mt-4">
              <Image
                src="/images/open-powershell.png"
                alt="打开 PowerShell"
                width={500}
                height={300}
                className="rounded-lg"
              />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-card">
          <CardHeader>
            <CardTitle>步骤 2: 设置 KMS 地址</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p>在 PowerShell 中执行以下命令：</p>
            <div className="flex items-center space-x-2">
              <code className="bg-muted p-2 rounded flex-grow">slmgr /skms kms.flinty.moe</code>
              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /skms kms.flinty.moe', 'setKMS')}>
                {copiedStates.setKMS ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <div className="mt-4">
              <Image
                src="/images/set-kms-address.png"
                alt="设置 KMS 地址"
                width={500}
                height={300}
                className="rounded-lg"
              />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-card">
          <CardHeader>
            <CardTitle>步骤 3: 激活 Windows</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p>执行以下命令激活 Windows：</p>
            <div className="flex items-center space-x-2">
              <code className="bg-muted p-2 rounded flex-grow">slmgr /ato</code>
              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ato', 'activate')}>
                {copiedStates.activate ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <p>如果预置了 VL key，Windows 应该正常激活。</p>
            <div className="mt-4">
              <Image
                src="/images/activate-windows.png"
                alt="激活 Windows"
                width={500}
                height={300}
                className="rounded-lg"
              />
            </div>
          </CardContent>
        </Card>

        <Card className="bg-card">
          <CardHeader>
            <CardTitle>故障排除</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p>如果激活失败，请在<a href="https://learn.microsoft.com/zh-cn/windows-server/get-started/kms-client-activation-keys" className="text-blue-500 hover:underline">这里</a>找到适合您系统的 GVLK，然后使用以下命令替换当前的 key：</p>
            <div className="flex items-center space-x-2">
              <code className="bg-muted p-2 rounded flex-grow">slmgr /ipk &lt;product key&gt;</code>
              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ipk <product key>', 'replaceKey')}>
                {copiedStates.replaceKey ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <p>替换 key 后，重新执行步骤 2 和步骤 3。</p>
          </CardContent>
        </Card>

        <Separator />

        <footer className="text-center text-sm text-muted-foreground">
          <p>本指南仅供教育目的使用。请确保您有合法的 Windows 许可证。</p>
        </footer>
      </div>
    </div>
  )
}