gradle  :composeApp:wasmJsBrowserDevelopmentRun

androidMain.dependencies {
    // 省略...

    // Ktor Android Impl
    implementation("io.ktor:ktor-client-okhttp:3.1.2")
}
commonMain.dependencies {
    // 省略...
    
    // HTTP Client
    implementation("io.ktor:ktor-client-core:3.1.2")

    // calc Hash
    implementation(platform("org.kotlincrypto.hash:bom:0.7.0"))
    implementation("org.kotlincrypto.hash:sha2")

    // calc Hmac-Hadh
    implementation(platform("org.kotlincrypto.macs:bom:0.7.0"))
    implementation("org.kotlincrypto.macs:hmac-sha2")

    // kotlinx.datetime
    implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.2")
}

@Composable
@Preview
fun App() {
    var showContent by remember { mutableStateOf(false) }

    MaterialTheme {
        Scaffold { innerPadding ->
            Column(
                modifier = Modifier.padding(innerPadding).fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = { showContent = !showContent }) {
                    Text("Click me!")
                }
                AnimatedVisibility(showContent) {
                    val greeting = remember { Greeting().greet() }
                    Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                        Image(painterResource(Res.drawable.compose_multiplatform), null)
                        Text("Compose: $greeting")
                    }
                }
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            App()
        }
    }
}

/** ISO8601 */
@OptIn(FormatStringsInDatetimeFormats::class)
private val amzDateFormat = DateTimeComponents.Format {
    byUnicodePattern("""yyyyMMdd'T'HHmmss'Z'""")
}

/** yyyyMMdd */
@OptIn(FormatStringsInDatetimeFormats::class)
private val yearMonthDayDateFormat = DateTimeComponents.Format {
    byUnicodePattern("yyyyMMdd")
}

/** AWS Sigv4 署名を作る */
@OptIn(ExperimentalStdlibApi::class)
internal fun generateAwsSign(
    url: String,
    httpMethod: String = "GET",
    contentType: String? = null,
    region: String = "ap-northeast-1",
    service: String = "s3",
    amzDateString: String,
    yyyyMMddString: String,
    secretAccessKey: String,
    accessKey: String,
    requestHeader: HashMap<String, String> = hashMapOf(),
    payloadSha256: String = "".sha256().toHexString()
): String {
    val httpUrl = Url(urlString = url)

    // リクエストヘッダーになければ追加
    requestHeader.putIfAbsent("x-amz-date", amzDateString)
    requestHeader.putIfAbsent("host", httpUrl.host)
    if (contentType != null) {
        requestHeader.putIfAbsent("Content-Type", contentType)
    }
    requestHeader.putIfAbsent("x-amz-content-sha256", payloadSha256)

    // 1.正規リクエストを作成する
    // パス、クエリパラメータは URL エンコードする
    // リスト系はアルファベットでソート
    val canonicalUri = httpUrl.encodedPath.encodeURLPath().ifBlank { "/" }
    val canonicalQueryString = httpUrl.parameters
        .names()
        .map { it.encodeURLParameter() }
        .sortedBy { name -> name }
        .associateWith { name -> httpUrl.parameters[name]?.encodeURLParameter() }
        .toList()
        .joinToString(separator = "&") { (name, values) ->
            "$name=${values ?: ""}" // こっちはイコール
        }
    val canonicalHeaders = requestHeader
        .toList()
        .sortedBy { (name, _) -> name.lowercase() }
        .joinToString(separator = "\n") { (name, value) ->
            "${name.lowercase()}:${value.trim()}"
        } + "\n" // 末尾改行で終わる
    val signedHeaders = requestHeader
        .toList()
        .map { (name, _) -> name.lowercase() }
        .sorted()
        .joinToString(separator = ";")
    val hashedPayload = payloadSha256.lowercase()
    val canonicalRequest = httpMethod + "\n" + canonicalUri + "\n" + canonicalQueryString + "\n" + canonicalHeaders + "\n" + signedHeaders + "\n" + hashedPayload

    // 2.正規リクエストのハッシュを作成する。ペイロードと同じハッシュ関数
    val hashedCanonicalRequest = canonicalRequest.sha256().toHexString()

    // 3.署名文字列を作成する
    val algorithm = "AWS4-HMAC-SHA256"
    val requestDateTime = amzDateString
    val credentialScope = "$yyyyMMddString/$region/$service/aws4_request"
    val stringToSign = algorithm + "\n" + requestDateTime + "\n" + credentialScope + "\n" + hashedCanonicalRequest

    // 4.SigV4 の署名キーの取得
    val dateKey = "AWS4$secretAccessKey".toByteArray(Charsets.UTF_8).hmacSha256(message = yyyyMMddString)
    val dateRegionKey = dateKey.hmacSha256(message = region)
    val dateRegionServiceKey = dateRegionKey.hmacSha256(message = service)
    val signingKey = dateRegionServiceKey.hmacSha256(message = "aws4_request")

    // 5.署名を計算する
    val signature = signingKey.hmacSha256(message = stringToSign).toHexString().lowercase()

    // 6.リクエストヘッダーに署名を追加する
    val authorizationHeaderValue = algorithm + " " + "Credential=$accessKey/$credentialScope" + "," + "SignedHeaders=$signedHeaders" + "," + "Signature=$signature"
    return authorizationHeaderValue
}

