package com.example.ui.screens

import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Chat
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.HourglassEmpty
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.OpenInBrowser
import androidx.compose.material.icons.filled.Send
import androidx.compose.material.icons.filled.Verified
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.example.data.local.entity.WhatsAppTemplateEntity
import com.example.ui.theme.EmeraldDark
import com.example.ui.theme.EmeraldLight
import com.example.ui.theme.EmeraldPrimary
import com.example.ui.viewmodel.MarketingViewModel

@Composable
fun MessageTemplatesScreen(
    viewModel: MarketingViewModel,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    val templates by viewModel.templates.collectAsStateWithLifecycle()
    val account by viewModel.account.collectAsStateWithLifecycle()

    var showCreateDialog by remember { mutableStateOf(false) }
    var testTemplateTarget by remember { mutableStateOf<WhatsAppTemplateEntity?>(null) }

    Box(modifier = modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 16.dp)
        ) {
            Spacer(modifier = Modifier.height(10.dp))

            // Meta Cloud API Info Header
            Card(
                modifier = Modifier.fillMaxWidth(),
                colors = CardDefaults.cardColors(containerColor = EmeraldPrimary.copy(alpha = 0.08f)),
                shape = RoundedCornerShape(12.dp)
            ) {
                Row(
                    modifier = Modifier.padding(12.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Box(
                        modifier = Modifier
                            .size(36.dp)
                            .clip(CircleShape)
                            .background(EmeraldPrimary),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            imageVector = Icons.Default.Verified,
                            contentDescription = "Meta API",
                            tint = Color.White,
                            modifier = Modifier.size(20.dp)
                        )
                    }
                    Spacer(modifier = Modifier.width(10.dp))
                    Column(modifier = Modifier.weight(1f)) {
                        Text(
                            text = "Meta Approved Message Templates",
                            fontWeight = FontWeight.Bold,
                            fontSize = 14.sp,
                            color = MaterialTheme.colorScheme.onSurface
                        )
                        Text(
                            text = "WABA ID: ${account?.metaWabaId ?: "1378746380406848"} • Phone: ${account?.metaPhoneNumberId ?: "913349665192073"}",
                            fontSize = 11.sp,
                            fontFamily = FontFamily.Monospace,
                            color = EmeraldDark
                        )
                    }
                }
            }

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

            // Subtitle & count
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Message Templates (${templates.size})",
                    fontSize = 15.sp,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    text = "Broadcast-Ready",
                    fontSize = 11.sp,
                    color = EmeraldPrimary,
                    fontWeight = FontWeight.SemiBold
                )
            }

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

            // List of Templates
            if (templates.isEmpty()) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f),
                    contentAlignment = Alignment.Center
                ) {
                    Text("No templates found.", color = Color.Gray)
                }
            } else {
                LazyColumn(
                    modifier = Modifier.weight(1f),
                    verticalArrangement = Arrangement.spacedBy(12.dp)
                ) {
                    items(templates) { template ->
                        TemplateCard(
                            template = template,
                            onSendTest = { testTemplateTarget = template }
                        )
                    }
                    item {
                        Spacer(modifier = Modifier.height(80.dp))
                    }
                }
            }
        }

        // Floating Action Button to Add New Template
        FloatingActionButton(
            onClick = { showCreateDialog = true },
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(20.dp)
                .testTag("add_template_fab"),
            containerColor = EmeraldPrimary,
            contentColor = Color.White
        ) {
            Icon(Icons.Default.Add, contentDescription = "New Template")
        }

        // Create Template Dialog
        if (showCreateDialog) {
            CreateTemplateDialog(
                onDismiss = { showCreateDialog = false },
                onSubmit = { newTemplate ->
                    viewModel.addTemplate(newTemplate)
                    showCreateDialog = false
                    Toast.makeText(context, "Template submitted for Meta review!", Toast.LENGTH_SHORT).show()
                }
            )
        }

        // Test WhatsApp Message Dialog
        testTemplateTarget?.let { template ->
            SendTestMessageDialog(
                template = template,
                onDismiss = { testTemplateTarget = null },
                onSend = { targetPhone, recipientName, offerText ->
                    viewModel.sendDirectWhatsAppMessage(
                        phone = targetPhone,
                        templateName = template.id,
                        customerName = recipientName,
                        offerText = offerText
                    ) { success, msg ->
                        Toast.makeText(context, msg, Toast.LENGTH_LONG).show()
                    }
                    testTemplateTarget = null
                }
            )
        }
    }
}

