/// <reference lib="dom" />

import { Gamedata, ItemID, ItemIndex, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
import { FALLBACK_ITEM } from "./tiles.ts";
import { FALLBACK_TILE, ITEMS, TILES } from "./tiles.ts";
import { V2, add_v2, ceil_v2, floor_v2, length, lerp_exp_v2_mut, normalize } from "./util.ts";

let ctx: CanvasRenderingContext2D;
let canvas: HTMLCanvasElement;
let ws: WebSocket;
document.addEventListener("DOMContentLoaded", () => {
    ws = new WebSocket(`${window.location.protocol.endsWith("s:") ? "wss" : "ws"}://${window.location.hostname}:27032/`)
    ws.onerror = console.error
    ws.onmessage = m => {
        packet(JSON.parse(m.data) as PacketC);
    }
    ws.onclose = () => console.log("close")
    ws.onopen = () => {
        console.log("open")
        send({ type: "join", name: "test" })
    }

    canvas = document.createElement("canvas");
    document.body.append(canvas)
    ctx = canvas.getContext("2d")!
    resize()
    globalThis.addEventListener("resize", resize)
    draw()

    document.addEventListener("keydown", ev => keyboard(ev, true))
    document.addEventListener("keyup", ev => keyboard(ev, false))
    document.addEventListener("contextmenu", ev => ev.preventDefault())
    setInterval(tick_update, 1000 / 25);
})

interface PlayerData { x: number; y: number, name: string, rot: number, hand?: ItemID, facing: V2 }
const players = new Map<PlayerID, PlayerData>()
interface ItemData { kind: ItemIndex, tile?: V2, player?: PlayerID, tracking_player: boolean, x: number, y: number }
const items = new Map<ItemID, ItemData>()
interface TileData { x: number; y: number, kind: TileIndex, items: ItemID[], active_progress?: number }
const tiles = new Map<string, TileData>()

let data: Gamedata = { item_names: [], tile_names: [] }

let my_id: PlayerID = -1
const camera: V2 = { x: 0, y: 0 }
const interact_target_anim: V2 = { x: 0, y: 0 }
let scale = 0

function send(p: PacketS) { ws.send(JSON.stringify(p)) }
function packet(p: PacketC) {
    if (!["position", "set_active"].includes(p.type)) console.log(p);
    switch (p.type) {
        case "joined":
            my_id = p.id
            data = p.data
            break;
        case "add_player":
            if (p.hand) items.set(p.hand[0], { kind: p.hand[1], player: p.id, tracking_player: true, x: 0, y: 0 })
            players.set(p.id, { x: 0, y: 0, name: p.name, rot: 0, hand: p.hand?.[0], facing: { x: 0, y: 1 } })
            break;
        case "remove_player":
            players.delete(p.id)
            break;
        case "position": {
            if (p.player == my_id) return; // we know better where we are
            const pl = players.get(p.player)!
            pl.x = p.pos[0]
            pl.y = p.pos[1]
            pl.rot = p.rot
            break;
        }
        case "take_item": {
            const item = items.get(p.item)!
            item.tracking_player = true
            item.player = p.player
            break;
        }
        case "put_item": {
            const item = items.get(p.item)!
            item.tracking_player = false
            item.tile = { x: p.pos[0], y: p.pos[1] }
            break;
        }
        case "produce_item":
            items.set(p.id, { kind: p.kind, x: p.pos[0] + 0.5, y: p.pos[1] + 0.5, tracking_player: false, tile: { x: p.pos[0], y: p.pos[1] } })
            tiles.get(p.pos.toString())!.items.push(p.id)
            break;
        case "consume_item": {
            const t = tiles.get(p.pos.toString())!
            t.items.splice(t.items.indexOf(p.id))
            items.delete(p.id)
            break;
        }
        case "set_active": {
            tiles.get(p.tile.toString())!.active_progress = p.progress
            break;
        }
        case "update_map":
            tiles.set(p.pos.toString(), { x: p.pos[0], y: p.pos[1], kind: p.tile, items: [] })
            break;
        default:
            console.warn("unknown packet", p);
    }
}

const keys_down = new Set();
const HANDLED_KEYS = ["KeyW", "KeyA", "KeyS", "KeyD", "Space"]
function keyboard(ev: KeyboardEvent, down: boolean) {
    if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault()
    let change;
    if (down) change = !keys_down.has(ev.code)
    else change = keys_down.has(ev.code)
    if (down) keys_down.add(ev.code)
    else keys_down.delete(ev.code)
    if (change && ev.code == "Space") interact(down)
}

function get_interact_target(): V2 | undefined {
    const me = players.get(my_id)
    if (!me) return
    return {
        x: Math.floor(me.x + Math.sin(me.rot)),
        y: Math.floor(me.y + Math.cos(me.rot))
    }
}

function interact(edge: boolean) {
    const { x, y } = get_interact_target()!;
    send({ type: "interact", pos: [x, y], edge })
}

function tick_update() {
    const p = players.get(my_id)
    if (!p) return

    send({ type: "position", pos: [p.x, p.y], rot: p.rot })
}
function frame_update(dt: number) {
    const p = players.get(my_id)
    if (!p) return

    const input = normalize({
        x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")),
        y: (+keys_down.has("KeyS") - +keys_down.has("KeyW"))
    })

    if (length(input) > 0.1) lerp_exp_v2_mut(p.facing, input, dt * 10.)
    p.rot = Math.atan2(p.facing.x, p.facing.y)
    p.x += input.x * dt * 5
    p.y += input.y * dt * 5

    for (const [_, i] of items) {
        lerp_exp_v2_mut(i, i.tracking_player ? players.get(i.player!)! : add_v2(i.tile!, 0.5), dt * 10.)
    }

    lerp_exp_v2_mut(interact_target_anim, get_interact_target() ?? { x: 0, y: 0 }, dt * 15.)
    lerp_exp_v2_mut(camera, p, dt * 10.)
}


function resize() {
    canvas.width = globalThis.innerWidth
    canvas.height = globalThis.innerHeight
}

let last_frame = Date.now()
function draw() {
    const now = Date.now()
    frame_update((now - last_frame) / 1000)
    last_frame = now;
    if (ws.readyState == ws.CONNECTING) draw_wait("Connecting...")
    else if (ws.readyState == ws.CLOSING) draw_wait("Closing...")
    else if (ws.readyState == ws.CLOSED) draw_wait("Disconnected")
    else if (ws.readyState == ws.OPEN) draw_ingame()
    else throw new Error(`ws state invalid`);
    requestAnimationFrame(draw)
}
function draw_wait(text: string) {
    ctx.fillStyle = "#444"
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = "#555"
    ctx.font = "50px sans-serif"
    ctx.strokeStyle = "black"
    ctx.fillStyle = "white"
    ctx.lineWidth = 10
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    ctx.lineJoin = "round"
    ctx.lineCap = "round"
    ctx.strokeText(text, canvas.width / 2, canvas.height / 2)
    ctx.fillText(text, canvas.width / 2, canvas.height / 2)
}


function map_screen_to_world(screen: V2): V2 {
    return {
        x: ((screen.x - canvas.width / 2) / scale) + camera.x,
        y: ((screen.y - canvas.height / 2) / scale) + camera.y,
    }
}

function draw_ingame() {
    ctx.fillStyle = "#111"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    scale = Math.min(canvas.width, canvas.height) / 10;
    ctx.save()
    ctx.translate(canvas.width / 2, canvas.height / 2)
    ctx.scale(scale, scale)
    ctx.translate(-camera.x, -camera.y)

    draw_grid()

    for (const [_, tile] of tiles) {
        ctx.save()
        ctx.translate(tile.x + 0.5, tile.y + 0.5)
        const comps = TILES[data.tile_names[tile.kind]] ?? FALLBACK_TILE
        for (const c of comps) {
            c(ctx)
        }
        ctx.restore()
    }

    for (const [_, player] of players) {
        ctx.save()
        ctx.translate(player.x, player.y)
        ctx.rotate(-player.rot)
        ctx.fillStyle = "rgb(226, 176, 26)"
        const psize = 0.6;
        ctx.fillRect(-psize / 2, -psize / 2, psize, psize)
        ctx.restore()
    }

    for (const [_, item] of items) {
        ctx.save()
        ctx.translate(item.x, item.y)
        const comps = ITEMS[data.item_names[item.kind]] ?? FALLBACK_ITEM
        for (const c of comps) {
            c(ctx)
        }
        ctx.restore()
    }

    for (const [_, tile] of tiles) {
        ctx.save()
        ctx.translate(tile.x, tile.y)
        if (tile.active_progress !== null && tile.active_progress !== undefined) {
            ctx.fillStyle = "rgba(115, 230, 58, 0.66)"
            ctx.fillRect(0, 0, 1, tile.active_progress)
        }
        ctx.restore()
    }

    draw_interact_target()

    ctx.restore()
}

function draw_interact_target() {
    ctx.save()
    ctx.translate(interact_target_anim.x, interact_target_anim.y)

    ctx.lineCap = "round"
    ctx.lineJoin = "round"
    ctx.lineWidth = 0.06 + 0.03 * Math.sin(Date.now() / 100)
    ctx.strokeStyle = "rgb(84, 122, 236)"
    ctx.strokeRect(0, 0, 1, 1)

    ctx.restore()
}

function draw_grid() {
    ctx.strokeStyle = "#333"
    ctx.lineWidth = 0.01
    ctx.beginPath()
    const min = floor_v2(map_screen_to_world({ x: 0, y: 0 }))
    const max = ceil_v2(map_screen_to_world({ x: canvas.width, y: canvas.height }))
    for (let x = min.x; x < max.x; x++) {
        ctx.moveTo(x, min.y)
        ctx.lineTo(x, max.y)
    }
    for (let y = min.y; y < max.y; y++) {
        ctx.moveTo(min.x, y)
        ctx.lineTo(max.x, y)
    }
    ctx.stroke()
}