"use client";
import { useEffect, useState, useRef } from "react";

const sequence = [
  "whoami\nravneet",
  "skills --list\ndevelopment\ninfrastructure\ncloud\nautomation\nbusiness",
  "current-project\nzyphron-cloud",
  "status\nbuilding..."
];

export default function Terminal() {
  const [lines, setLines] = useState<string[]>([]);
  const [input, setInput] = useState("");
  const [history, setHistory] = useState<string[]>([]);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let idx = 0;
    let char = 0;
    let current = "";
    const cmds = sequence.join("\n$ ");
    const full = "$ " + cmds;
    const t = setInterval(() => {
      if (char < full.length) {
        current += full[char];
        char++;
        setLines(current.split("\n"));
      } else {
        clearInterval(t);
      }
    }, 14);
    return () => clearInterval(t);
  }, []);

  const onCommand = (cmd: string) => {
    const c = cmd.trim().toLowerCase();
    let out = "";
    if (c === "help") out = "commands: help, skills, projects, about, clear, whoami";
    else if (c === "skills") out = "React, Next.js, TypeScript, Node.js, PHP, Laravel, MySQL, PostgreSQL, Redis, Docker, Linux, Pterodactyl";
    else if (c === "projects") out = "zyphron-cloud, personal-website, infrastructure-systems";
    else if (c === "about") out = "Founder of Zyphron Cloud — developer & entrepreneur from Punjab, India.";
    else if (c === "whoami") out = "ravneet";
    else if (c === "clear") { setLines([]); setHistory([]); return; }
    else if (!c) return;
    else out = `command not found: ${c} — try 'help'`;
    setHistory(h => [...h, `$ ${cmd}`, out]);
  };

  return (
    <div className="rounded-[18px] border border-white/10 bg-[#0a0d12] overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 bg-white/[0.04] border-b border-white/10">
        <div className="flex gap-1.5"><span className="w-3 h-3 rounded-full bg-red-500/80" /><span className="w-3 h-3 rounded-full bg-yellow-500/80" /><span className="w-3 h-3 rounded-full bg-green-500/80" /></div>
        <span className="text-[11px] tracking-widest text-white/30">ravneet@portfolio:~$</span>
        <span className="text-[11px] text-emerald-400">● online</span>
      </div>
      <div ref={ref} className="p-4 sm:p-6 font-mono text-[12px] leading-relaxed min-h-[280px]">
        {lines.map((l, i) => <div key={i} className={l.startsWith("$") ? "text-white/90" : "text-white/50"}>{l || "\u00A0"}</div>)}
        {history.map((h, i) => <div key={`h-${i}`} className={h.startsWith("$") ? "text-white mt-2" : "text-white/50"}>{h}</div>)}
        <div className="flex items-center gap-2 mt-3">
          <span className="text-emerald-400">$</span>
          <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") { onCommand(input); setInput(""); } }} placeholder="type help…" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/30" />
        </div>
      </div>
    </div>
  );
}