<script lang="ts">
    import { browser } from '$app/environment'
    import { onMount, tick } from 'svelte'
    import { dev } from '$app/environment'
    import type { Writable } from 'svelte/store'
    import { get } from 'svelte/store'
    import { getContext } from 'svelte'
    import type * as P from 'plotly.js-dist-min'
    import * as Grain from '../../../../grain-types'
    import {
        chooseScale,
        relayout,
        modeBarButtonsToRemove,
    } from '../../../../plot'
    import type { Sample } from '../../../../plot'
    import type { Derived, PVGIS, PVGISInputs } from '../calcul'
    import * as calcul from '../calcul'
    let { data, annee = data.annee, pvgis_loading = true } = $props()
    console.log(data)
    let s: Derived = getContext('simulation')
    const soleil: Writable<Sample> = getContext('soleil')
    const expert: Writable<boolean> = getContext('expert')
    let _communaute: Writable<
        (Grain.Communaute & { isMoving?: boolean }) | null
    > = getContext('communaute')
    const server = dev ? 'http://localhost:5173' : 'https://coturnix.fr'
    function addPrm() {
        data.prms.push({ prm: null, nom: '', prenom: '', siret: '', pro: true })
        data.prms = data.prms
    }
    const pvgis: Writable<{ pvgis: null | PVGIS; loading: boolean }> =
        getContext('pvgis')
    let pvgis_: null | PVGISInputs = null
    let prm_loading = $state(false)
    let initialised = false
    let puissance = 0
    let communaute: null | (Grain.Communaute & { isMoving?: boolean }) = null
    let Plotly: typeof P
    let erreur = $state('')
    onMount(async () => {
        Plotly = await import('plotly.js-dist-min')
        s.p.puissance.subscribe((value) => {
            puissance = value
            if (initialised) {
                updatePlot(puissance, communaute)
            }
        })
        _communaute.subscribe((value) => {
            communaute = value
            if (initialised) {
                updatePlot(puissance, communaute)
            }
        })
        pvgis.subscribe((pvgis) => {
            console.log('pvgis updated')
            if (initialised && pvgis.pvgis?.inputs != pvgis_) {
                pvgis_ = pvgis.pvgis?.inputs || null
                updatePlot(puissance, communaute)
            }
        })
        for (let p of data.prms) {
            p.consentement = false
        }
        initialised = true
        updatePlot(puissance, communaute)
    })
    let plotStyle = $state('')
    let darkMode = false
    if (browser) {
        darkMode =
            window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches
        window
            .matchMedia('(prefers-color-scheme: dark)')
            .addEventListener('change', (event) => {
                darkMode = !!event.matches
                redraw()
            })
    }
    let profils_ = $state(Grain.profils($expert))
    expert.subscribe((value) => (profils_ = Grain.profils(value)))
    function addProfil() {
        const prt = Object.keys(profils_)
        data.profils.push({ type: prt[0], conso: 0 })
        data.profils = data.profils
    }
    async function delProfil(i: number) {
        data.profils.splice(i, 1)
        data.profils = data.profils
        await updatePlot(puissance, communaute)
    }
    const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
    var lastRequest = performance.now()
    async function refresh(event: SubmitEvent) {
        event.preventDefault()
        if (data.prms) {
            prm_loading = true
            await tick()
            for (let i = 0; i < data.prms.length; i++) {
                var file = document.getElementById(
                    `releve-${i}`
                ) as HTMLInputElement | null
                if (file?.files?.length) {
                    var reader = new FileReader()
                    reader.readAsText(file.files[0], 'UTF-8')
                    let r: string | undefined = await new Promise((resolve) => {
                        reader.onload = function (evt) {
                            console.log(typeof evt.target?.result)
                            let result = evt.target?.result?.toString()
                            if (result) {
                                resolve(result)
                            } else {
                                resolve(undefined)
                            }
                        }
                    })
                    data.prms[i].releve = r
                }
                let siret = document.getElementById(
                    `siret-${i}`
                ) as HTMLInputElement | null
                if (siret?.value) {
                    let now = performance.now()
                    // Rate-limiting: pas plus de 7 requêtes par seconde.
                    if (now - lastRequest < 150) {
                        await sleep(150 - (now - lastRequest))
                    }
                    lastRequest = now
                    const resp = await fetch(
                        `https://recherche-entreprises.api.gouv.fr/search?q=${siret.value}`
                    )
                    if (resp.status == 200) {
                        type Ent = {
                            results: {
                                dirigeants: {
                                    nom: string
                                    prenoms: string
                                }[]
                                matching_etablissements: {
                                    libelle_voie: string
                                    commune: string
                                }[]
                            }[]
                        }
                        let ent: Ent = await resp.json()
                        console.log(
                            ent.results[0].matching_etablissements[0].commune
                        )
                        if (ent.results.length) {
                            data.prms[i].nom = ent.results[0].dirigeants[0].nom
                            data.prms[i].prenom =
                                ent.results[0].dirigeants[0].prenoms
                            data.prms[i].codeinsee =
                                ent.results[0].matching_etablissements[0].commune
                            console.log(data.prms[i])
                        }
                    }
                }
            }
            console.log(data.prms)
            const resp = await fetch(
                `${server}/api/grain/projet/${data.id || 'nouveau'}/prms`,
                {
                    method: 'POST',
                    body: JSON.stringify(data.prms),
                }
            )
            if (resp.ok) {
                annee = await resp.json()
            }
            prm_loading = false
            await tick()
        } else {
            erreur = 'La liste des PRMs est vide'
        }
        await updatePlot(puissance, communaute)
    }
    let auto = 0
    let totalProd = $state(0)
    let totalConso = $state(0)
    let somme: Sample = {
        hourly: {
            x: [],
            y: [],
        },
        daily: {
            x: [],
            y: [],
        },
        weekly: {
            x: [],
            y: [],
        },
        x: [],
        y: [],
        type: 'bar',
        line: {
            color: '#b81111',
            width: 1,
        },
        marker: {
            color: '#b81111',
            width: 1,
        },
        name: 'Consommation totale',
        bucket: 1,
    }
    async function updatePv(
        puissance: number,
        communaute: (Grain.Communaute & { isMoving?: boolean }) | null
    ) {
        if (communaute?.isMoving) {
            return pvgis
        }
        pvgis_loading = true
        await calcul.updatePv(puissance, communaute, pvgis, soleil)
        pvgis_loading = false
        await tick()
    }
    async function updatePlot(
        puissance: number,
        communaute: (Grain.Communaute & { isMoving?: boolean }) | null
    ) {
        console.log('isMoving', communaute?.isMoving)
        if (communaute?.isMoving) {
            return
        }
        if (!browser) {
            return
        }
        await updatePv(puissance, communaute)
        console.log('updated')
        prm_loading = true
        let auto_ = await calcul.updatePlot(
            annee,
            data.profils,
            profils_,
            somme,
            soleil
        )
        prm_loading = false
        auto = auto_.auto
        totalProd = auto_.totalProd
        totalConso = auto_.totalConso
        console.log('updated auto', auto, totalProd, totalConso)
        if (!Plotly) Plotly = await import('plotly.js-dist-min')
        redraw()
    }
    let has_plot = { has_plot: false }
    let layout = {}
    function relayout_(event: Plotly.PlotRelayoutEvent) {
        console.log('relayout_')
        const plot = document.getElementById('plot')!
        relayout(event, plot, Plotly, layout, has_plot, get(soleil), somme)
    }
    function redraw() {
        console.log('redraw')
        const plot = document.getElementById('plot')
        if (!plot) return
        let soleil_ = get(soleil)
        chooseScale(soleil_)
        chooseScale(somme)
        let unite: string
        if (soleil_.bucket == 24) {
            unite = 'kWh/jour'
        } else if (soleil_.bucket == 24 * 7) {
            unite = 'kWh/semaine'
        } else {
            unite = 'kWh'
        }
        layout = {
            title: 'Autoconsommation',
            autosize: true,
            automargin: true,
            plot_bgcolor: '#fff0',
            paper_bgcolor: '#fff0',
            font: {
                color: darkMode ? '#fff' : '#000',
            },
            xaxis: {
                gridcolor: darkMode ? '#444' : '#bbb',
                ticklabeloverflow: 'allow',
                ticklabelstep: 4,
                tickangle: 45,
                tickformat: soleil_.bucket < 24 ? '%x %X' : '%x',
                type: 'datetime',
            },
            yaxis: {
                title: { text: unite },
                gridcolor: darkMode ? '#444' : '#bbb',
                color: darkMode ? '#fff' : '#000',
            },
            showlegend: true,
            legend: {
                xanchor: 'center',
                x: 0.5,
                y: -0.4,
                orientation: 'h',
            },
        }
        if (has_plot.has_plot) {
            Plotly!.update(plot, [soleil_, somme], layout)
        } else {
            Plotly!.newPlot(plot, [soleil_, somme], layout, {
                responsive: true,
                modeBarButtonsToRemove: modeBarButtonsToRemove,
            })
            plot.on('plotly_relayout', relayout_)
            has_plot.has_plot = true
        }
        var dataProd = [
            {
                values: [Math.round(auto), Math.round(totalProd - auto)],
                labels: ['Autoconsommé', 'Surplus'],
                marker: { colors: ['#ffbf00dd', '#b81111dd'] },
                type: 'pie',
                sort: false,
                hole: 0.5,
            },
        ]
        var dataConso = [
            {
                values: [Math.round(auto), Math.round(totalConso - auto)],
                labels: ['Autoproduit', 'Fournisseur'],
                marker: { colors: ['#ffbf00dd', '#b81111dd'] },
                type: 'pie',
                sort: false,
                hole: 0.5,
            },
        ]
        if (totalProd && totalConso) {
            plotStyle = 'min-height:450px'
            Plotly.react(
                'autoProd',
                dataProd,
                {
                    title: "Autoconsommation sur l'année",
                    font: {
                        color: darkMode ? '#fff' : '#000',
                    },
                    plot_bgcolor: '#fff0',
                    paper_bgcolor: '#fff0',
                    autosize: true,
                    automargin: true,
                    legend: {
                        orientation: 'h',
                    },
                },
                { responsive: true }
            )
            Plotly.react(
                'autoConso',
                dataConso,
                {
                    title: "Autoproduction sur l'année",
                    font: {
                        color: darkMode ? '#fff' : '#000',
                    },
                    plot_bgcolor: '#fff0',
                    paper_bgcolor: '#fff0',
                    autosize: true,
                    automargin: true,
                    legend: {
                        orientation: 'h',
                    },
                },
                { responsive: true }
            )
        } else {
            plotStyle = ''
        }
    }