/** ISO8601 の形式でフォーマットする */
internal fun Instant.formatAmzDateString(): String {
    return this.format(amzDateFormat)
}

/** yyyy/MM/dd の形式でフォーマットする */
internal fun Instant.formatYearMonthDayDateString(): String {
    return this.format(yearMonthDayDateFormat)
}

/** バイト配列から SHA-256 */
internal fun ByteArray.sha256(): ByteArray {
    return SHA256().digest(this)
}

/** Java の putIfAbsent 相当 */
private fun <K, V> HashMap<K, V>.putIfAbsent(key: K, value: V): V? {
    var v = this.get(key)
    if (v == null) {
        v = put(key, value)
    }
    return v
}

/** 文字列から SHA-256 */
private fun String.sha256(): ByteArray {
    return this.toByteArray(Charsets.UTF_8).sha256()
}

/**
 * HMAC-SHA256 を計算
 * this がキーです
 */
private fun ByteArray.hmacSha256(message: String): ByteArray {
    val secretKey = this
    return HmacSHA256(secretKey).doFinal(message.toByteArray(Charsets.UTF_8))
}

<uses-permission android:name="android.permission.INTERNET" />

/** S3 クライアント */
object AwsS3Client {

    // TODO 各自入力してください
    private const val ACCESS_KEY = ""
    private const val SECRET_ACCESS_KEY = ""
    private const val REGION = "ap-northeast-1"

    // Kotlin Multiplatform HTTP Client
    private val httpClient = HttpClient()

    // xml パーサーの代わりに正規表現
    private val regexKey = "<Key>(.*?)</Key>".toRegex()
    private val regexLastModified = "<LastModified>(.*?)</LastModified>".toRegex()

