package com.swoosh.microblog.ui.pages

import android.content.Intent
import android.net.Uri
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.swoosh.microblog.data.MobiledocBuilder
import com.swoosh.microblog.data.model.GhostPage
import com.swoosh.microblog.ui.components.ConfirmationDialog

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PagesScreen(
    onBack: () -> Unit,
    viewModel: PagesViewModel = viewModel()
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    if (uiState.isEditing || uiState.isCreating) {
        PageEditorScreen(
            page = uiState.editingPage,
            isCreating = uiState.isCreating,
            isLoading = uiState.isLoading,
            error = uiState.error,
            blogUrl = viewModel.getBlogUrl(),
            onSave = { title, content, slug, status ->
                viewModel.savePage(title, content, slug, status)
            },
            onUpdate = { id, page ->
                viewModel.updatePage(id, page)
            },
            onCancel = { viewModel.cancelEditing() }
        )
    } else {
        PagesListScreen(
            pages = uiState.pages,
            isLoading = uiState.isLoading,
            error = uiState.error,
            onBack = onBack,
            onCreatePage = { viewModel.startCreating() },
            onEditPage = { page -> viewModel.startEditing(page) },
            onDeletePage = { id -> viewModel.deletePage(id) },
            onRefresh = { viewModel.loadPages() }
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
private fun PagesListScreen(
    pages: List<GhostPage>,
    isLoading: Boolean,
    error: String?,
    onBack: () -> Unit,
    onCreatePage: () -> Unit,
    onEditPage: (GhostPage) -> Unit,
    onDeletePage: (String) -> Unit,
    onRefresh: () -> Unit
) {
    var deletePageId by remember { mutableStateOf<String?>(null) }
    var deletePageTitle by remember { mutableStateOf("") }
    var expandedMenuPageId by remember { mutableStateOf<String?>(null) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Pages") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
                    }
                },
                actions = {
                    IconButton(onClick = onCreatePage) {
                        Icon(Icons.Default.Add, "New page")
                    }
                }
            )
        }
    ) { padding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
        ) {
            if (isLoading && pages.isEmpty()) {
                CircularProgressIndicator(
                    modifier = Modifier.align(Alignment.Center)
                )
            } else if (pages.isEmpty()) {
                Text(
                    text = "No pages yet.",
                    style = MaterialTheme.typography.bodyLarge,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    modifier = Modifier.align(Alignment.Center)
                )
            } else {
                LazyColumn(
                    contentPadding = PaddingValues(16.dp),
                    verticalArrangement = Arrangement.spacedBy(12.dp)
                ) {
                    items(pages, key = { it.id ?: it.hashCode() }) { page ->
                        Box {
                            OutlinedCard(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .combinedClickable(
                                        onClick = { onEditPage(page) },
                                        onLongClick = { expandedMenuPageId = page.id }
                                    )
                            ) {
                                Column(
                                    modifier = Modifier.padding(16.dp)
                                ) {
                                    Text(
                                        text = page.title ?: "Untitled",
                                        style = MaterialTheme.typography.titleMedium
                                    )
                                    if (!page.slug.isNullOrBlank()) {
                                        Text(
                                            text = "/${page.slug}",
                                            style = MaterialTheme.typography.bodySmall,
                                            color = MaterialTheme.colorScheme.onSurfaceVariant
                                        )
                                    }
                                    Spacer(modifier = Modifier.height(8.dp))
                                    StatusChip(status = page.status ?: "draft")
                                }
                            }

                            DropdownMenu(
                                expanded = expandedMenuPageId == page.id,
                                onDismissRequest = { expandedMenuPageId = null }
                            ) {
                                DropdownMenuItem(
                                    text = { Text("Edit") },
                                    onClick = {
                                        expandedMenuPageId = null
                                        onEditPage(page)
                                    }
                                )
                                DropdownMenuItem(
                                    text = { Text("Delete") },
                                    onClick = {
                                        expandedMenuPageId = null
                                        deletePageId = page.id
                                        deletePageTitle = page.title ?: "Untitled"
                                    }
                                )
                            }
                        }
                    }
                }
            }

            if (error != null) {
                Snackbar(
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                        .padding(16.dp),
                    action = {
                        TextButton(onClick = onRefresh) { Text("Retry") }
                    }
                ) {
                    Text(error)
                }
            }
        }
    }

    if (deletePageId != null) {
        ConfirmationDialog(
            title = "Delete Page?",
            message = "Delete \"$deletePageTitle\"? This cannot be undone.",
            confirmLabel = "Delete",
            onConfirm = {
                deletePageId?.let { onDeletePage(it) }
                deletePageId = null
            },
            onDismiss = { deletePageId = null }
        )
    }
}

