<?php

require_once __DIR__ . '/../vendor/autoload.php';

use PHPNative\Framework\Application;
use PHPNative\Ui\Widget\Button;
use PHPNative\Ui\Widget\Container;
use PHPNative\Ui\Widget\Label;

// Create application
$app = new Application('Async HTTP Request Example', 900, 700);

// Create UI
$container = new Container('flex flex-col p-6 gap-3 bg-gray-100');

$title = new Label(
    text: 'Asynchrone HTTP Requests Demo',
    style: 'text-2xl text-gray-900 mb-4'
);

$statusLabel = new Label(
    text: 'Bereit zum Laden...',
    style: 'text-base text-gray-700 p-2 bg-white rounded'
);

// Button for fetching JSON data
$fetchButton = new Button(
    text: 'JSON API abrufen',
    style: 'bg-green-500 hover:bg-green-700 text-white p-3 rounded-lg'
);

$resultLabel = new Label(
    text: '',
    style: 'text-sm text-gray-800 p-3 bg-white rounded whitespace-pre-wrap'
);

// Set async handler for JSON fetch
$fetchButton->setOnClickAsync(
    onClickAsync: function() {
        // Fetch data from API (example: JSON placeholder)
        $url = 'https://jsonplaceholder.typicode.com/todos/1';

        $context = stream_context_create([
            'http' => [
                'timeout' => 10,
                'method' => 'GET',
            ]
        ]);

        $response = @file_get_contents($url, false, $context);

        if ($response === false) {
            throw new \Exception('Failed to fetch data');
        }

        return json_decode($response, true);
    },

    onComplete: function($data) use ($statusLabel, $resultLabel) {
        $statusLabel->setText('✓ Daten erfolgreich geladen!');

        $formatted = "ID: " . ($data['id'] ?? 'N/A') . "\n";
        $formatted .= "Titel: " . ($data['title'] ?? 'N/A') . "\n";
        $formatted .= "Erledigt: " . (($data['completed'] ?? false) ? 'Ja' : 'Nein');

        $resultLabel->setText($formatted);
    },

    onError: function($error) use ($statusLabel, $resultLabel) {
        $statusLabel->setText('✗ Fehler aufgetreten');
        $resultLabel->setText('Error: ' . $error->getMessage());
    }
);

// Button for simulating slow operation
$slowButton = new Button(
    text: 'Langsame Operation (5s)',
    style: 'bg-orange-500 hover:bg-orange-700 text-white p-3 rounded-lg'
);

$slowButton->setOnClickAsync(
    onClickAsync: function() {
        $startTime = microtime(true);

        // Simulate heavy computation
        sleep(5);

        $endTime = microtime(true);
        $duration = round($endTime - $startTime, 2);

        return [
            'message' => 'Operation abgeschlossen',
            'duration' => $duration . ' Sekunden'
        ];
    },

    onComplete: function($result) use ($statusLabel, $resultLabel) {
        $statusLabel->setText('✓ Operation abgeschlossen!');
        $resultLabel->setText(
            $result['message'] . "\n" .
            'Dauer: ' . $result['duration']
        );
    },

    onError: function($error) use ($statusLabel, $resultLabel) {
        $statusLabel->setText('✗ Fehler bei Operation');
        $resultLabel->setText('Error: ' . $error->getMessage());
    }
);

// Add all components
$container->addComponent($title);
$container->addComponent($statusLabel);
$container->addComponent($fetchButton);
$container->addComponent($slowButton);
$container->addComponent($resultLabel);

// Info label
$infoLabel = new Label(
    text: 'Die UI bleibt während der Requests responsive!',
    style: 'text-xs text-gray-500 mt-4 italic'
);
$container->addComponent($infoLabel);

// Run application
$app->setRoot($container)->run();