function RefreshButton() {
  const { call, loading, result, error } = useTool('refresh-data');

  return (
    <button onClick={() => call()} disabled={loading}>
      {loading ? 'Refreshing...' : 'Refresh'}
    </button>
  );
}

function WeatherWidget({ city }: { city: string }) {
  const { call, result, loading } = useTool('get-weather');

  useEffect(() => {
    call({ city });
  }, [city]);

  if (loading) return <Skeleton />;
  return <div>{result?.temperature}°C</div>;
}

const { call, result, error, retry, reset } = useTool('create-item', {
  defaultArgs: { type: 'note' },
  transform: (result) => result.structuredContent?.item,
  retry: { count: 3, delay: 1000 },
  onStart: () => console.log('Starting...'),
  onSuccess: (item) => toast.success(`Created: ${item.name}`),
  onError: (error) => toast.error(error.message),
  onComplete: () => console.log('Done'),
});

function UserProfile() {
  const { data, loading, error, refresh } = useResource<User>('user://profile');

  if (loading) return <Skeleton />;
  if (error) return <Alert>{error.message}</Alert>;

  return (
    <Card>
      <h2>{data?.name}</h2>
      <Button onClick={refresh}>Refresh</Button>
    </Card>
  );
}

const { data } = useResource('metrics://dashboard', {
  refreshInterval: 5000,  // Refresh every 5 seconds
  transform: (raw) => raw.metrics,
});

function FeedbackButton() {
  const { sendMessage } = useMessage();

  const handleClick = async () => {
    await sendMessage('User requested help with the dashboard');
  };

  return <Button onClick={handleClick}>Ask for Help</Button>;
}

function ThemedComponent() {
  const { theme, displayMode, viewport } = useHostContext();

  return (
    <div className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>
      <p>Display mode: {displayMode}</p>
      <p>Viewport: {viewport?.width}x{viewport?.height}</p>
    </div>
  );
}

function WeatherCard() {
  const { result, loading, error } = useToolResult<WeatherData>();

  if (loading) return <Skeleton />;
  if (error) return <Alert>{error.message}</Alert>;
  if (!result) return null;

  return (
    <Card>
      <h2>{result.city}</h2>
      <p>{result.temperature}°C - {result.condition}</p>
    </Card>
  );
}

function LivePreview() {
  const { input } = useToolInput<{ query: string }>();

  return (
    <div>
      <p>Current query: {input?.query ?? 'None'}</p>
    </div>
  );
}

function StreamingResponse() {
  const { partial, isStreaming } = useToolStream<{ text: string }>();

  return (
    <div>
      {isStreaming && <Spinner />}
      <ReactMarkdown>{partial?.text ?? ''}</ReactMarkdown>
    </div>
  );
}

function AdvancedComponent() {
  const { 
    app,           // Raw ext-apps App instance
    isConnected,   // Connection state
    error,         // Connection error
    callTool,      // Call any tool
    sendMessage,   // Send chat message
    sendLog,       // Send log to host
    openLink,      // Open URL in host
    requestDisplayMode,  // Request display mode change
  } = useMcpApp();

  const handleFullscreen = async () => {
    await requestDisplayMode('fullscreen');
  };

  return (
    <Button onClick={handleFullscreen}>
      Go Fullscreen
    </Button>
  );
}