import { useClient } from 'hooks/useClient';
import { useQuery } from '@tanstack/react-query';

// A panel, not a screen. It gets whatever space the layout gives it and knows nothing about routing.
//
// `useClient` comes from the platform's workspace packages, resolved because a plugin lives inside the
// repository — no publishing, no version negotiation. This is the whole plugin↔host API in one line.
export const ExampleOverview = () => {
  const client = useClient();
  const { data, isLoading } = useQuery({
    queryKey: ['example', 'ping'],
    queryFn: () => client.get<{ plugin: string; ok: boolean }>('/example/ping'),
  });

  return (
    <div className="h-full overflow-auto p-6">
      <h2 className="text-lg font-semibold text-duck-dark">Example</h2>
      <p className="mt-1 text-sm text-duck-dark/60">
        A panel from <code>plugins/example/web/</code>, rendered by the shell's <code>WorkspaceView</code>.
      </p>
      <div className="mt-4 rounded-md border border-duck-dark/10 bg-duck-dark/[0.02] p-3 font-mono text-xs">
        <div className="mb-1 text-duck-dark/50">GET /api/example/ping</div>
        {isLoading ? <span className="text-duck-dark/40">…</span> : <span>{JSON.stringify(data)}</span>}
      </div>
    </div>
  );
};