<script lang="ts">
    import { onMount, onDestroy } from "svelte"
    import { invoke } from "@tauri-apps/api/core"
    import { goto } from "@roxi/routify"

    import HDivider from "@/components/elements/HDivider.svelte"
    import Footer from "@/components/Footer.svelte"
    import {
        Button, Space, Text, Notification, Badge, Loader, TextInput, NumberInput, Slider,
    } from "@svelteuidev/core"
    import { CrossCircled, Microphone2, TrashIcon, Check, ResumeIcon } from "radix-icons-svelte"

    interface TrainerStatus {
        recording: boolean
        session_name: string | null
        target_samples: number
        collected: number
    }

    interface TrainedModel {
        name: string
        path: string
        size_bytes: number
        modified: number
    }

    let status: TrainerStatus = { recording: false, session_name: null, target_samples: 10, collected: 0 }
    let models: TrainedModel[] = []
    let loading = true
    let error = ""
    let info = ""
    let busy = false

    let newName = ""
    let targetSamples = 10
    let sampleSeconds = 1.5
    let threshold = 0.5

    let savedModelPath = ""

    let daemonRunning = false

    async function load() {
        loading = true
        error = ""
        try {
            const [s, m, run] = await Promise.all([
                invoke<TrainerStatus>("wake_trainer_status"),
                invoke<TrainedModel[]>("wake_trainer_list_models"),
                invoke<boolean>("is_jarvis_app_running"),
            ])
            status = s
            models = [...m].sort((a, b) => a.name.localeCompare(b.name))
            daemonRunning = run
            if (!status.recording) {
                targetSamples = status.target_samples || 10
            }
        } catch (e) {
            error = String(e)
        } finally {
            loading = false
        }
    }

    async function startSession() {
        const name = newName.trim()
        if (!name) { error = "Введите имя модели"; return }
        if (daemonRunning) {
            error = "Сначала остановите jarvis-app — он держит микрофон."
            return
        }
        busy = true
        try {
            await invoke("wake_trainer_start", { name, targetSamples })
            await load()
            info = `Сессия запущена. Сэмплов нужно: ${targetSamples}.`
        } catch (e) { error = String(e) }
        finally { busy = false }
    }

    async function recordOne() {
        busy = true
        try {
            await invoke("wake_trainer_record_sample", { seconds: sampleSeconds })
            await load()
            info = `Записано: ${status.collected} / ${status.target_samples}`
        } catch (e) { error = String(e) }
        finally { busy = false }
    }

    async function finish() {
        busy = true
        try {
            const path = await invoke<string>("wake_trainer_finish", { threshold })
            savedModelPath = path
            info = `Модель сохранена: ${path}. Перейдите в Настройки и выберите её, потом перезапустите Jarvis.`
            await load()
        } catch (e) { error = String(e) }
        finally { busy = false }
    }

    async function cancel() {
        busy = true
        try {
            await invoke("wake_trainer_cancel")
            await load()
            info = "Сессия отменена."
        } catch (e) { error = String(e) }
        finally { busy = false }
    }

    async function deleteModel(name: string) {
        if (!confirm(`Удалить модель "${name}" и её сэмплы?`)) return
        try {
            await invoke("wake_trainer_delete_model", { name })
            await load()
        } catch (e) { error = String(e) }
    }

    let poll: ReturnType<typeof setInterval> | null = null

    onMount(() => {
        load()
        poll = setInterval(load, 3000)
    })

    onDestroy(() => {
        if (poll !== null) clearInterval(poll)
    })

    function fmtSize(n: number): string {
        if (n < 1024) return `${n} B`
        if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
        return `${(n / 1024 / 1024).toFixed(2)} MB`
    }

    function fmtDate(ts: number): string {
        if (!ts) return "—"
        return new Date(ts * 1000).toLocaleString()
    }
</script>

<Space h="xl" />

<h2 class="page-title">Своё кодовое слово</h2>
<Text size="sm" color="gray">
    Запишите 5–30 примеров своего голоса, и Jarvis обучит персональный
    Rustpotter-детектор. Файл сохраняется как
    <code>%APPDATA%\com.priler.jarvis\wake_words\&lt;имя&gt;.rpw</code>.
    Активная модель выбирается в Настройках.
</Text>

<Space h="md" />

