import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';

function addRangeModal(state) {
    openModal((inner, idx) => {
        formModal(inner, 'Add DHCP Range',
            [
                { label: 'Interface (optional)', id: 'r-iface', placeholder: 'Leave empty for global' },
                { label: 'Start IP', id: 'r-start', placeholder: '192.168.1.100' },
                { label: 'End IP', id: 'r-end', placeholder: '192.168.1.200' },
                { label: 'Lease Time', id: 'r-lease', placeholder: '12h' },
            ],
            [
                { label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
                {
                    label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
                        const body = {
                            interface: ($val('r-iface') || '').trim() || undefined,
                            start: ($val('r-start') || '').trim(),
                            end: ($val('r-end') || '').trim(),
                            lease_time: ($val('r-lease') || '').trim() || '12h',
                        };
                        if (!body.start || !body.end) {
                            toast('Start and end are required', 'error');
                            return;
                        }
                        const resp = await apiFetch('/api/dhcp/ranges', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(body),
                        });
                        if (resp.ok) {
                            toast('Range added', 'success');
                            closeModal(idx);
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    },
                },
            ],
        );
    });
}

function addLeaseModal(state) {
    openModal((inner, idx) => {
        formModal(inner, 'Add Static Lease',
            [
                { label: 'MAC', id: 'l-mac', placeholder: 'aa:bb:cc:dd:ee:ff' },
                { label: 'IP', id: 'l-ip', placeholder: '192.168.1.50' },
                { label: 'Hostname (optional)', id: 'l-host', placeholder: 'device-name' },
            ],
            [
                { label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
                {
                    label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
                        const body = {
                            mac: ($val('l-mac') || '').trim(),
                            ip: ($val('l-ip') || '').trim(),
                            hostname: ($val('l-host') || '').trim() || undefined,
                        };
                        if (!body.mac || !body.ip) {
                            toast('MAC and IP are required', 'error');
                            return;
                        }
                        const resp = await apiFetch('/api/dhcp/static-lease', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(body),
                        });
                        if (resp.ok) {
                            toast('Lease added', 'success');
                            closeModal(idx);
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    },
                },
            ],
        );
    });
}

function addDnsModal(state) {
    openModal((inner, idx) => {
        formModal(inner, 'Add DNS Record',
            [
                { label: 'Name', id: 'd-name', placeholder: 'host.local' },
                { label: 'Address', id: 'd-addr', placeholder: '192.168.1.10' },
            ],
            [
                { label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
                {
                    label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
                        const body = {
                            name: ($val('d-name') || '').trim(),
                            address: ($val('d-addr') || '').trim(),
                        };
                        if (!body.name || !body.address) {
                            toast('Name and address are required', 'error');
                            return;
                        }
                        const resp = await apiFetch('/api/dhcp/dns-record', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(body),
                        });
                        if (resp.ok) {
                            toast('DNS record added', 'success');
                            closeModal(idx);
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    },
                },
            ],
        );
    });
}

async function load(state) {
    try {
        const cfgR = await apiFetch('/api/dhcp/config');
        if (cfgR.ok) state.config = cfgR.data || {};
        const stR = await apiFetch('/api/dhcp/status');
        if (stR.ok) state.status = stR.data || {};
        const lsR = await apiFetch('/api/dhcp/leases');
        if (lsR.ok) state.leases = lsR.data || [];
    } catch (e) {
        state.error = String(e);
    }
    state.loading = false;
}

