Prompt Expert Mode

"use client";

import React, { useState } from "react";
import { Terminal, Settings, Brackets, Layers, Cpu, Play } from "lucide-react";

export default function PromptExpertMode() {
    const [activeTab, setActiveTab] = useState("json");

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-[#09090b] text-zinc-400 shadow-sm w-full max-w-4xl mx-auto overflow-hidden font-mono text-xs">
            <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-800 bg-[#121214]">
                <div className="flex items-center gap-6">
                    <div className="flex items-center gap-2 text-zinc-200">
                        <Terminal className="h-4 w-4" />
                        <span className="font-bold">Expert Console</span>
                    </div>
                    <div className="flex items-center gap-1">
                        {["json", "yaml", "xml"].map(t => (
                            <button
                                key={t}
                                onClick={() => setActiveTab(t)}
                                className={`px-3 py-1 rounded transition-colors ${activeTab === t ? "bg-zinc-800 text-zinc-100" : "hover:text-zinc-200"}`}
                            >
                                {t.toUpperCase()}
                            </button>
                        ))}
                    </div>
                </div>
                <div className="flex items-center gap-4">
                    <Settings className="h-4 w-4 hover:text-zinc-200 cursor-pointer" />
                    <button className="flex items-center gap-2 px-4 py-1.5 rounded bg-blue-600 text-white font-bold hover:bg-blue-700 transition-all">
                        <Play className="h-3 w-3 fill-current" />
                        EXECUTE
                    </button>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-4 divide-x divide-zinc-800 h-[400px]">
                <div className="p-6 space-y-6">
                    <div className="space-y-4">
                        <p className="text-[10px] font-black uppercase text-zinc-500 tracking-widest flex items-center gap-2">
                            <Layers className="h-3 w-3" />
                            Hyperparams
                        </p>
                        {["Top_P", "Top_K", "Frequency", "Presence"].map(p => (
                            <div key={p} className="flex items-center justify-between">
                                <span className="text-[11px]">{p}</span>
                                <span className="text-blue-400">0.85</span>
                            </div>
                        ))}
                    </div>
                    <div className="space-y-4 pt-4 border-t border-zinc-800">
                        <p className="text-[10px] font-black uppercase text-zinc-500 tracking-widest flex items-center gap-2">
                            <Cpu className="h-3 w-3" />
                            Infra
                        </p>
                        <div className="p-3 rounded bg-zinc-900/50 border border-zinc-800">
                            <p className="text-[10px] text-zinc-500">Node ID: cluster-4a</p>
                            <p className="text-[10px] text-emerald-500">Status: Healthy</p>
                        </div>
                    </div>
                </div>
                <div className="col-span-3 p-8 bg-[#0c0c0e] relative">
                    <div className="absolute top-4 right-6 p-1.5 rounded bg-zinc-800/50 text-zinc-500">
                        <Brackets className="h-4 w-4" />
                    </div>
                    <pre className="leading-relaxed text-blue-400">
                        <code>{`{
  "request_id": "req_842a_9k",
  "system_fingerprint": "fp_3b8e72",
  "messages": [
    {
      "role": "system",
      "content": "You are a recursive logic engine..."
    },
    {
      "role": "user",
      "content": "Verify the zero-shot stability of the following..."
    }
  ],
  "response_format": { "type": "json_object" }
}`}</code>
                    </pre>
                </div>
            </div>
        </div>
    );
}