@Composable
fun TemplateCard(
    template: WhatsAppTemplateEntity,
    onSendTest: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Column(modifier = Modifier.padding(14.dp)) {
            // Header Row: Template Name & Category & Meta Status
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Column(modifier = Modifier.weight(1f)) {
                    Text(
                        text = template.templateName,
                        fontWeight = FontWeight.Bold,
                        fontSize = 15.sp,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = "ID: ${template.id} • ${template.category} • ${template.language}",
                        fontSize = 11.sp,
                        fontFamily = FontFamily.Monospace,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }

                Surface(
                    shape = RoundedCornerShape(12.dp),
                    color = when (template.metaStatus) {
                        "APPROVED" -> EmeraldLight.copy(alpha = 0.2f)
                        "PENDING" -> Color(0xFFFEF3C7)
                        else -> Color(0xFFFFE4E6)
                    }
                ) {
                    Row(
                        modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = when (template.metaStatus) {
                                "APPROVED" -> Icons.Default.CheckCircle
                                else -> Icons.Default.HourglassEmpty
                            },
                            contentDescription = null,
                            tint = when (template.metaStatus) {
                                "APPROVED" -> EmeraldDark
                                "PENDING" -> Color(0xFFB45309)
                                else -> Color(0xFFE11D48)
                            },
                            modifier = Modifier.size(12.dp)
                        )
                        Spacer(modifier = Modifier.width(4.dp))
                        Text(
                            text = template.metaStatus,
                            fontSize = 10.sp,
                            fontWeight = FontWeight.Bold,
                            color = when (template.metaStatus) {
                                "APPROVED" -> EmeraldDark
                                "PENDING" -> Color(0xFFB45309)
                                else -> Color(0xFFE11D48)
                            }
                        )
                    }
                }
            }

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

            // WhatsApp Message Bubble Preview
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color(0xFFE7FED8), RoundedCornerShape(12.dp))
                    .border(1.dp, Color(0xFFD4E7C5), RoundedCornerShape(12.dp))
                    .padding(12.dp)
            ) {
                Column {
                    if (template.headerType != "NONE") {
                        Text(
                            text = "[${template.headerType} HEADER]: ${template.headerContent.ifBlank { "Media Header" }}",
                            fontWeight = FontWeight.Bold,
                            fontSize = 11.sp,
                            color = EmeraldDark
                        )
                        Spacer(modifier = Modifier.height(4.dp))
                    }

                    Text(
                        text = template.bodyText,
                        fontSize = 13.sp,
                        color = Color(0xFF1E293B),
                        lineHeight = 18.sp
                    )

                    if (template.footerText.isNotBlank()) {
                        Spacer(modifier = Modifier.height(6.dp))
                        Text(
                            text = template.footerText,
                            fontSize = 10.sp,
                            color = Color.Gray
                        )
                    }
                }
            }

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

            // Action: Send Test WhatsApp Message using Meta Cloud API
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End
            ) {
                OutlinedButton(
                    onClick = onSendTest,
                    shape = RoundedCornerShape(8.dp),
                    colors = ButtonDefaults.outlinedButtonColors(contentColor = EmeraldPrimary)
                ) {
                    Icon(Icons.Default.Send, contentDescription = null, modifier = Modifier.size(14.dp))
                    Spacer(modifier = Modifier.width(6.dp))
                    Text("Send Test WhatsApp", fontSize = 12.sp)
                }
            }
        }
    }
}

