(function () {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        var historyApi = window.TaberebaLinkHistory;
        var section = document.getElementById('tb-link-history');
        if (!historyApi || !section) {
            return;
        }

        var store = historyApi.createStore(window.localStorage);
        var list = document.getElementById('tb-link-history-list');
        var empty = document.getElementById('tb-link-history-empty');
        var count = document.getElementById('tb-link-history-count');
        var clear = document.getElementById('tb-clear-link-history');
        var message = document.getElementById('tb-link-history-message');

        function activeSiteName() {
            try {
                var settings = JSON.parse(window.localStorage.getItem('tabereba_settings_v1') || '{}');
                var index = parseInt(settings.active_site_index, 10);
                index = isNaN(index) ? 0 : index;
                return settings.sites && settings.sites[index]
                    ? String(settings.sites[index].site_name || '').slice(0, 100) : '';
            } catch (error) {
                return '';
            }
        }

        function currentShop(value) {
            var shop = value && typeof value === 'object' ? value : null;
            if (!shop) {
                var field = document.querySelector('.tb-generate-form [name="shop_json"]');
                try {
                    shop = field ? JSON.parse(field.value) : null;
                } catch (error) {
                    shop = null;
                }
            }
            if (!shop) {
                return null;
            }
            var name = document.getElementById('tb-edit-title');
            var keyword = document.getElementById('tb-edit-search-keyword');
            shop.name = name ? name.value : shop.name;
            shop.search_keyword = keyword ? keyword.value : shop.search_keyword;
            shop.site_name_at_generation = activeSiteName();
            return shop;
        }

        function shortDate(value) {
            var date = new Date(value);
            return isNaN(date.getTime()) ? '日時不明' : date.toLocaleString('ja-JP');
        }

        function actionButton(label, className, id) {
            var button = document.createElement('button');
            button.type = 'button';
            button.className = 'tb-button tb-button-small ' + className;
            button.dataset.historyId = id;
            button.textContent = label;
            return button;
        }

        function render(history) {
            list.textContent = '';
            history.items.forEach(function (item) {
                var card = document.createElement('article');
                card.className = 'tb-link-history-item';
                if (item.image) {
                    var image = document.createElement('img');
                    image.className = 'tb-link-history-image';
                    image.src = item.image;
                    image.alt = '';
                    image.loading = 'lazy';
                    image.addEventListener('error', function () { image.hidden = true; });
                    card.appendChild(image);
                }
                var content = document.createElement('div');
                content.className = 'tb-link-history-content';
                var title = document.createElement('h3');
                title.textContent = item.name;
                var keyword = document.createElement('p');
                keyword.className = 'tb-link-history-keyword';
                keyword.textContent = '検索キーワード：' + item.search_keyword;
                var meta = document.createElement('p');
                meta.className = 'tb-link-history-meta';
                meta.textContent = shortDate(item.generated_at) + ' ／ 生成時：'
                    + (item.site_name_at_generation || '名称未設定サイト');
                var actions = document.createElement('div');
                actions.className = 'tb-link-history-actions';
                actions.appendChild(actionButton('この店舗を再生成', 'tb-history-regenerate', item.id));
                actions.appendChild(actionButton('削除', 'tb-button-secondary tb-history-delete', item.id));
                content.appendChild(title);
                content.appendChild(keyword);
                content.appendChild(meta);
                content.appendChild(actions);
                card.appendChild(content);
                list.appendChild(card);
            });
            var hasItems = history.items.length > 0;
            count.textContent = history.items.length + '件';
            empty.hidden = hasItems;
            list.hidden = !hasItems;
            clear.hidden = !hasItems;
        }

        function saveCurrent(shop) {
            var current = currentShop(shop);
            if (!current) {
                return;
            }
            var result = store.upsert(current);
            render(result.history);
            if (!result.success) {
                message.textContent = '履歴を保存できませんでした。ブラウザの保存設定を確認してください。';
            }
        }

        function regenerate(item) {
            var form = document.createElement('form');
            form.method = 'post';
            form.action = './#tb-link-generator';
            var fields = {
                history_regenerate: '1',
                history_shop_json: JSON.stringify(item),
                user_settings_json: window.localStorage.getItem('tabereba_settings_v1') || ''
            };
            Object.keys(fields).forEach(function (name) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = fields[name];
                form.appendChild(input);
            });
            document.body.appendChild(form);
            form.submit();
        }

        saveCurrent(null);
        render(store.load());

        document.addEventListener('tabereba:shop-generated', function (event) {
            saveCurrent(event.detail);
        });

        list.addEventListener('click', function (event) {
            var target = event.target;
            var id = target.dataset ? target.dataset.historyId : '';
            if (!id) {
                return;
            }
            if (target.classList.contains('tb-history-delete')) {
                var removed = store.remove(id);
                render(removed.history);
                message.textContent = removed.success
                    ? '履歴から1件削除しました。' : '履歴を削除できませんでした。';
                return;
            }
            if (target.classList.contains('tb-history-regenerate')) {
                var item = store.load().items.find(function (historyItem) { return historyItem.id === id; });
                if (item) {
                    regenerate(item);
                }
            }
        });

        clear.addEventListener('click', function () {
            if (!window.confirm('リンク作成履歴をすべて削除します。よろしいですか？')) {
                return;
            }
            var result = store.clear();
            render(result.history);
            message.textContent = result.success
                ? 'リンク作成履歴をすべて削除しました。' : '履歴を削除できませんでした。';
        });
    });
}());