@startuml components
!theme plain
skinparam componentStyle uml2
skinparam packageStyle rectangle
skinparam componentBackgroundColor #F8F9FA
skinparam componentBorderColor #495057
skinparam packageBackgroundColor #FFFFFF
skinparam packageBorderColor #DEE2E6

title Sistema de Registro de Estudiantes - Arquitectura de Componentes

package "Frontend (Angular 21)" as frontend {
    [App Component] as app
    [Student List] as studentList
    [Student Form] as studentForm
    [Enrollment Page] as enrollPage
    [Classmates Page] as classmates

    package "Core" {
        [Apollo Client] as apollo
        [Student Service] as studentSvc
        [Enrollment Service] as enrollSvc
        [Connectivity Service] as connSvc
        [Error Handler] as errorHandler
    }

    package "Shared" {
        [Connectivity Overlay] as overlay
        [Loading Spinner] as spinner
        [Confirm Dialog] as dialog
    }
}

package "Backend (.NET 10)" as backend {

    package "Host" as host {
        [Program.cs] as program
        [DI Container] as di
    }

    package "Adapters" as adapters {
        package "Driving (Primary)" {
            [GraphQL API\n(HotChocolate)] as graphql
            [Query] as query
            [Mutation] as mutation
            [Types] as types
        }

        package "Driven (Secondary)" {
            [Repositories] as repos
            [DataLoaders] as loaders
            [DbContext] as dbContext
        }
    }

    package "Application" as application {
        [Commands] as commands
        [Queries] as queries
        [Handlers] as handlers
        [Validators] as validators
        [DTOs] as dtos
    }

    package "Domain" as domain {
        [Entities] as entities
        [Value Objects] as valueObjects
        [Domain Services] as domainSvc
        [Ports (Interfaces)] as ports
    }
}

database "SQL Server 2022" as sqlserver {
    [Students]
    [Subjects]
    [Professors]
    [Enrollments]
}

cloud "Browser" as browser

' Conexiones Frontend
browser --> app
app --> studentList
app --> studentForm
app --> enrollPage
app --> classmates
app --> overlay

studentList --> studentSvc
studentForm --> studentSvc
enrollPage --> enrollSvc
classmates --> enrollSvc
overlay --> connSvc

studentSvc --> apollo
enrollSvc --> apollo
connSvc ..> errorHandler

' Conexiones Backend
apollo --> graphql : HTTP/GraphQL

graphql --> query
graphql --> mutation
query --> handlers
mutation --> handlers
handlers --> validators
handlers --> commands
handlers --> queries

commands --> domainSvc
queries --> repos
domainSvc --> entities
domainSvc --> valueObjects

repos --> dbContext
loaders --> dbContext
dbContext --> sqlserver

' Implementación de puertos
repos ..|> ports : implements

note right of domain
  <b>Regla de Dependencia:</b>
  Domain no depende
  de capas externas
end note

note bottom of graphql
  Endpoints:
  - /graphql
  - /health
end note

@enduml