</script>
<div class="tab-content" id="simuTabContent">
    <div
        class="tab-pane fade active show p-3"
        id="simu-tab-pane"
        role="tabpanel"
        aria-labelledby="simu-tab"
        tabindex="0">
        <h3 class="my-3 fs-1 fw-bold">
            Production… <span class="text-primary">Consommation</span>
        </h3>
        <form method="POST" action="/api/grain" id="pdl" onsubmit={refresh}>
        </form>
        {#if erreur}
            <div
                id="erreur"
                class="alert alert-danger fade d-flex"
                class:show={erreur}
                role="alert">
                {erreur}
                <button
                    type="button"
                    class="btn-close"
                    style="padding:20px;margin:-16px -16px -16px auto"
                    onclick={() => (erreur = '')}
                    aria-label="Close"></button>
            </div>
        {/if}
        <h2 class="my-5">Profils de consommation</h2>
        {#if data.profils.length}
            {#if $expert}
                <div>
                    Vous êtes en mode expert. Dans ce mode, vous avez un accès
                    direct à tous les profils utilisés par les opérateurs du
                    réseau pour simuler les consommations. Voir <a
                        href="https://www.enedis.fr/responsable-dequilibre-profilage-et-profils"
                        >la documentation</a
                    >.
                </div>
            {/if}
            <table class="table">
                <thead
                    ><tr
                        ><th></th><th>Profil</th><th
                            >Consommation annuelle (kWh)</th
                        ><th></th></tr
                    ></thead>
                <tbody>
                    {#each data.profils as pr, i (i)}
                        <tr>
                            <td class="px-3 align-middle">Profil</td>
                            <td>
                                <select
                                    class="form-select"
                                    bind:value={pr.type}
                                    onchange={() =>
                                        updatePlot(puissance, communaute)}>
                                    {#each Object.keys(profils_) as p (p)}
                                        <option value={p}>{p}</option>
                                    {/each}
                                </select>
                            </td>
                            <td>
                                <input
                                    type="number"
                                    class="form-control"
                                    placeholder="Abonnement (kW)"
                                    min="0"
                                    step="500"
                                    bind:value={pr.conso}
                                    onchange={() =>
                                        updatePlot(puissance, communaute)} />
                            </td>
                            <td
                                style="width:1%;white-space:nowrap;text-align:center">
                                <button
                                    class="btn btn-link"
                                    onclick={() => delProfil(i)}
                                    aria-label="Supprimer ce profil"
                                    ><i class="bi bi-x-circle text-primary"></i
                                    ></button>
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        {/if}
        <div class="text-center">
            <button class="btn btn-primary" onclick={addProfil}
                ><i class="bi bi-plus-circle"></i>&nbsp;Ajouter un profil</button>
        </div>
        <h2 class="my-5">Relevés de compteurs</h2>
        {#if data.active && data.id && data.id != 'nouveau'}
            <div class="mb-5">
                Vous pouvez ajouter des compteurs d'entreprises ou
                d'associations par leur numéro de compteur et leur numéro de
                SIRET.
            </div>
            {#if data.prms.length}
                {#each data.prms as prm, i (prm)}
                    <div class="row my-2">
                        <div class="col-3 d-flex align-middle">
                            <label class="ms-auto form-label" for="prm-{i}"
                                >PRM<button
                                    type="button"
                                    class="btn btn-link align-baseline p-0 ms-2"
                                    data-bs-toggle="popover"
                                    data-bs-trigger="hover focus"
                                    data-bs-content="Un PRM, aussi appelé PDL, est l'identifiant d'un compteur électrique. On peut le trouver sur les factures d'électricité, ou en appuyant sur le bouton + du compteur Linky."
                                    aria-label="Un PRM, aussi appelé PDL, est l'identifiant d'un compteur électrique. On peut le trouver sur les factures d'électricité, ou en appuyant sur le bouton + du compteur Linky."
                                    ><i class="bi bi-question-circle"></i
                                    ></button>
                            </label>
                        </div>
                        <div class="col d-flex align-items-center">
                            <input
                                class="form-control form-control-sm"
                                id="prm-{i}"
                                bind:value={prm.prm}
                                onkeydown={(e) =>
                                    (e.key == 'ArrowUp' ||
                                        e.key == 'ArrowDown') &&
                                    e.preventDefault()}
                                type="number" />
                        </div>
                        <div class="col col-auto d-flex align-items-center">
                            <button
                                class="btn btn-outline-primary btn-sm"
                                onclick={(e) => {
                                    e.preventDefault()
                                    data.prms.splice(i, 1)
                                    data.prms = data.prms
                                }}
                                aria-label="Supprimer ce compteur"
                                ><i class="bi bi-trash"></i></button>
                        </div>
                    </div>
                    <div class="row my-2">
                        <div class="col-3 d-flex align-middle">
                            <label class="ms-auto form-label" for="prm-{i}"
                                >Relevé au format CSV</label>
                        </div>
                        <div class="col d-flex align-items-center">
                            <input
                                class="form-control form-control-sm"
                                id="releve-{i}"
                                type="file" />
                            {#if prm.releve?.length}
                                <i class="ms-3 bi bi-check-circle"></i>
                            {/if}
                        </div>
                    </div>
                    <div class="row my-2">
                        <div class="col-9 ms-auto">
                            <input
                                type="radio"
                                class="btn-check"
                                id="particulier"
                                value={false}
                                bind:group={prm.pro} />
                            <label class="btn btn-sm" for="particulier"
                                >Particulier</label>
                            <input
                                type="radio"
                                class="btn-check"
                                id="pro"
                                value={true}
                                bind:group={prm.pro} />
                            <label class="btn btn-sm" for="pro"
                                >Professionnel</label>
                        </div>
                    </div>
                    {#if prm.pro}
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="siret-{i}"
                                    >SIRET du titulaire du compteur</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="siret-{i}"
                                    bind:value={prm.siret} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="prenom-{i}"
                                    >Prénom du titulaire du compteur</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="prenom-{i}"
                                    bind:value={prm.prenom} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label class="ms-auto form-label" for="nom-{i}"
                                    >Nom du titulaire du compteur</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="nom-{i}"
                                    bind:value={prm.nom} />
                            </div>
                        </div>
                    {:else}
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="prenom-{i}"
                                    >Prénom du titulaire du compteur</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="prenom-{i}"
                                    bind:value={prm.prenom} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label class="ms-auto form-label" for="nom-{i}"
                                    >Nom du titulaire du compteur</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="nom-{i}"
                                    bind:value={prm.nom} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="numerorue-{i}">Numéro et rue</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="numerorue-{i}"
                                    bind:value={prm.numerorue} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="codepostal-{i}"
                                    >Code INSEE de la commune</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="codepostal-{i}"
                                    bind:value={prm.codeinsee} />
                            </div>
                        </div>
                        <div class="row my-2">
                            <div
                                class="col-3 d-flex text-end align-items-center">
                                <label
                                    class="ms-auto form-label"
                                    for="serie-{i}">Numéro de série</label>
                            </div>
                            <div class="col-9 d-flex align-items-center">
                                <input
                                    class="form-control form-control-sm"
                                    id="serie-{i}"
                                    bind:value={prm.serie} />
                            </div>
                        </div>
                    {/if}
                    <div class="my-3 form-check d-flex">
                        <input
                            class="form-check-input ms-auto me-2"
                            type="checkbox"
                            id="consentement-{i}"
                            bind:checked={prm.consentement} />
                        <label
                            class="form-check-label me-auto"
                            for="consentement-{i}"
                            >Cet abonné consent à ce que j'accède à ses données.</label>
                    </div>
                    <hr class="my-4" />
                {/each}
                <div class="my-3">
                    Ce service ne consulte la courbe de charge du compteur
                    communiquant qu'une seule fois, et ce consentement expire
                    dès que ces données pour l'année écoulée sont récupérées.
                    Les données collectées depuis les compteurs communiquants
                    sont stockées temporairement sur nos serveurs pour des
                    raisons de performance, ne sont utilisées que pour afficher
                    cette page et produire le rapport, et ne sont jamais
                    conservées plus de 30 jours.
                </div>
                <div class="my-3">
                    Les données envoyées via un fichier sont conservées jusqu'à
                    ce que vous supprimiez ce projet.
                </div>
            {/if}
            <div class="d-flex justify-content-center">
                <button class="mx-2 btn btn-primary" onclick={addPrm}
                    ><i class="bi bi-plus-circle"></i>&nbsp;Ajouter un compteur</button>
                {#if data.prms.length}
                    <button
                        disabled={!!data.prms.find(
                            (p) => !p.releve?.length && !p.consentement
                        )}
                        class="mx-2 btn btn-primary"
                        form="pdl">Mettre à jour</button>
                    <div
                        class="mx-2 spinner-border text-primary"
                        class:d-none={!prm_loading}>
                    </div>
                {/if}
            </div>
        {:else if data.active}
            <div class="my-3">
                Sauvegardez ce projet pour avoir accès aux relevés de compteurs
                détaillés.
            </div>
        {:else}
            <div class="my-3">
                Vous devez être abonné pour avoir accès aux relevés de compteurs
                détaillés.
            </div>
        {/if}
        <h2 class="mt-5">Simulation</h2>
        <table class="table table-bordered d-inline-block">
            <tbody>
                <tr
                    ><td>Production totale:</td><td
                        >{Math.round(totalProd)}kWh</td
                    ></tr>
                <tr
                    ><td>Consommation totale:</td><td
                        >{Math.round(totalConso)}kWh</td
                    ></tr>
            </tbody>
        </table>
        {#if pvgis_loading}
            <div class="my-3 d-flex align-items-center text-primary">
                <div class="spinner-border text-primary me-3"></div>
                Chargement de la production solaire
            </div>
        {/if}
        <div class="my-3">
            <div class="mx-auto" style="min-height:450px" id="plot"></div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 p-0" style={plotStyle} id="autoProd">
            </div>
            <div class="col-12 col-sm-6 p-0" style={plotStyle} id="autoConso">
            </div>
        </div>
    </div>
</div>
<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type='number'] {
        appearance: none;
        -moz-appearance: textfield; /* Firefox */
    }
</style>

<script lang="ts">
    import * as Grain from '../../../../grain-types'
    import type { Writable } from 'svelte/store'
    import { getContext, tick } from 'svelte'
    import * as L from 'leaflet'
    let { zoom, save } = $props()
    import { onMount, onDestroy } from 'svelte'
    let assets: string = '/grain/static'
    import { browser } from '$app/environment'
    let redIcon: null | L.Icon = null
    let srv =
        import.meta.env.MODE == 'production'
            ? 'https://coturnix.fr'
            : 'http://localhost:5173'
    type Compteur_ = Grain.Compteur & { dot?: L.Marker }
    type Communaute_ = Grain.Communaute & {
        compteurs?: Compteur_[]
        circle?: L.Circle
        isMoving?: boolean
    }
    let communaute: Writable<Communaute_ | null> = getContext('communaute')
    let derogation = $state($communaute?.derogation ?? 'non')
    let map: null | L.Map = null
    let circleOpts = {
        radius: 1000,
        stroke: true,
        fillOpacity: 0,
        color: '#b81413',
        weight: 3,
    }
    let leaflet: null | typeof L = null
    function changeDerogation(e: Event) {
        console.log('Changederogation', derogation, $communaute, e)
        if ($communaute) {
            $communaute.derogation = derogation
            let d = derogationRayonKm() * 1000
            checkRayon($communaute, d)
            if ($communaute?.circle) {
                $communaute.circle.setRadius(d)
            } else if (leaflet) {
                circleOpts.radius = d
                $communaute.circle = leaflet.circle($communaute, circleOpts)
                $communaute.circle.addTo(map!)
            }
            save()
        }
    }
    function derogationRayonKm(): number {
        if ($communaute?.derogation == '20') {
            return 10
        } else if ($communaute?.derogation == '10') {
            return 5
        } else {
            return 1
        }
    }
    type Commune = {
        nom: string
        densite: number
    }
    let communes: null | Commune[] = $state(null)
    async function checkRayon(latlng: Grain.LatLng | null, rayon: number) {
        if (latlng) {
            console.log('checkRayon')
            let resp = await fetch(
                `${srv}/api/intersect?lat=${latlng.lat}&lng=${latlng.lng}&rayon=${rayon}`,
                {
                    credentials: 'include',
                }
            )
            if (resp.status == 200) {
                communes = await resp.json()
            }
        }
    }
    let mapContainer: HTMLElement
    onDestroy(() => {
        console.log('destroy', map)
        if (browser && 'coturnixMap' in document) {
            delete document.coturnixMap
        }
        // map && map.off && map.off(); map && map.remove && map.remove()
    })
    onMount(async () => {
        checkRayon($communaute, derogationRayonKm())
        console.log('map onload', browser)
        if (!browser) {
            return
        }
        leaflet = await import('leaflet')
        await import('leaflet.fullscreen')
        const G = await import('leaflet-gesture-handling')
        L.Map.addInitHook('addHandler', 'gestureHandling', G.GestureHandling)
        await tick()
        console.log('Map.svelte')
        map = L.map(L.DomUtil.create('div'), {
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: 'topleft',
            },
            attributionControl: false,
            //@ts-expect-error Plugin
            gestureHandling: true,
        })
        ;(document as Document & { coturnixMap: L.Map }).coturnixMap = map
        // Un peu crados, mais on peut avoir besoin de réinitialiser
        // la carte si elle a déjà été chargée, donc il faut pouvoir la
        // virer du DOM.
        // eslint-disable-next-line svelte/no-dom-manipulating
        mapContainer.appendChild(map.getContainer())
        map.getContainer().style.width = '100%'
        map.getContainer().style.height = '100%'
        map.invalidateSize()
        if ($communaute) {
            derogation = $communaute.derogation
            circleOpts.radius = derogationRayonKm() * 1000
            $communaute.circle = L.circle($communaute, circleOpts).addTo(map)
            map.setView($communaute, zoom)
        } else {
            map.setView({ lat: 46, lng: 3 }, 5)
        }
        let layer = L.tileLayer(
            `https://tile.openstreetmap.org/{z}/{x}/{y}.png`,
            {
                minZoom: 0,
                maxZoom: 18,
                attribution: 'IGN-F/Geoportail',
                tileSize: 256,
                noWrap: true,
            }
        ).addTo(map)
        layer.on('tileerror', (e) => {
            console.log(e)
        })
        if (!redIcon) {
            redIcon = L.icon({
                iconUrl: `${assets}/signal-red.png`,
                iconRetinaUrl: `${assets}/signal-red.png`,
                iconAnchor: [12, 41],
            } as L.IconOptions)
        }
        if ($communaute?.compteurs) {
            for (let c of $communaute.compteurs) {
                c.dot = L.marker(c, {
                    icon: redIcon!,
                    draggable: false,
                })
                c.dot.addTo(map)
            }
        }
        map.on('zoomend', function () {
            if (map) zoom = map.getZoom()
        })
        let initialCentre: null | { lat: number; lng: number } = null
        let invalidDrag = false
        map.on('mousemove', function (e: L.LeafletMouseEvent) {
            if (invalidDrag || !map) {
                return
            }
            if ($communaute?.circle && e.originalEvent.shiftKey) {
                // let m = document.getElementById('descrmap')
                // m!.focus()
                let d = derogationRayonKm() * 1000
                if (initialCentre) {
                    let testCentre = {
                        lat: e.latlng.lat - initialCentre.lat,
                        lng: e.latlng.lng - initialCentre.lng,
                    }
                    if (
                        !checkDistance(
                            testCentre,
                            $communaute.compteurs ?? [],
                            d
                        )
                    ) {
                        invalidDrag = true
                        return
                    }
                    $communaute.lat = testCentre.lat
                    $communaute.lng = testCentre.lng
                    $communaute.circle.setLatLng($communaute)
                } else {
                    if (map.distance($communaute, e.latlng) <= d) {
                        $communaute.isMoving = true
                        initialCentre = {
                            lat: e.latlng.lat - $communaute.lat,
                            lng: e.latlng.lng - $communaute.lng,
                        }
                    }
                }
            }
        })
        map.on('keyup', async (e: L.LeafletKeyboardEvent) => {
            console.log('KEYUP', e)
            if (e.originalEvent.key == 'Shift') {
                if ($communaute) {
                    delete $communaute.isMoving
                    checkRayon($communaute, derogationRayonKm() * 1000)
                    save()
                }
                console.log('invalidDrag')
                invalidDrag = false
                initialCentre = null
            }
        })
        map.on('click', function (e: L.LeafletMouseEvent) {
            console.log(e)
            if (map && !$communaute) {
                communaute.set({
                    lat: e.latlng.lat,
                    lng: e.latlng.lng,
                    compteurs: [],
                    derogation,
                })
                circleOpts.radius = derogationRayonKm() * 1000
                $communaute!.circle = L.circle(e.latlng, circleOpts).addTo(map)
                checkRayon($communaute, derogationRayonKm() * 1000)
            }
            if (
                map &&
                map.distance($communaute!, e.latlng) <=
                    derogationRayonKm() * 1000
            ) {
                let dot = {
                    lat: e.latlng.lat,
                    lng: e.latlng.lng,
                    dot: L.marker(e.latlng, {
                        icon: redIcon!,
                        draggable: false,
                    }),
                    azimuth: 0,
                    inclinaison: 0,
                    puissance: 0,
                }
                dot.dot.addTo(map)
                if (!$communaute!.compteurs) {
                    $communaute!.compteurs = []
                }
                $communaute!.compteurs.push(dot)
                $communaute = $communaute
            }
            save()
        })
        recentrer()
    })
    function recentrer(zoom?: number) {
        if (!$communaute || !map) {
            return
        }
        let lng0 = 180
        let lng1 = -180
        let lat0 = 90
        let lat1 = -90
        let mar = 0.5
        let dy = (mar + derogationRayonKm()) / 111
        let lat2 = $communaute.lat - dy
        let lat3 = $communaute.lat + dy
        let dx = dy / Math.cos(($communaute.lat * Math.PI) / 180)
        let lng2 = $communaute.lng - dx
        let lng3 = $communaute.lng + dx
        lng0 = Math.min(lng0, lng2)
        lng1 = Math.max(lng1, lng3)
        lat0 = Math.min(lat0, lat2)
        lat1 = Math.max(lat1, lat3)
        if (zoom === undefined && lng0 < lng1 && lat0 < lat1) {
            console.log([
                [lat0, lng0],
                [lat1, lng1],
            ])
            map.fitBounds([
                [lat0, lng0],
                [lat1, lng1],
            ])
        } else {
            map.setView($communaute, zoom)
        }
    }
    function reset() {
        if (!$communaute || !map) {
            return
        }
        $communaute.circle?.removeFrom(map)
        for (let m of $communaute?.compteurs || []) {
            m.dot?.removeFrom(map)
        }
        $communaute = null
    }
    function checkDistance(
        e: { lat: number; lng: number },
        compteurs: { lat: number; lng: number }[],
        d: number
    ): boolean {
        if (!map) {
            return false
        }
        for (let v of compteurs) {
            let dist = map.distance(e, v)
            if (dist > d) {
                return false
            }
        }
        return true
    }
    function deleteCompteur(event: Event, i: number) {
        event.preventDefault()
        if ($communaute?.compteurs) {
            if (map) {
                $communaute?.compteurs[i]?.dot?.removeFrom(map)
            }
            $communaute.compteurs.splice(i, 1)
        }
        $communaute = $communaute
        save()
    }
    let geoc = $state(false)
    let endroit: string = $state('')
    function diff(a: string, b: string): number {
        const m = a.length,
            n = b.length
        const dp = Array(m + 1)
            .fill(0)
            .map(() => Array(n + 1).fill(0))
        dp[0] = dp[0].map((_, j) => j)
        dp.forEach((row, i) => (row[0] = i))
        for (let i = 1; i <= m; i++) {
            for (let j = 1; j <= n; j++) {
                if (a[i - 1] === b[j - 1]) {
                    dp[i][j] = dp[i - 1][j - 1]
                } else {
                    dp[i][j] =
                        1 +
                        Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
                }
            }
        }
        return dp[m][n]
    }
    async function geocoding(e: Event) {
        e.preventDefault()
        geoc = true
        await tick()
        let resp = await fetch(
            `https://data.geopf.fr/geocodage/search?q=${endroit}`
        )
        geoc = false
        if (resp.status == 200) {
            const b = await resp.json()
            console.log('features', b)
            if ('features' in b && b.features.length) {
                let min = -1
                let argmin = 0
                for (let i = 0; i < b.features.length; i++) {
                    const d = diff(b.features[i].properties.label, endroit)
                    if (min < 0 || d < min) {
                        min = d
                        argmin = i
                    }
                }
                console.log('diff', min, argmin)
                if (!$communaute) {
                    communaute.set({
                        lat: b.features[argmin].geometry.coordinates[1],
                        lng: b.features[argmin].geometry.coordinates[0],
                        compteurs: [],
                        derogation,
                    })
                }
                $communaute!.lng = b.features[argmin].geometry.coordinates[0]
                $communaute!.lat = b.features[argmin].geometry.coordinates[1]
            }
            if ($communaute) {
                let d = derogationRayonKm() * 1000
                await checkRayon($communaute, d)
                circleOpts.radius = d
                if ($communaute.circle) {
                    $communaute.circle.setLatLng($communaute)
                } else if (leaflet) {
                    $communaute.circle = leaflet
                        .circle($communaute, circleOpts)
                        .addTo(map!)
                }
                recentrer(d == 10000 ? 10 : d == 5000 ? 11 : 12)
            }
        }
        return null
    }
</script>
<svelte:head>
    <link rel="stylesheet" href="{assets}/leaflet.css" />
    <link rel="stylesheet" href="{assets}/leafletfs.css" />
    <link rel="stylesheet" href="{assets}/leaflet-gesture-handling.min.css" />
</svelte:head>
<div
    class="tab-pane fade active show p-3"
    id="description-tab-pane"
    role="tabpanel"
    aria-labelledby="description-tab"
    tabindex="0">
    <h3 class="my-3 fs-1 fw-bold">
        Quelques <span class="text-primary">détails</span> de plus.
    </h3>
    <div class="my-3">
        Cliquez sur la carte ci-dessous pour ajouter des compteurs, ou cliquez
        en maintenant la touche Shift pour positionner la communauté.
    </div>
    <div class="my-3">
        <form onsubmit={geocoding}>
            <div class="input-group">
                <input type="text" class="form-control" bind:value={endroit} />
                <button
                    class="btn btn-sm btn-outline-primary"
                    onclick={geocoding}
                    >Recherche
                    {#if geoc}
                        <div
                            class="spinner-border"
                            style="margin-left:0.2em; width:1em;height:1em">
                        </div>
                    {/if}
                </button>
            </div>
        </form>
    </div>
    <div bind:this={mapContainer} class="w-100" style="height:500px"></div>
    <div class="d-flex flex-column">
        <button
            class="btn btn-sm btn-outline-secondary my-2 ms-auto"
            onclick={() => recentrer(zoom)}>Recentrer</button>
        <button
            class="btn btn-sm btn-outline-secondary my-2 ms-auto"
            onclick={reset}>Reset</button>
        {#if $communaute?.compteurs?.length}
            <div class="my-3">
                <table class="table">
                    <thead>
                        <tr
                            ><th>Puissance</th><th
                                >Azimuth (le Sud est à 0°, l'Est à -90°, l'Ouest
                                à 90°)</th
                            ><th>Inclinaison</th><th></th></tr>
                    </thead>
                    <tbody>
                        {#each $communaute.compteurs as c, i (i)}
                            <tr>
                                <td>
                                    <input
                                        type="number"
                                        class="form-control"
                                        bind:value={c.puissance} />
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        class="form-control"
                                        bind:value={c.azimuth} />
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        class="form-control"
                                        bind:value={c.inclinaison} />
                                </td>
                                <td>
                                    <button
                                        class="btn btn-sm btn-outline-primary"
                                        aria-label="Supprimer le compteur"
                                        onclick={(e) => deleteCompteur(e, i)}
                                        ><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                        {/each}
                    </tbody>
                </table>
            </div>
        {/if}
        <div class="p-3 overflow-auto">
            <label for="derog" class="form-label">
                Extension de périmètre (habitat rural et/ou dispersé)
            </label>&nbsp;<button
                type="button"
                class="btn btn-link align-baseline p-0"
                id="ext-popover"
                data-bs-toggle="popover"
                data-bs-trigger="hover focus"
                data-bs-content="Par dérogation, le rayon de la communauté peut être étendu à 5km ou 10km."
                aria-label="Par dérogation, le rayon de la communauté peut être étendu à 5km ou 10km.">
                <i class="bi bi-question-circle"></i>
            </button>
            <select
                id="derog"
                class="form-select form-select-sm w-auto d-inline"
                name="derog"
                bind:value={derogation}
                onchange={changeDerogation}>
                <option value="non">Non</option>
                <option value="10">10km</option>
                <option value="20">20km</option>
            </select>
            {#if communes && communes.length}
                <h4 class="mt-5">Communes concernées</h4>
                <table class="table">
                    <thead>
                        <tr><th>Nom</th><th>Éligibilité</th></tr>
                    </thead>
                    <tbody>
                        {#each communes as c (c.nom)}
                            <tr
                                ><td>{c.nom}</td><td
                                    >{#if c.densite >= 5}20km{:else if c.densite >= 3}10km{#if derogation == '20'}<i
                                                class="ms-3 text-danger bi bi-exclamation-triangle"
                                            ></i
                                            >{/if}{:else}2km{#if derogation != 'non'}<i
                                                class="ms-3 text-danger bi bi-exclamation-triangle"
                                            ></i
                                            >{/if}{/if}</td
                                ></tr>
                        {/each}
                    </tbody>
                </table>
            {/if}
        </div>
    </div>
</div>