    /**
     * バケット内のオブジェクト一覧を取得する
     * 
     * @param bucketName バケット名
     */
    suspend fun getObjectList(bucketName: String): List<ListObject> {
        val now = Clock.System.now()
        val url = "https://s3.$REGION.amazonaws.com/$bucketName/?list-type=2"
        val amzDateString = now.formatAmzDateString()
        val yyyyMMddString = now.formatYearMonthDayDateString()

        // 署名を作成
        val requestHeader = hashMapOf(
            "x-amz-date" to amzDateString,
            "host" to "s3.$REGION.amazonaws.com"
        )
        val signature = generateAwsSign(
            url = url,
            httpMethod = "GET",
            contentType = null,
            region = REGION,
            service = "s3",
            amzDateString = amzDateString,
            yyyyMMddString = yyyyMMddString,
            secretAccessKey = SECRET_ACCESS_KEY,
            accessKey = ACCESS_KEY,
            requestHeader = requestHeader
        )

        // レスポンス xml を取得
        val response = httpClient.get {
            url(url)
            headers {
                // 署名をリクエストヘッダーにつける
                requestHeader.forEach { (name, value) ->
                    this[name] = value
                }
                this["Authorization"] = signature
            }
        }

        // XML パーサー入れるまでもないので、正規表現で戦う、、、
        val responseXml = response.bodyAsText()
        val keyList = regexKey.findAll(responseXml).toList().map { it.groupValues[1] }
        val lastModifiedList = regexLastModified.findAll(responseXml).toList().map { it.groupValues[1] }

        // data class
        // 同じ数ずつあるはず
        return keyList.indices.map { index ->
            ListObject(
                key = keyList[index],
                lastModified = lastModifiedList[index]
            )
        }
    }

    /**
     * S3 バケットにデータを投稿する
     *
     * @param bucketName バケット名
     * @param key オブジェクトのキー（名前）
     * @param byteArray バイナリデータ
     */
    @OptIn(ExperimentalStdlibApi::class)
    suspend fun putObject(
        bucketName: String,
        key: String,
        byteArray: ByteArray
    ): Boolean {
        val now = Clock.System.now()
        val url = "https://s3.$REGION.amazonaws.com/$bucketName/$key"
        val amzDateString = now.formatAmzDateString()
        val yyyyMMddString = now.formatYearMonthDayDateString()

        // 署名を作成
        val requestHeader = hashMapOf(
            "x-amz-date" to amzDateString,
            "host" to "s3.$REGION.amazonaws.com"
        )
        val signature = generateAwsSign(
            url = url,
            httpMethod = "PUT",
            contentType = null,
            region = REGION,
            service = "s3",
            amzDateString = amzDateString,
            yyyyMMddString = yyyyMMddString,
            secretAccessKey = SECRET_ACCESS_KEY,
            accessKey = ACCESS_KEY,
            requestHeader = requestHeader,
            payloadSha256 = byteArray.sha256().toHexString()
        )

        // PutObject する
        val response = httpClient.put {
            url(url)
            headers {
                requestHeader.forEach { (name, value) ->
                    this[name] = value
                }
                this["Authorization"] = signature
            }
            setBody(byteArray)
        }
        return response.status == HttpStatusCode.OK
    }

    /**
     * オブジェクトを削除する
     *
     * @param bucketName バケット名
     * @param key オブジェクトのキー
     */
    suspend fun deleteObject(
        bucketName: String,
        key: String
    ): Boolean {
        val now = Clock.System.now()
        val url = "https://s3.$REGION.amazonaws.com/$bucketName/$key"
        val amzDateString = now.formatAmzDateString()
        val yyyyMMddString = now.formatYearMonthDayDateString()

        // 署名を作成
        val requestHeader = hashMapOf(
            "x-amz-date" to amzDateString,
            "host" to "s3.$REGION.amazonaws.com"
        )
        val signature = generateAwsSign(
            url = url,
            httpMethod = "DELETE",
            contentType = null,
            region = REGION,
            service = "s3",
            amzDateString = amzDateString,
            yyyyMMddString = yyyyMMddString,
            secretAccessKey = SECRET_ACCESS_KEY,
            accessKey = ACCESS_KEY,
            requestHeader = requestHeader
        )

        // 削除する
        val response = httpClient.delete {
            url(url)
            headers {
                // 署名をリクエストヘッダーにつける
                requestHeader.forEach { (name, value) ->
                    this[name] = value
                }
                this["Authorization"] = signature
            }
        }
        // 204 No Content を返す
        return response.status == HttpStatusCode.NoContent
    }