@Composable
private fun StatusChip(status: String) {
    val (color, label) = when (status) {
        "published" -> Color(0xFF4CAF50) to "Published"
        else -> Color(0xFF9C27B0) to "Draft"
    }
    AssistChip(
        onClick = {},
        label = { Text(label, style = MaterialTheme.typography.labelSmall) },
        colors = AssistChipDefaults.assistChipColors(
            labelColor = color
        ),
        border = BorderStroke(1.dp, color.copy(alpha = 0.5f))
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun PageEditorScreen(
    page: GhostPage?,
    isCreating: Boolean,
    isLoading: Boolean,
    error: String?,
    blogUrl: String?,
    onSave: (title: String, content: String, slug: String?, status: String) -> Unit,
    onUpdate: (id: String, page: GhostPage) -> Unit,
    onCancel: () -> Unit
) {
    val context = LocalContext.current
    val isNew = isCreating && page == null

    var title by remember(page) { mutableStateOf(page?.title ?: "") }
    var content by remember(page) { mutableStateOf(page?.plaintext ?: "") }
    var slug by remember(page) { mutableStateOf(page?.slug ?: "") }
    var selectedStatus by remember(page) {
        mutableStateOf(if (page?.status == "published") "published" else "draft")
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(if (isNew) "New page" else "Edit page") },
                navigationIcon = {
                    IconButton(onClick = onCancel) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, "Cancel")
                    }
                },
                actions = {
                    IconButton(
                        onClick = {
                            if (isNew) {
                                onSave(title, content, slug.takeIf { it.isNotBlank() }, selectedStatus)
                            } else {
                                val mobiledoc = MobiledocBuilder.build(content)
                                val updatedPage = GhostPage(
                                    title = title,
                                    mobiledoc = mobiledoc,
                                    slug = slug.takeIf { it.isNotBlank() },
                                    status = selectedStatus,
                                    updated_at = page?.updated_at
                                )
                                page?.id?.let { onUpdate(it, updatedPage) }
                            }
                        },
                        enabled = title.isNotBlank() && !isLoading
                    ) {
                        Icon(Icons.Default.Check, "Save")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(horizontal = 16.dp)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Spacer(modifier = Modifier.height(8.dp))

            OutlinedTextField(
                value = title,
                onValueChange = { title = it },
                label = { Text("Title *") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true
            )

            OutlinedTextField(
                value = content,
                onValueChange = { content = it },
                label = { Text("Content") },
                modifier = Modifier.fillMaxWidth(),
                minLines = 8
            )

            OutlinedTextField(
                value = slug,
                onValueChange = { slug = it },
                label = { Text("Slug (optional)") },
                modifier = Modifier.fillMaxWidth(),
                singleLine = true
            )

            // Status radio group
            Text("Status", style = MaterialTheme.typography.titleSmall)
            Column(modifier = Modifier.selectableGroup()) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .selectable(
                            selected = selectedStatus == "draft",
                            onClick = { selectedStatus = "draft" },
                            role = Role.RadioButton
                        )
                        .padding(vertical = 4.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    RadioButton(
                        selected = selectedStatus == "draft",
                        onClick = null
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text("Draft")
                }
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .selectable(
                            selected = selectedStatus == "published",
                            onClick = { selectedStatus = "published" },
                            role = Role.RadioButton
                        )
                        .padding(vertical = 4.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    RadioButton(
                        selected = selectedStatus == "published",
                        onClick = null
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text("Publish")
                }
            }

            // Open in browser for published pages
            if (!isNew && page?.status == "published" && !page.slug.isNullOrBlank() && blogUrl != null) {
                val pageUrl = "${blogUrl.removeSuffix("/")}/${page.slug}/"
                OutlinedButton(
                    onClick = {
                        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(pageUrl))
                        context.startActivity(intent)
                    },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Open in browser")
                }
            }

            // Revert to draft for published pages
            if (!isNew && page?.status == "published") {
                TextButton(
                    onClick = { selectedStatus = "draft" },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Revert to draft")
                }
            }

            if (isLoading) {
                LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
            }

            if (error != null) {
                Text(
                    text = error,
                    color = MaterialTheme.colorScheme.error,
                    style = MaterialTheme.typography.bodySmall
                )
            }

            Spacer(modifier = Modifier.height(16.dp))
        }
    }
}
