import { useParams, useNavigate } from "react-router-dom";
import { pluginRegistry } from "../core/plugins/plugin-registry";
import { ToolShell } from "../components/tool/ToolShell";
import { useTheme } from "../app/useTheme";

export function ToolDetailPage() {
  const { toolId } = useParams<{ toolId: string }>();
  const navigate = useNavigate();
  const { dark } = useTheme();

  const plugin = pluginRegistry.find((p) => p.manifest.id === toolId);

  if (!plugin) {
    return (
      <div className="p-8">
        <h2 className="text-xl font-semibold mb-4 text-[var(--p-text)]">Tool not found</h2>
        <button onClick={() => navigate("/tools")} className="text-blue-500 hover:underline">
          Return to directory
        </button>
      </div>
    );
  }

  return (
    <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-4 animate-plimi-fade">
      <button
        onClick={() => navigate("/tools")}
        className="self-start font-sans text-[13px] text-[var(--p-muted)] hover:text-[var(--p-text)] cursor-pointer transition-colors"
      >
        ← Back to tools
      </button>

      <div
        className="flex min-h-[70vh] flex-col overflow-hidden rounded-[24px] border-[1.5px] border-[var(--p-border)] bg-[var(--p-surface)]"
        style={{ boxShadow: "0 40px 80px -30px var(--p-shadow-soft)" }}
      >
        <ToolShell plugin={plugin} dark={dark} />
      </div>
    </div>
  );
}
