package eu.gaudian.translator.view.hints

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import dev.jeziellago.compose.markdowntext.MarkdownText
import eu.gaudian.translator.R

/**
 * Markdown-styled hint content using the jeziellago compose-markdown library.
 * This provides beautiful, consistent rendering of markdown content with
 * support for headings, lists, tables, code blocks, and more.
 *
 * Usage:
 * - Create a .md file in assets/hints/ (e.g., "api_key_hint.md")
 * - Load it using context.assets.open() or pass raw markdown string
 * - Use MarkdownHint composable for styled rendering
 *
 * Supported markdown:
 * - Headings (# ## ###)
 * - Bold (**text**) and italic (*text*)
 * - Lists (- item, 1. item)
 * - Tables (| col | col |)
 * - Code blocks (```code```)
 * - Blockquotes (> quote)
 * - Links ([text](url))
 */
@Composable
fun MarkdownHint(
    markdownContent: String,
    modifier: Modifier = Modifier,
    title: String? = null
) {
    val scrollState = rememberScrollState()

    Column(
        modifier = modifier
            .fillMaxWidth()
            .verticalScroll(scrollState)
            .padding(16.dp)
    ) {
        // Optional title with icon header
        title?.let {
            HeaderWithIcon(
                title = it,
                subtitle = null
            )
            Spacer(modifier = Modifier.height(16.dp))
        }

        // Render markdown
        MarkdownText(
            markdown = markdownContent,
            modifier = Modifier.fillMaxWidth(),
            style = MaterialTheme.typography.bodyMedium.copy(
                color = MaterialTheme.colorScheme.onSurface
            )
        )
    }
}

/**
 * Preview for MarkdownHint with sample content.
 */
@Preview
@Composable
fun MarkdownHintPreview() {
    val sampleMarkdown = """
# Welcome to the Hint System

This is a **markdown-based** hint that provides _beautiful_ and consistent styling.

## Features

- **Rich text formatting** - bold, italic, strikethrough
- **Headings** - H1 through H6 levels
- **Lists** - ordered and unordered
- **Code blocks** - with syntax highlighting
- **Tables** - for structured data
- **Links** - styled clickable references
- **Blockquotes** - for highlighted content

## How to Use

1. Create a `.md` file in `assets/hints/`
2. Load it using `context.assets.open("hints/your_hint.md")`
3. Pass the content to `MarkdownHint()`

> **Tip:** You can also embed UI elements by combining markdown with HintElements!

## Code Example

```kotlin
val markdown = loadMarkdownFromAssets("hints/scan_hint.md")
MarkdownHint(
    markdownContent = markdown,
    title = "Scan Hint"
)
```

## Table Example

| Feature | Status | Priority |
|---------|--------|----------|
| Headings | ✅ | High |
| Lists | ✅ | High |
| Tables | ✅ | Medium |

---

*Last updated: 2024-01-15*
    """.trimIndent()

    MaterialTheme {
        MarkdownHint(
            markdownContent = sampleMarkdown,
            title = stringResource(R.string.hint_title_hints_overview)
        )
    }
}

/**
 * Data class for loading markdown content from assets.
 */
data class MarkdownHintData(
    val fileName: String,
    val titleRes: Int
) {
    /**
     * Load and return the markdown content as a string.
     */
    fun loadContent(androidContext: android.content.Context): String {
        return androidContext.assets.open("hints/$fileName")
            .bufferedReader()
            .use { it.readText() }
    }
}