{#if daemonRunning}
    <Notification title="Jarvis запущен" color="orange" withCloseButton={false}>
        Остановите jarvis-app (через трей или кнопку «Стоп») — иначе микрофон
        будет занят и запись не пойдёт.
    </Notification>
    <Space h="sm" />
{/if}

{#if info}
    <Notification title="Готово" color="teal" icon={Check} on:close={() => { info = "" }}>
        {info}
    </Notification>
    <Space h="sm" />
{/if}

{#if error}
    <Notification title="Ошибка" color="red" icon={CrossCircled} on:close={() => { error = "" }}>
        {error}
    </Notification>
    <Space h="sm" />
{/if}

{#if loading}
    <Loader />
{:else if status.recording}
    <div class="session-card">
        <div class="row spaced">
            <div>
                <strong>Запись:</strong>
                <code>{status.session_name}</code>
            </div>
            <Badge color="lime" variant="filled">
                {status.collected} / {status.target_samples}
            </Badge>
        </div>
        <Space h="sm" />
        <Text size="xs" color="gray">
            Произнеси своё кодовое слово (например, «Джарвис») чётко, по очереди,
            одинаково. Длина каждого сэмпла — {sampleSeconds.toFixed(1)} сек.
        </Text>
        <Space h="sm" />
        <div class="row">
            <Text size="xs">Длина сэмпла: {sampleSeconds.toFixed(1)} сек</Text>
            <Slider min={0.8} max={3.0} step={0.1} bind:value={sampleSeconds} disabled={busy} />
        </div>
        <Space h="sm" />
        <Button color="lime" radius="md" size="sm" disabled={busy} on:click={recordOne}>
            <Microphone2 size={14} /> &nbsp;
            {busy ? "Запись..." : `Записать сэмпл (${status.collected + 1})`}
        </Button>
        &nbsp;
        <Button color="gray" radius="md" size="sm" disabled={busy} on:click={cancel}>
            Отменить
        </Button>

        {#if status.collected >= 5}
            <Space h="md" />
            <div class="row">
                <Text size="xs">Порог детектора: {threshold.toFixed(2)}</Text>
                <Slider min={0.30} max={0.90} step={0.05} bind:value={threshold} disabled={busy} />
            </div>
            <Text size="xs" color="gray">
                Ниже — больше срабатываний (и ложных). Выше — пропусков больше.
            </Text>
            <Space h="sm" />
            <Button color="teal" radius="md" size="sm" disabled={busy} on:click={finish}>
                <Check size={14} /> &nbsp; Обучить и сохранить
            </Button>
        {/if}
    </div>
{:else}
    <div class="form-card">
        <TextInput
            label="Имя модели"
            description="Только латиница / кириллица + цифры. Пробелы заменятся на _"
            placeholder="например: my_jarvis"
            bind:value={newName}
            disabled={busy}
        />
        <Space h="sm" />
        <NumberInput
            label="Сколько сэмплов записать"
            description="5 минимум, 10–15 рекомендовано"
            min={5}
            max={30}
            bind:value={targetSamples}
            disabled={busy}
        />
        <Space h="sm" />
        <Button color="lime" radius="md" size="sm" disabled={busy || daemonRunning} on:click={startSession}>
            <ResumeIcon size={14} /> &nbsp; Начать запись
        </Button>
    </div>
{/if}

<Space h="xl" />

<h3 class="section-title">Обученные модели</h3>
{#if models.length === 0}
    <Text size="sm" color="gray">Моделей пока нет — обучите первую выше.</Text>
{:else}
    <div class="model-list">
        {#each models as m}
            <div class="model-card">
                <div class="row spaced">
                    <strong>{m.name}</strong>
                    <Badge color="gray" variant="filled" size="sm">{fmtSize(m.size_bytes)}</Badge>
                </div>
                <div class="model-path">{m.path}</div>
                <Text size="xs" color="gray">обновлено: {fmtDate(m.modified)}</Text>
                <Space h="xs" />
                <Button color="red" radius="md" size="xs" uppercase on:click={() => deleteModel(m.name)}>
                    <TrashIcon size={12} /> &nbsp; Удалить
                </Button>
            </div>
        {/each}
    </div>
{/if}

<Space h="xl" />

<Button color="gray" radius="md" size="sm" uppercase fullSize on:click={() => $goto("/")}>
    Назад
</Button>

<HDivider />
<Footer />

<style lang="scss">
    .page-title {
        margin: 0 0 4px 0;
        color: #fff;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .section-title {
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.05rem;
        margin: 0 0 0.5rem 0;
    }

    code {
        background: rgba(255, 255, 255, 0.08);
        padding: 1px 4px;
        border-radius: 3px;
        font-size: 0.8rem;
    }

    .row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .row.spaced {
        justify-content: space-between;
    }

    .session-card, .form-card, .model-card {
        background: rgba(30, 40, 45, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 0.85rem 1rem;
    }

    .model-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .model-path {
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.7rem;
        font-family: ui-monospace, "Cascadia Mono", monospace;
        word-break: break-all;
        margin: 0.2rem 0;
    }
</style>
