'use client';
import { useState } from "react";
import { Terminal } from "lucide-react";
import { motion } from "framer-motion";

export default function CyberpunkTerminalPage() {
  const [code, setCode] = useState("");
  const [status, setStatus] = useState("");
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const validCodes = ["ZK-808-SIGMA-NX97", "EM-CYBER-OVRD-404"];

  const handleAccess = () => {
    if (validCodes.includes(code.trim().toUpperCase())) {
      setStatus("ACCESS GRANTED — Welcome to Wzkr:Café.");
      setIsAuthenticated(true);
    } else {
      setStatus("ACCESS DENIED — Invalid Code.");
      setIsAuthenticated(false);
    }
  };

  return (
    <main className="min-h-screen bg-black text-pink-400 font-mono p-6 grid gap-4">
      {/* Main Terminal Card */}
      <div className="bg-[#0f0f0f] border border-pink-400 rounded-none shadow-lg shadow-pink-500/20 p-4">
        <div className="flex items-center gap-2">
          <Terminal className="w-5 h-5 animate-pulse text-pink-400" />
          <motion.h1 
            className="text-xl text-pink-400"
            animate={{
              textShadow: [
                "0 0 5px #ff00ff, 0 0 10px #ff00ff",
                "0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff",
                "0 0 5px #ff00ff, 0 0 10px #ff00ff"
              ]
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              repeatType: "reverse"
            }}
          >
            [ Wzkr:Café Access Terminal v1.08 ]
          </motion.h1>
        </div>
        
        <div className="mt-4 grid gap-2">
          <input
            placeholder="Enter Access Code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleAccess()}
            className="bg-black border border-pink-400 text-pink-400 placeholder:text-pink-600 rounded-none p-2 focus:outline-none focus:ring-1 focus:ring-pink-500"
          />
          
          <button
            onClick={handleAccess}
            className={`${
              isAuthenticated 
                ? "bg-green-500 hover:bg-green-600" 
                : "bg-pink-600 hover:bg-pink-800"
            } text-black rounded-none font-bold transition-all duration-300 p-2`}
          >
            {isAuthenticated ? "ACCESS GRANTED" : "CONNECT"}
          </button>
          
          {status && (
            <motion.p 
              className="text-sm mt-2 text-pink-400"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5 }}
            >
              &gt; {status}
            </motion.p>
          )}
        </div>
      </div>

      {/* System Log Card */}
      <div className="bg-[#0f0f0f] border border-pink-400 rounded-none p-4">
        <p className="text-sm">
          > SYSTEM LOG: Initializing encrypted data stream...<br />
          > DECRYPTION KEY: [ █ █ █ █ █ █ █ █ ]<br />
          > AI ENTITY DETECTED: Wzkr 🐈‍⬛<br />
          {isAuthenticated && (
            <>
              > USER: [ADMIN]<br />
              > SECURITY CLEARANCE: OMEGA<br />
              > SYSTEM ACCESS: FULL<br />
            </>
          )}
        </p>
      </div>

      {/* Status Indicator */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 2 }}
        className={`text-center text-xs ${
          isAuthenticated ? "text-pink-400" : "text-pink-600"
        } mt-6`}
      >
        {isAuthenticated ? (
          "⬤ TRANSMISSION LINK ACTIVE — NODE #808"
        ) : (
          "⬤ TRANSMISSION LINK STANDBY — AWAITING INPUT"
        )}
      </motion.div>

      {/* Database Access (only shows when authenticated) */}
      {isAuthenticated && (
        <motion.div
          initial={{ opacity: