Untitled

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun FlightControlPanel() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.DarkGray)
            .padding(4.dp)
    ) {
        // Left vertical buttons
        Column(
            modifier = Modifier
                .weight(0.15f)
                .fillMaxHeight()
                .padding(vertical = 8.dp, horizontal = 4.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top)
        ) {
            Spacer(modifier = Modifier.height(50.dp))
            listOf("MSG", "DATA", "FUEL", "PLANE", "PREV").forEach { label ->
                VerticalButton(text = label)
                Spacer(modifier = Modifier.height(12.dp))
            }
        }

        // Center section with display and keyboard
        Column(
            modifier = Modifier
                .weight(0.7f)
                .padding(horizontal = 8.dp)
        ) {
            // Display screen with side buttons
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.5f)
            ) {
                // Left screen buttons
                Column(
                    modifier = Modifier
                        .width(50.dp)
                        .fillMaxHeight()
                        .background(Color.Black),
                    verticalArrangement = Arrangement.SpaceEvenly
                ) {
                    repeat(4) {
                        Divider(
                            modifier = Modifier
                                .width(44.dp)
                                .padding(vertical = 2.dp)
                                .height(2.dp),
                            color = Color.Gray
                        )
                    }
                }

                // Main screen
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight()
                        .background(Color.Black)
                        .border(1.dp, Color.Gray),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "46.01N3 E/E",
                        color = Color.Green,
                        fontSize = 24.sp
                    )
                }

                // Right screen buttons
                Column(
                    modifier = Modifier
                        .width(50.dp)
                        .fillMaxHeight()
                        .background(Color.Black),
                    verticalArrangement = Arrangement.SpaceEvenly
                ) {
                    repeat(4) {
                        Divider(
                            modifier = Modifier
                                .width(44.dp)
                                .padding(vertical = 2.dp)
                                .height(2.dp),
                            color = Color.Gray
                        )
                    }
                }
            }

            Spacer(modifier = Modifier.height(8.dp))

            // Hold/Return row
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = "QTO HOLD",
                    color = Color.Green,
                    fontSize = 16.sp
                )
                Text(
                    text = "RETURN",
                    color = Color.Green,
                    fontSize = 16.sp
                )
            }

            Spacer(modifier = Modifier.height(8.dp))

            // Keyboard
            val keys = listOf(
                listOf("A", "B", "C", "D", "E", "F", "G", "1", "2", "3"),
                listOf("H", "I", "J", "K", "L", "M", "N", "4", "5", "6"),
                listOf("O", "P", "Q", "R", "S", "T", "U", "7", "8", "9"),
                listOf("V", "W", "X", "Y", "Z", "ENTER", "BACK", "0", "+")
            )

            keys.forEach { row ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 2.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    row.forEach { key ->
                        KeypadButton(
                            text = key,
                            modifier = Modifier.weight(
                                when (key) {
                                    "ENTER", "BACK" -> 1.5f
                                    else -> 1f
                                }
                            )
                        )
                    }
                }
            }
        }

        // Right vertical buttons
        Column(
            modifier = Modifier
                .weight(0.15f)
                .fillMaxHeight()
                .padding(vertical = 8.dp, horizontal = 4.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top)
        ) {
            Spacer(modifier = Modifier.height(50.dp))
            listOf("NAV", "DTO", "FPL", "MENU", "SUSP").forEach { label ->
                VerticalButton(text = label)
                Spacer(modifier = Modifier.height(12.dp))
            }
        }
    }
}

@Composable
fun VerticalButton(text: String) {
    Button(
        onClick = { },
        modifier = Modifier
            .fillMaxWidth()
            .height(44.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Black,
            contentColor = Color.White
        ),
        shape = RoundedCornerShape(2.dp)
    ) {
        Text(
            text = text,
            fontSize = 12.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Composable
fun KeypadButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = { },
        modifier = modifier
            .padding(1.dp)
            .height(40.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Black,
            contentColor = Color.White
        ),
        shape = RoundedCornerShape(2.dp)
    ) {
        Text(
            text = text,
            fontSize = 14.sp
        )
    }

}

@Preview(
    showBackground = true,
    device = Devices.TABLET
)
@Composable
fun DisplayPreiview1() {
    FlightControlPanel()
}