    data class ListObject(
        val key: String,
        val lastModified: String
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun App() {

    // API を叩く
    val objectList = remember { mutableStateOf<List<AwsS3Client.ListObject>?>(null) }
    LaunchedEffect(key1 = Unit) {
        objectList.value = AwsS3Client.getObjectList(bucketName = "") // TODO 各自バケット名入れてください
    }

    MaterialTheme {
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = "S3 Bucket") }) }
        ) { innerPadding ->

            LazyColumn(contentPadding = innerPadding) {
                if (objectList.value == null) {
                    // 読み込み中
                    item {
                        Box(
                            modifier = Modifier
                                .height(100.dp)
                                .fillMaxWidth(),
                            contentAlignment = Alignment.Center
                        ) {
                            CircularProgressIndicator()
                        }
                    }
                } else {
                    // 一覧画面
                    items(
                        items = objectList.value!!,
                        key = { it.key }
                    ) { obj ->
                        Column(modifier = Modifier.fillMaxWidth()) {
                            Text(text = obj.key, fontSize = 16.sp)
                            Text(text = obj.lastModified)
                        }
                        HorizontalDivider()
                    }
                }
            }
        }
    }
}

interface Platform {
    val name: String
}

expect fun getPlatform(): Platform

fun interface PhotoPicker {

    /**
     * 写真ピッカーを開く。
     * 選び終わるまで一時停止し、選んだ画像を[PhotoPickerResult]で返す。
     * 選ぶのを辞めたら null を返す
     */
    suspend fun startPhotoPicker(): PhotoPickerResult?

    data class PhotoPickerResult(
        val name: String,
        val byteArray: ByteArray
    )

}

expect val photoPicker: PhotoPicker

/** Android の PhotoPicker を開くことを通達する Channel */
val openPlatformPhotoPickerSignalChannel = Channel<Unit>()

/** Android の PhotoPicker の選択結果を通達する Channel */
val resultPlatformPhotoPickerSignalChannel = Channel<PhotoPicker.PhotoPickerResult?>()

/**
 * Android 側
 * 写真ピッカーの処理
 */
actual val photoPicker = PhotoPicker {
    // 開くことを要求
    openPlatformPhotoPickerSignalChannel.send(Unit)
    // 結果が送られてくるまで待つ
    resultPlatformPhotoPickerSignalChannel.receive()
}

/** [PhotoPicker]を利用するためにこの関数を呼び出してください。 */
@Composable
fun PhotoPickerInitEffect() {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()
    val platformPhotoPicker = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.PickVisualMedia(),
        onResult = { uri ->
            scope.launch(Dispatchers.IO) {

                // 選んでない
                if (uri == null) {
                    resultPlatformPhotoPickerSignalChannel.send(null)
                    return@launch
                }

                // 名前は取得できないので、適当に作る
                val extension = when (context.contentResolver.getType(uri)) {
                    "image/jpeg" -> ".jpg"
                    "image/png" -> ".png"
                    "image/webp" -> ".webp"
                    else -> null
                }
                if (extension == null) {
                    resultPlatformPhotoPickerSignalChannel.send(null)
                    return@launch
                }

                // バイナリを取得して返す
                resultPlatformPhotoPickerSignalChannel.send(
                    PhotoPicker.PhotoPickerResult(
                        name = "${System.currentTimeMillis()}$extension",
                        byteArray = context.contentResolver.openInputStream(uri)!!.use { it.readBytes() }
                    )
                )
            }
        }
    )

    LaunchedEffect(key1 = Unit) {
        // 来たら開く
        for (unuse in openPlatformPhotoPickerSignalChannel) {
            platformPhotoPicker.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            PhotoPickerInitEffect() // PhotoPicker.kt のため
            App()
        }
    }
}

/** <input> */
val inputElement = (document.createElement("input") as HTMLInputElement).apply {
    setAttribute("type", "file")
    setAttribute("accept", ".jpg, .png, .webp")
}

