"use client";

import { useState, useEffect } from "react";
import { Keyboard, Info, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function KeyboardPage() {
  const [lastEvent, setLastEvent] = useState<any>(null);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      e.preventDefault(); // Prevent standard browser actions
      setLastEvent({
        key: e.key === " " ? "Space" : e.key,
        code: e.code,
        keyCode: e.keyCode,
        altKey: e.altKey,
        ctrlKey: e.ctrlKey,
        shiftKey: e.shiftKey,
        metaKey: e.metaKey,
        location: e.location,
        repeat: e.repeat
      });
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex items-center space-x-4 border-b pb-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-zinc-700 to-zinc-900 shadow-lg">
          <Keyboard className="h-6 w-6 text-white" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">键盘按键检测</h1>
          <p className="text-muted-foreground">实时检测并显示键盘按键的详细事件属性</p>
        </div>
      </div>

      <div className="flex flex-col items-center justify-center py-12 space-y-8">
        {!lastEvent ? (
          <div className="text-center space-y-4">
            <div className="w-64 h-64 rounded-3xl border-4 border-dashed border-muted flex items-center justify-center animate-pulse">
               <span className="text-muted-foreground font-medium text-lg px-8">请按下键盘上的任意按键</span>
            </div>
          </div>
        ) : (
          <>
            <div className="relative group">
               <div className="absolute -inset-1 bg-linear-to-r from-primary to-purple-600 rounded-3xl blur-md opacity-25 group-hover:opacity-50 transition duration-1000"></div>
               <div className="relative w-64 h-64 rounded-3xl bg-card border-2 border-primary flex flex-col items-center justify-center shadow-2xl">
                  <span className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-widest">Key</span>
                  <span className="text-7xl font-bold text-primary">{lastEvent.key}</span>
               </div>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-2xl">
               <DetailCard label="Code" value={lastEvent.code} />
               <DetailCard label="KeyCode" value={lastEvent.keyCode} />
               <DetailCard label="Location" value={lastEvent.location} />
               <DetailCard label="Repeat" value={lastEvent.repeat ? "Yes" : "No"} />
            </div>

            <div className="flex flex-wrap justify-center gap-4">
               <ModifierTag active={lastEvent.ctrlKey} label="Ctrl" />
               <ModifierTag active={lastEvent.shiftKey} label="Shift" />
               <ModifierTag active={lastEvent.altKey} label="Alt" />
               <ModifierTag active={lastEvent.metaKey} label="Win / Cmd" />
            </div>
            
            <Button variant="ghost" onClick={() => setLastEvent(null)} className="text-muted-foreground">
               <RotateCcw className="h-4 w-4 mr-2" />
               重置检测
            </Button>
          </>
        )}
      </div>

      <Card className="bg-muted/30 border-none">
         <CardHeader>
            <CardTitle className="text-sm flex items-center gap-2">
               <Info className="h-4 w-4" />
               什么是 KeyCode？
            </CardTitle>
         </CardHeader>
         <CardContent className="text-sm text-muted-foreground">
            <p>虽然 `keyCode` 在现代 Web 开发中已被废弃，推荐使用 `key` 和 `code`，但许多旧系统和特定的底层交互仍在使用它。`key` 代表字符本身，而 `code` 代表键盘上的物理位置。</p>
         </CardContent>
      </Card>
    </div>
  );
}

function DetailCard({ label, value }: { label: string; value: any }) {
  return (
    <div className="p-4 rounded-xl bg-card border flex flex-col items-center justify-center space-y-1">
       <span className="text-[10px] uppercase font-bold text-muted-foreground tracking-tighter">{label}</span>
       <span className="font-mono font-bold text-lg">{value}</span>
    </div>
  );
}

function ModifierTag({ active, label }: { active: boolean; label: string }) {
  return (
    <div className={`px-4 py-2 rounded-full border-2 font-bold transition-all duration-300 ${
      active ? "bg-primary border-primary text-primary-foreground scale-110 shadow-lg" : "border-muted text-muted-foreground opacity-30"
    }`}>
      {label}
    </div>
  );
}