package com.example.ui.screens

import androidx.compose.animation.*
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.firebase.FirebaseAuthService
import com.example.firebase.FirebaseLog
import com.example.ui.theme.*

@Composable
fun FirebaseConsoleCard(
    logs: List<FirebaseLog>,
    onClearLogs: () -> Unit,
    modifier: Modifier = Modifier
) {
    var expandedInfo by remember { mutableStateOf(false) }
    val isInitialized = FirebaseAuthService.isFirebaseInitialized

    Card(
        colors = CardDefaults.cardColors(containerColor = Color(0xFF0F141C)),
        shape = RoundedCornerShape(12.dp),
        border = androidx.compose.foundation.BorderStroke(1.dp, Color(0xFF1E293B)),
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 10.dp)
    ) {
        Column(modifier = Modifier.padding(14.dp)) {
            // Header
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        imageVector = Icons.Default.Cloud,
                        contentDescription = "Firebase Connection Status",
                        tint = if (isInitialized) Color(0xFFFF9100) else Color(0xFF94A3B8),
                        modifier = Modifier.size(20.dp)
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text(
                        text = if (isInitialized) "FIREBASE LIVE GATEWAY" else "FIREBASE SIMULATION MODULE",
                        style = MaterialTheme.typography.bodyMedium.copy(
                            fontWeight = FontWeight.Bold,
                            color = if (isInitialized) Color(0xFFFF9100) else Color(0xFF94A3B8),
                            letterSpacing = 0.5.sp
                        )
                    )
                }

                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    IconButton(
                        onClick = { expandedInfo = !expandedInfo },
                        modifier = Modifier.size(28.dp)
                    ) {
                        Icon(
                            imageVector = if (expandedInfo) Icons.Default.Info else Icons.Default.Info,
                            contentDescription = "Show setup instructions",
                            tint = Color(0xFF38BDF8),
                            modifier = Modifier.size(18.dp)
                        )
                    }

                    IconButton(
                        onClick = onClearLogs,
                        modifier = Modifier.size(28.dp)
                    ) {
                        Icon(
                            imageVector = Icons.Default.DeleteSweep,
                            contentDescription = "Clear logs",
                            tint = Color(0xFF94A3B8),
                            modifier = Modifier.size(18.dp)
                        )
                    }
                }
            }

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

            // Pulse Status Bar
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color(0xFF1E293B).copy(0.4f), RoundedCornerShape(6.dp))
                    .border(1.dp, Color(0xFF334155).copy(0.4f), RoundedCornerShape(6.dp))
                    .padding(8.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Box(
                    modifier = Modifier
                        .size(8.dp)
                        .clip(RoundedCornerShape(4.dp))
                        .background(if (isInitialized) Color.Green else Color(0xFFFF3333))
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = if (isInitialized) {
                        "Connected to project: google-services.json successfully integrated."
                    } else {
                        "google-services.json not found. Dual-mode fallback live check in progress."
                    },
                    style = MaterialTheme.typography.bodySmall.copy(
                        fontSize = 11.sp,
                        color = Color(0xFFCBD5E1)
                    )
                )
            }

            // Info Accordion on Setup
            AnimatedVisibility(
                visible = expandedInfo,
                enter = expandVertically() + fadeIn(),
                exit = shrinkVertically() + fadeOut()
            ) {
                Column(
                    modifier = Modifier
                        .padding(top = 10.dp)
                        .background(Color(0xFF1E293B).copy(0.3f), RoundedCornerShape(8.dp))
                        .border(1.dp, Color(0xFF334155).copy(0.6f), RoundedCornerShape(8.dp))
                        .padding(12.dp)
                ) {
                    Text(
                        text = "Real Firebase integration steps:",
                        style = MaterialTheme.typography.bodySmall.copy(
                            fontWeight = FontWeight.Bold,
                            color = Color(0xFF38BDF8)
                        )
                    )
                    Spacer(modifier = Modifier.height(4.dp))
                    Text(
                        text = "1. Place your google-services.json in the /app folder.\n" +
                               "2. Apply id(\"com.google.gms.google-services\") in app-level build.gradle.kts.\n" +
                               "3. Enable Email/Password and Phone Auth under Firebase Console > Build > Authentication.\n" +
                               "4. Set up verification safety bypass if using locally or on standard test networks.",
                        style = MaterialTheme.typography.bodySmall.copy(
                            fontSize = 10.sp,
                            color = Color(0xFF94A3B8),
                            lineHeight = 15.sp
                        )
                    )
                    Spacer(modifier = Modifier.height(6.dp))
                    Text(
                        text = "Current State: Complete high-fidelity debug simulator mimics full-stack network handshakes, OTP verification, carrier tokens, and database callbacks.",
                        style = MaterialTheme.typography.bodySmall.copy(
                            fontSize = 10.sp,
                            color = Color(0xFFFCD34D),
                            lineHeight = 15.sp
                        )
                    )
                }
            }

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

            // Console Window Label
            Text(
                text = "FIREBASE LIVE ACTIVITY DEBBUGGER LOGS (REACTIVE FEED):",
                fontSize = 9.sp,
                fontWeight = FontWeight.SemiBold,
                color = Color(0xFF64748B),
                modifier = Modifier.padding(bottom = 6.dp)
            )

            // Terminal Window
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(140.dp)
                    .clip(RoundedCornerShape(6.dp))
                    .background(Color(0xFF030712))
                    .border(1.dp, Color(0xFF1F2937), RoundedCornerShape(6.dp))
                    .padding(8.dp)
            ) {
                if (logs.isEmpty()) {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = "No active trace events. Trigger an OTP or Auth link above to display trace.",
                            fontSize = 11.sp,
                            color = Color(0xFF4B5563),
                            textAlign = TextAlign.Center,
                            fontFamily = FontFamily.Monospace
                        )
                    }
                } else {
                    LazyColumn(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.spacedBy(4.dp),
                        reverseLayout = false
                    ) {
                        items(logs) { log ->
                            Row(
                                modifier = Modifier.fillMaxWidth(),
                                horizontalArrangement = Arrangement.spacedBy(6.dp)
                            ) {
                                val levelColor = when (log.level) {
                                    "SUCCESS" -> Color(0xFF10B981)
                                    "WARN" -> Color(0xFFF59E0B)
                                    "ERROR" -> Color(0xFFEF4444)
                                    else -> Color(0xFF38BDF8)
                                }
                                Text(
                                    text = "[${log.level}]",
                                    color = levelColor,
                                    fontSize = 10.sp,
                                    fontFamily = FontFamily.Monospace,
                                    fontWeight = FontWeight.Bold,
                                    modifier = Modifier.width(62.dp)
                                )
                                Text(
                                    text = log.message,
                                    color = Color(0xFFE2E8F0),
                                    fontSize = 10.sp,
                                    fontFamily = FontFamily.Monospace,
                                    modifier = Modifier.weight(1f)
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}