digraph system_overview {
    rankdir=TB
    node [shape=box, style=rounded, fontname="Helvetica"]
    edge [fontname="Helvetica", fontsize=10]

    labelloc="t"
    label="MPR - System Overview"
    fontsize=16
    fontname="Helvetica-Bold"

    graph [splines=ortho, nodesep=0.8, ranksep=0.8]

    // External
    subgraph cluster_external {
        label="External"
        style=dashed
        color=gray

        browser [label="Browser\nmpr.local.ar / mpr.mcrn.ar", shape=ellipse]
    }

    // Nginx reverse proxy
    subgraph cluster_proxy {
        label="Reverse Proxy"
        style=filled
        fillcolor="#e8f4f8"

        nginx [label="nginx\nport 80"]
    }

    // Application layer
    subgraph cluster_apps {
        label="Application Layer"
        style=filled
        fillcolor="#f0f8e8"

        django [label="Django\n/admin\nport 8701"]
        fastapi [label="FastAPI\n/api + /graphql\nport 8702"]
        timeline [label="Timeline UI\n/ui\nport 5173"]
    }

    // Worker layer
    subgraph cluster_workers {
        label="Worker Layer"
        style=filled
        fillcolor="#fff8e8"

        grpc_server [label="gRPC Server\nport 50051"]
        celery [label="Celery Worker\n(local mode)"]
    }

    // AWS layer
    subgraph cluster_aws {
        label="AWS (lambda mode)"
        style=filled
        fillcolor="#fde8d0"

        step_functions [label="Step Functions\nstate machine"]
        lambda [label="Lambda\nFFmpeg container"]
    }

    // Data layer
    subgraph cluster_data {
        label="Data Layer"
        style=filled
        fillcolor="#f8e8f0"

        postgres [label="PostgreSQL\nport 5436", shape=cylinder]
        redis [label="Redis\nport 6381", shape=cylinder]
    }

    // Storage
    subgraph cluster_storage {
        label="S3 Storage"
        style=filled
        fillcolor="#f0f0f0"

        minio [label="MinIO (local)\nport 9000", shape=folder]
        s3 [label="AWS S3 (cloud)", shape=folder, style="dashed,rounded"]
        bucket_in [label="mpr-media-in", shape=note]
        bucket_out [label="mpr-media-out", shape=note]
    }

    // Connections
    browser -> nginx

    nginx -> django [xlabel="/admin"]
    nginx -> fastapi [xlabel="/api, /graphql"]
    nginx -> timeline [xlabel="/ui"]
    nginx -> minio [xlabel="/media/*"]

    timeline -> fastapi [xlabel="REST API"]

    fastapi -> postgres
    fastapi -> grpc_server [xlabel="gRPC\nprogress"]

    // Local mode
    grpc_server -> celery [xlabel="task dispatch"]
    celery -> redis [xlabel="queue"]
    celery -> postgres [xlabel="job updates"]
    celery -> minio [xlabel="S3 API\ndownload/upload"]

    // Lambda mode
    fastapi -> step_functions [xlabel="boto3\nstart_execution", style=dashed]
    step_functions -> lambda [style=dashed]
    lambda -> s3 [xlabel="download/upload", style=dashed]
    lambda -> fastapi [xlabel="callback\nPOST /jobs/{id}/callback", style=dashed]

    // Storage details
    minio -> bucket_in [style=dotted, arrowhead=none]
    minio -> bucket_out [style=dotted, arrowhead=none]
    s3 -> bucket_in [style=dotted, arrowhead=none]
    s3 -> bucket_out [style=dotted, arrowhead=none]
}