sitemente/app/mission-control/clawhub/page.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import BackToMC from "@/components/mission-control/BackToMC";

interface Skill {
  slug: string;
  name: string;
  score: number;
  description?: string;
  version?: string;
  author?: string;
  downloads?: number;
}

export default function ClawHubMarketplace() {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(false);
  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
  const [action, setAction] = useState<"install" | "analyze" | "clone" | null>(null);
  const [output, setOutput] = useState("");
  const [installing, setInstalling] = useState(false);

  const searchSkills = useCallback(async (query: string) => {
    if (!query.trim()) {
      // Load popular skills
      setLoading(true);
      try {
        const res = await fetch(`/api/clawhub?action=popular`);
        const data = await res.json();
        setSkills(data.skills || []);
      } catch (e) {
        console.error(e);
      }
      setLoading(false);
      return;
    }

    setLoading(true);
    try {
      const res = await fetch(`/api/clawhub?action=search&q=${encodeURIComponent(query)}`);
      const data = await res.json();
      setSkills(data.skills || []);
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    searchSkills("");
  }, [searchSkills]);

  const getSkillDetails = async (slug: string) => {
    setLoading(true);
    try {
      const res = await fetch(`/api/clawhub?action=info&slug=${encodeURIComponent(slug)}`);
      const data = await res.json();
      setSelectedSkill({ ...data, slug });
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

  const handleInstall = async () => {
    if (!selectedSkill) return;
    setInstalling(true);
    setOutput("Installing...\n");
    try {
      const res = await fetch(`/api/clawhub`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "install", slug: selectedSkill.slug }),
      });
      const data = await res.json();
      setOutput(data.output || data.error || "Done");
    } catch (e) {
      setOutput("Error: " + String(e));
    }
    setInstalling(false);
  };

  const handleAnalyze = async () => {
    if (!selectedSkill) return;
    setAction("analyze");
    setOutput("Analyzing skill code...\n");
    try {
      const res = await fetch(`/api/clawhub`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "analyze", slug: selectedSkill.slug }),
      });
      const data = await res.json();
      setOutput(data.output || data.error || "Analysis complete");
    } catch (e) {
      setOutput("Error: " + String(e));
    }
    setAction(null);
  };

  const handleClone = async () => {
    if (!selectedSkill) return;
    setAction("clone");
    setOutput("Creating custom version...\n");
    try {
      const res = await fetch(`/api/clawhub`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "clone", slug: selectedSkill.slug, name: selectedSkill.name }),
      });
      const data = await res.json();
      setOutput(data.output || data.error || "Clone complete");
    } catch (e) {
      setOutput("Error: " + String(e));
    }
    setAction(null);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <BackToMC />
      
      <div className="p-6">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-white mb-2">🛒 ClawHub Marketplace</h1>
          <p className="text-slate-400">Search, install, analyze, and customize skills from ClawHub</p>
        </div>

        <div className="flex gap-4 mb-6">
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && searchSkills(search)}
            placeholder="Search skills..."
            className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
          />
          <button
            onClick={() => searchSkills(search)}
            className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition"
          >
            Search
          </button>
          <button
            onClick={() => { setSearch(""); searchSkills(""); }}
            className="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-lg font-medium transition"
          >
            Popular
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Skills List */}
          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
            <div className="p-4 border-b border-slate-700 bg-slate-800">
              <h2 className="font-semibold text-lg">Available Skills</h2>
              <p className="text-sm text-slate-400">{skills.length} skills found</p>
            </div>
            <div className="max-h-[600px] overflow-y-auto">
              {loading ? (
                <div className="p-8 text-center text-slate-400">Loading...</div>
              ) : skills.length === 0 ? (
                <div className="p-8 text-center text-slate-400">No skills found</div>
              ) : (
                skills.map((skill) => (
                  <button
                    key={skill.slug}
                    onClick={() => getSkillDetails(skill.slug)}
                    className={`w-full text-left p-4 border-b border-slate-700 hover:bg-slate-700 transition ${
                      selectedSkill?.slug === skill.slug ? "bg-slate-700" : ""
                    }`}
                  >
                    <div className="font-medium text-white">{skill.name}</div>
                    <div className="text-sm text-slate-400 mt-1">@{skill.slug}</div>
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-xs bg-slate-600 px-2 py-0.5 rounded">
                        Score: {skill.score?.toFixed(3)}
                      </span>
                    </div>
                  </button>
                ))
              )}
            </div>
          </div>

          {/* Detail Panel */}
          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
            <div className="p-4 border-b border-slate-700 bg-slate-800">
              <h2 className="font-semibold text-lg">
                {selectedSkill ? selectedSkill.name : "Select a Skill"}
              </h2>
              {selectedSkill && (
                <p className="text-sm text-slate-400">@{selectedSkill.slug}</p>
              )}
            </div>

            {!selectedSkill ? (
              <div className="p-8 text-center text-slate-400">
                Click a skill to see details
              </div>
            ) : (
              <div className="p-4">
                {selectedSkill.description && (
                  <div className="mb-4">
                    <h3 className="text-sm font-semibold text-slate-300 mb-1">Description</h3>
                    <p className="text-slate-400 text-sm">{selectedSkill.description}</p>
                  </div>
                )}

                <div className="flex flex-wrap gap-2 mb-4">
                  {selectedSkill.version && (
                    <span className="text-xs bg-green-600 px-2 py-1 rounded">
                      v{selectedSkill.version}
                    </span>
                  )}
                  {selectedSkill.author && (
                    <span className="text-xs bg-purple-600 px-2 py-1 rounded">
                      by {selectedSkill.author}
                    </span>
                  )}
                  {selectedSkill.downloads !== undefined && (
                    <span className="text-xs bg-blue-600 px-2 py-1 rounded">
                      {selectedSkill.downloads} downloads
                    </span>
                  )}
                </div>

                {/* Action Buttons */}
                <div className="flex flex-col gap-2 mb-4">
                  <button
                    onClick={handleInstall}
                    disabled={installing}
                    className="bg-green-600 hover:bg-green-700 disabled:bg-green-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
                  >
                    {installing ? "⏳ Installing..." : "✅ Install Skill"}
                  </button>
                  <button
                    onClick={handleAnalyze}
                    disabled={action !== null}
                    className="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
                  >
                    {action === "analyze" ? "🔍 Analyzing..." : "🔍 Analyze Skill"}
                  </button>
                  <button
                    onClick={handleClone}
                    disabled={action !== null}
                    className="bg-purple-600 hover:bg-purple-700 disabled:bg-purple-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
                  >
                    {action === "clone" ? "🧬 Creating..." : "🧬 Make My Version"}
                  </button>
                </div>

                {/* Output */}
                {output && (
                  <div className="bg-slate-900 rounded-lg p-4 border border-slate-600">
                    <h3 className="text-xs font-semibold text-slate-300 mb-2">Output</h3>
                    <pre className="text-xs text-slate-300 whitespace-pre-wrap font-mono overflow-auto max-h-64">
                      {output}
                    </pre>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}