/** ファイル取得 Flow */
val inputChangeEventFlow = callbackFlow {
    // ファイル選択イベント
    inputElement.onchange = {
        trySend(inputElement.files?.get(0))
        Unit
    }
    // 選択画面を閉じたイベント
    inputElement.oncancel = {
        trySend(null)
    }
    // ファイル
    awaitClose {
        inputElement.onchange = null
        inputElement.oncancel = null
    }
}

/**
 * Web 側
 * 写真ピッカーの処理
 */

actual val photoPicker = PhotoPicker {
    // 開く
    inputElement.click()

    // 選ぶのを待つ
    val file = inputChangeEventFlow.firstOrNull()

    // 返す
    if (file == null) {
        null
    } else {
        PhotoPicker.PhotoPickerResult(
            name = file.name,
            byteArray = file.readBytes().toByteArray()
        )
    }
}

/** [File]からバイナリを取得する */
private suspend fun File.readBytes() = suspendCoroutine { continuation ->
    val fileReader = FileReader()
    fileReader.onload = {
        val arrayBuffer = fileReader.result as ArrayBuffer
        continuation.resume(Int8Array(arrayBuffer))
    }
    fileReader.readAsArrayBuffer(this)
}

val snackbarHostState = remember { SnackbarHostState() }

Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    topBar = {
        TopAppBar(title = { Text(text = "S3 Bucket") })
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text(text = "Upload") },
            icon = { Icon(imageVector = Icons.Outlined.Add, contentDescription = null) },
            onClick = {
                scope.launch {
                    // 投稿処理
                    val (name, byteArray) = photoPicker.startPhotoPicker() ?: return@launch
                }
            }
        )
    }
) { innerPadding ->
    // 省略...
}

onClick = {
    scope.launch {
        // 投稿処理
        val (name, byteArray) = photoPicker.startPhotoPicker() ?: return@launch
        // S3 に投げる
        val isSuccessful = AwsS3Client.putObject(
            bucketName = "", // バケット名！！！！
            key = name,
            byteArray = byteArray
        )
        snackbarHostState.showSnackbar(message = if (isSuccessful) "Successful" else "Error")
    }
}

gradle  :composeApp:wasmJsBrowserDistribution

// Web で日本語を表示できないので、MaterialTheme でフォントを伝搬させる
val bundleFont = FontFamily(Font(resource = Res.font.KosugiMaru_Regular))
val overrideFontFamily = MaterialTheme.typography.copy(
    displayLarge = MaterialTheme.typography.displayLarge.copy(fontFamily = bundleFont),
    displayMedium = MaterialTheme.typography.displayMedium.copy(fontFamily = bundleFont),
    displaySmall = MaterialTheme.typography.displaySmall.copy(fontFamily = bundleFont),
    headlineLarge = MaterialTheme.typography.headlineLarge.copy(fontFamily = bundleFont),
    headlineMedium = MaterialTheme.typography.headlineMedium.copy(fontFamily = bundleFont),
    headlineSmall = MaterialTheme.typography.headlineSmall.copy(fontFamily = bundleFont),
    titleLarge = MaterialTheme.typography.titleLarge.copy(fontFamily = bundleFont),
    titleMedium = MaterialTheme.typography.titleMedium.copy(fontFamily = bundleFont),
    titleSmall = MaterialTheme.typography.titleSmall.copy(fontFamily = bundleFont),
    bodyLarge = MaterialTheme.typography.bodyLarge.copy(fontFamily = bundleFont),
    bodyMedium = MaterialTheme.typography.bodyMedium.copy(fontFamily = bundleFont),
    bodySmall = MaterialTheme.typography.bodySmall.copy(fontFamily = bundleFont),
    labelLarge = MaterialTheme.typography.labelLarge.copy(fontFamily = bundleFont),
    labelMedium = MaterialTheme.typography.labelMedium.copy(fontFamily = bundleFont),
    labelSmall = MaterialTheme.typography.labelSmall.copy(fontFamily = bundleFont),
)

MaterialTheme(typography = overrideFontFamily) {
    // この中の Text() には自前フォントが適用されていr
}