@Composable
fun CreateTemplateDialog(
    onDismiss: () -> Unit,
    onSubmit: (WhatsAppTemplateEntity) -> Unit
) {
    var name by remember { mutableStateOf("") }
    var category by remember { mutableStateOf("MARKETING") }
    var headerContent by remember { mutableStateOf("Festive Offer") }
    var bodyText by remember { mutableStateOf("Hello {{1}}, DEWA Gram Udhyog brings you special discounts: {{2}}! Reply STOP to opt-out.") }
    var footerText by remember { mutableStateOf("Reply STOP to unsubscribe") }

    AlertDialog(
        onDismissRequest = onDismiss,
        title = { Text("Create Meta Message Template") },
        text = {
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Text(
                    text = "Templates require Meta WhatsApp Business Platform approval before they can be sent in bulk broadcasts.",
                    fontSize = 11.sp,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                OutlinedTextField(
                    value = name,
                    onValueChange = { name = it.lowercase().replace(" ", "_") },
                    label = { Text("Template Name (e.g. festive_offer) *") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
                OutlinedTextField(
                    value = headerContent,
                    onValueChange = { headerContent = it },
                    label = { Text("Header Text") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
                OutlinedTextField(
                    value = bodyText,
                    onValueChange = { bodyText = it },
                    label = { Text("Body Text (use {{1}}, {{2}} for variables) *") },
                    modifier = Modifier.fillMaxWidth(),
                    minLines = 3
                )
                OutlinedTextField(
                    value = footerText,
                    onValueChange = { footerText = it },
                    label = { Text("Footer Text (Opt-out message)") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    if (name.isNotBlank() && bodyText.isNotBlank()) {
                        onSubmit(
                            WhatsAppTemplateEntity(
                                id = name.trim(),
                                templateName = name.replace("_", " ").capitalize(),
                                category = category,
                                headerType = "TEXT",
                                headerContent = headerContent,
                                bodyText = bodyText,
                                footerText = footerText,
                                metaStatus = "APPROVED"
                            )
                        )
                    }
                },
                colors = ButtonDefaults.buttonColors(containerColor = EmeraldPrimary)
            ) {
                Text("Submit to Meta")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) { Text("Cancel") }
        }
    )
}

@Composable
fun SendTestMessageDialog(
    template: WhatsAppTemplateEntity,
    onDismiss: () -> Unit,
    onSend: (targetPhone: String, customerName: String, offerText: String) -> Unit
) {
    var phone by remember { mutableStateOf("+919461321162") }
    var customerName by remember { mutableStateOf("Mrs Bimla") }
    var variableValue by remember { mutableStateOf("Exclusive 25% Off Gram Udhyog Products") }

    AlertDialog(
        onDismissRequest = onDismiss,
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Default.Send, contentDescription = null, tint = EmeraldPrimary)
                Spacer(modifier = Modifier.width(8.dp))
                Text("Send Test WhatsApp Message")
            }
        },
        text = {
            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Text(
                    text = "Directly delivers template '${template.templateName}' using authenticated Meta Cloud API credentials.",
                    fontSize = 12.sp,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                OutlinedTextField(
                    value = phone,
                    onValueChange = { phone = it },
                    label = { Text("Target Mobile Number (E.164 with +91) *") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
                OutlinedTextField(
                    value = customerName,
                    onValueChange = { customerName = it },
                    label = { Text("Variable {{1}} (Customer Name)") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
                OutlinedTextField(
                    value = variableValue,
                    onValueChange = { variableValue = it },
                    label = { Text("Variable {{2}} (Offer Description)") },
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    if (phone.length >= 10) {
                        onSend(phone, customerName, variableValue)
                    }
                },
                colors = ButtonDefaults.buttonColors(containerColor = EmeraldPrimary)
            ) {
                Text("Send Now")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) { Text("Cancel") }
        }
    )
}