export default definePage({
    init() {
        return { config: {}, status: {}, leases: [], loading: true, error: null, activeTab: 'ranges' };
    },
    subscribe: ['dnsmasq'],
    load,
    render(state) {
        if (state.loading) {
            return [
                PageHeader({ title: 'DHCP & DNS' }),
                h('div', { class: 'card', key: 'loading' },
                    h('div', { class: 'card-body loading' }, 'Loading...'),
                ),
            ];
        }

        if (state.error) {
            return [
                PageHeader({ title: 'DHCP & DNS' }),
                h('div', { class: 'card', key: 'error' },
                    h('div', { class: 'card-body error-msg' }, state.error),
                ),
            ];
        }

        const cfg = state.config || {};
        const ranges = cfg.ranges || [];
        const staticLeases = cfg.static_leases || [];
        const dnsRecords = cfg.dns_records || [];
        const statusUp = state.status || {};
        const isUp = statusUp.state === 'up';

        const rangesRows = ranges.map((r, i) => h('tr', { key: i },
            h('td', null, r.interface || '(global)'),
            h('td', null, esc(r.start)),
            h('td', null, esc(r.end)),
            h('td', null, esc(r.lease_time || '12h')),
            h('td', null,
                h('button', { class: 'btn btn-sm btn-danger',
                    'on:click': async () => {
                        if (!confirm('Remove range ' + r.start + ' - ' + r.end + '?')) return;
                        const resp = await apiFetch('/api/dhcp/ranges', {
                            method: 'DELETE',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ interface: r.interface || '', start: r.start, end: r.end }),
                        });
                        if (resp.ok) {
                            toast('Range removed', 'success');
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    }}, 'Remove'),
            ),
        ));

        const leaseRows = staticLeases.map((l, i) => h('tr', { key: i },
            h('td', null, esc(l.mac)),
            h('td', null, esc(l.ip)),
            h('td', null, l.hostname || '-'),
            h('td', null,
                h('button', { class: 'btn btn-sm btn-danger',
                    'on:click': async () => {
                        if (!confirm('Remove lease ' + l.mac + '?')) return;
                        const resp = await apiFetch('/api/dhcp/static-lease/' + enc(l.mac), { method: 'DELETE' });
                        if (resp.ok) {
                            toast('Lease removed', 'success');
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    }}, 'Remove'),
            ),
        ));

        const dnsRows = dnsRecords.map((rec, i) => h('tr', { key: i },
            h('td', null, h('strong', null, esc(rec.name || 'unnamed'))),
            h('td', { class: 'text-sm' }, esc(rec.address || '-')),
            h('td', null,
                h('button', { class: 'btn btn-sm btn-danger',
                    'on:click': async () => {
                        if (!confirm('Remove DNS record ' + (rec.name || 'unnamed') + '?')) return;
                        const resp = await apiFetch('/api/dhcp/dns-record/' + enc(rec.name || ''), { method: 'DELETE' });
                        if (resp.ok) {
                            toast('Record removed', 'success');
                            await load(state);
                        } else {
                            toast(resp.error || 'Failed', 'error');
                        }
                    }}, 'Remove'),
            ),
        ));

        const tabNames = ['ranges', 'leases', 'dns', 'active'];
        const actions = h('div', { style: 'display:flex;gap:8px;' },
            h('button', { class: 'btn btn-primary', 'on:click': () => addRangeModal(state) }, 'Add Range'),
            h('button', { class: 'btn btn-outline', 'on:click': () => addLeaseModal(state) }, 'Static Lease'),
            h('button', { class: 'btn btn-outline', 'on:click': () => addDnsModal(state) }, 'DNS Record'),
            h('button', { class: 'btn btn-outline',
                'on:click': async () => {
                    const resp = await apiFetch('/api/dhcp/apply', { method: 'POST' });
                    if (resp.ok) toast('dnsmasq applied', 'success');
                    else toast(resp.error || 'Failed', 'error');
                }}, 'Apply'),
        );

        return [
            PageHeader({ title: 'DHCP & DNS', subtitle: 'Dnsmasq management', actions }),
            h('div', null,
                StatusDot({ status: isUp ? 'success' : 'danger' }),
                ' Dnsmasq ',
                Badge({ text: statusUp.state || 'unknown', variant: isUp ? 'success' : 'danger' }),
            ),
            h('div', { class: 'tabs' },
                tabNames.map(t => h('span', {
                    class: 'tab ' + (state.activeTab === t ? 'active' : ''),
                    'on:click': () => { state.activeTab = t; },
                    style: 'cursor:pointer;',
                }, t.charAt(0).toUpperCase() + t.slice(1))),
            ),
            state.activeTab === 'ranges'
                ? h('div', { class: 'card' }, h('table', { class: 'table' },
                    h('thead', null,
                        h('tr', null,
                            h('th', null, 'Interface'),
                            h('th', null, 'Start'),
                            h('th', null, 'End'),
                            h('th', null, 'Lease'),
                            h('th', { style: 'width:80px;' }, 'Action'),
                        ),
                    ),
                    h('tbody', null,
                        ...(rangesRows.length ? rangesRows : [
                            h('tr', null, h('td', { colspan: 5, class: 'text-muted text-sm' }, 'No DHCP ranges')),
                        ]),
                    ),
                )) : null,
            state.activeTab === 'leases'
                ? h('div', { class: 'card' }, h('table', { class: 'table' },
                    h('thead', null,
                        h('tr', null,
                            h('th', null, 'MAC'),
                            h('th', null, 'IP'),
                            h('th', null, 'Hostname'),
                            h('th', { style: 'width:80px;' }, 'Action'),
                        ),
                    ),
                    h('tbody', null,
                        ...(leaseRows.length ? leaseRows : [
                            h('tr', null, h('td', { colspan: 4, class: 'text-muted text-sm' }, 'No static leases')),
                        ]),
                    ),
                )) : null,
            state.activeTab === 'dns'
                ? h('div', { class: 'card' }, h('table', { class: 'table' },
                    h('thead', null,
                        h('tr', null,
                            h('th', null, 'Name'),
                            h('th', null, 'Address'),
                            h('th', { style: 'width:80px;' }, 'Action'),
                        ),
                    ),
                    h('tbody', null,
                        ...(dnsRows.length ? dnsRows : [
                            h('tr', null, h('td', { colspan: 3, class: 'text-muted text-sm' }, 'No custom DNS records')),
                        ]),
                    ),
                )) : null,
            state.activeTab === 'active'
                ? h('div', { class: 'card' }, h('table', { class: 'table' },
                    h('thead', null,
                        h('tr', null,
                            h('th', null, 'MAC'),
                            h('th', null, 'IP'),
                            h('th', null, 'Hostname'),
                            h('th', null, 'Expires'),
                        ),
                    ),
                    h('tbody', null,
                        (state.leases || []).map((l, i) => h('tr', { key: i },
                            h('td', null, esc(l.mac || '-')),
                            h('td', null, esc(l.ip || '-')),
                            h('td', null, esc(l.hostname || '-')),
                            h('td', null, esc(l.expires || '-')),
                        )),
                    ),
                )) : null,
        ];
    },
});