{% extends "_shell.html" %}
{% block title %}數據表：{{ table }} — alterdb{% endblock %}
{% block style %}
<style>
    .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .toolbar .title { display: flex; align-items: baseline; gap: .7rem; margin: 0; min-width: 0; }
    .toolbar h2 { margin: 0; overflow-wrap: anywhere; }
    .toolbar .type-badge {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: .1rem .5rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 999px;
        white-space: nowrap;
    }
    .toolbar .actions { display: flex; gap: .6rem; }
    .toolbar .actions a {
        font: inherit;
        padding: .35rem .9rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
    }
    .toolbar .actions a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
    .crumb { margin: 0 0 1.8rem; font-size: .9rem; opacity: .8; }
    .crumb code { opacity: 1; }
    section h3 { margin: 0 0 .7rem; }
    .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .7rem;
    }
    .section-head h3 { margin: 0; }
    .section-head button, #column-form button {
        font: inherit;
        font-size: .9rem;
        padding: .3rem .9rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .section-head button:hover, #column-form button:hover {
        background: color-mix(in srgb, currentColor 10%, transparent);
    }
    .section-head button:disabled, #column-form button:disabled {
        opacity: .5;
        cursor: not-allowed;
    }
    .error {
        margin: 0 0 1rem;
        padding: .5rem .75rem;
        border-radius: 6px;
        color: light-dark(#b3261e, #ffb4ab);
        background: color-mix(in srgb, currentColor 8%, transparent);
        overflow-wrap: anywhere;
    }
    /* 新增欄位的內嵌表單面板 */
    #column-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: .8rem 1.2rem;
        align-items: end;
        margin-bottom: 1rem;
        padding: 1rem 1.2rem;
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: 10px;
    }
    #column-form[hidden] { display: none; }
    #column-form .field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
    #column-form label { font-size: .85rem; opacity: .75; }
    #column-form input[type="text"], #column-form input[type="checkbox"] { font: inherit; }
    #column-form input[type="text"] {
        padding: .35rem .6rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
    }
    #column-form .form-actions {
        display: flex;
        gap: .6rem;
        grid-column: 1 / -1;
    }
    #column-form .hint { font-size: .8rem; opacity: .65; }
    /* 欄位過多時橫向滾動，不撐破版面 */
    .table-wrap {
        overflow-x: auto;
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: 10px;
    }
    .db-table {
        width: 100%;
        border-collapse: collapse;
        font-size: .95rem;
    }
    .db-table th, .db-table td {
        padding: .5rem .6rem;
        border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
        text-align: left;
        white-space: nowrap;
    }
    .db-table tr:last-child td { border-bottom: none; }
    .db-table th { font-weight: 600; }
    .db-table td.empty { text-align: center; opacity: .7; padding: 1.5rem 0; }
    .db-table td.mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .85em;
    }
    .db-table .actions { white-space: nowrap; }
    .db-table .actions button {
        font: inherit;
        padding: .2rem .6rem;
        font-size: .85rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 6px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .db-table .actions button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
    .db-table .actions .danger { color: light-dark(#b3261e, #ffb4ab); }
</style>
{% endblock %}
{% block page %}
<div id="table-detail" data-database-id="{{ database.id }}" data-table="{{ table }}">
    <div class="toolbar">
        <div class="title">
            <h2>{{ table }}</h2>
            <span class="type-badge">{{ database.db_type.as_str() }}</span>
        </div>
        <div class="actions">
            <a href="/databases/{{ database.id }}/tables/{{ table|urlencode_strict }}/data">數據管理</a>
            <a href="/databases/{{ database.id }}">返回連接詳情</a>
        </div>
    </div>

    <p class="crumb">
        連接 <a href="/databases/{{ database.id }}">{{ database.name }}</a> ·
        <code>{{ database.host }}:{{ database.port }}</code> ·
        資料庫 <code>{{ database.database_name }}</code>
    </p>

    <section aria-label="欄位結構">
        <div class="section-head">
            <h3>欄位結構</h3>
            <button type="button" id="add-column">新增欄位</button>
        </div>
        <form id="column-form" hidden>
            <div class="field">
                <label for="column-name">名稱</label>
                <input type="text" id="column-name" maxlength="64" required autocomplete="off">
            </div>
            <div class="field">
                <label for="column-type">類型</label>
                <input type="text" id="column-type" maxlength="128" required autocomplete="off"
                       placeholder="varchar(255)" list="type-suggestions">
                <datalist id="type-suggestions">
                    <option value="int"></option>
                    <option value="bigint"></option>
                    <option value="varchar(255)"></option>
                    <option value="text"></option>
                    <option value="decimal(10,2)"></option>
                    <option value="double"></option>
                    <option value="boolean"></option>
                    <option value="date"></option>
                    <option value="datetime"></option>
                    <option value="timestamp"></option>
                </datalist>
            </div>
            <div class="field">
                <label for="column-nullable">可空</label>
                <input type="checkbox" id="column-nullable" checked>
            </div>
            <div class="field">
                <label for="column-default">默認值（可留空）</label>
                <input type="text" id="column-default" maxlength="256" autocomplete="off"
                       placeholder="0、'文字'、CURRENT_TIMESTAMP">
            </div>
            <div class="form-actions">
                <button type="submit" id="column-submit">新增</button>
                <button type="button" id="column-cancel">取消</button>
            </div>
            <p class="hint">類型與默認值以原生 SQL 片段提交；新增會直接修改目標資料庫。</p>
        </form>
        <p id="columns-error" class="error" role="alert" hidden></p>
        <div class="table-wrap">
            <table class="db-table">
                <thead>
                    <tr><th>欄位</th><th>類型</th><th>可空</th><th>默認值</th><th>操作</th></tr>
                </thead>
                <tbody id="column-rows"></tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}
{% block script %}
<script>
(() => {
    'use strict';

    const root = document.getElementById('table-detail');
    const databaseId = root.dataset.databaseId;
    const tableName = root.dataset.table;
    const tableApi = '/api/databases/' + databaseId + '/tables/' + encodeURIComponent(tableName);

    const columnsError = document.getElementById('columns-error');
    const columnRows = document.getElementById('column-rows');
    const addColumnButton = document.getElementById('add-column');
    const columnForm = document.getElementById('column-form');
    const columnName = document.getElementById('column-name');
    const columnType = document.getElementById('column-type');
    const columnNullable = document.getElementById('column-nullable');
    const columnDefault = document.getElementById('column-default');
    const columnSubmit = document.getElementById('column-submit');
    const columnCancel = document.getElementById('column-cancel');

    async function api(path, options) {
        const response = await fetch(path, options);
        if (!response.ok) {
            let message = '請求失敗（HTTP ' + response.status + '）';
            try {
                const body = await response.json();
                if (body.error) { message = body.error; }
            } catch (_) { /* 非 JSON 錯誤體，保留默認訊息 */ }
            throw new Error(message);
        }
        return response.status === 204 ? null : response.json();
    }

    function messageRow(colspan, text) {
        const tr = document.createElement('tr');
        const td = document.createElement('td');
        td.colSpan = colspan;
        td.className = 'empty';
        td.textContent = text;
        tr.append(td);
        return tr;
    }

    // 所有動態值一律經 textContent 寫入，避免以字串拼接 HTML 引入注入風險
    function renderColumns(columns) {
        if (columns.length === 0) {
            columnRows.replaceChildren(messageRow(5, '找不到此資料表。'));
            return;
        }
        const rows = columns.map((column) => {
            const tr = document.createElement('tr');
            const name = document.createElement('td');
            name.className = 'mono';
            name.textContent = column.name;
            const type = document.createElement('td');
            type.className = 'mono';
            type.textContent = column.type;
            const nullable = document.createElement('td');
            nullable.textContent = column.nullable ? '是' : '否';
            const def = document.createElement('td');
            def.className = 'mono';
            def.textContent = column.default ?? '—';
            const actions = document.createElement('td');
            actions.className = 'actions';
            const dropButton = document.createElement('button');
            dropButton.type = 'button';
            dropButton.className = 'danger';
            dropButton.textContent = '刪除';
            dropButton.addEventListener('click', () => dropColumn(column.name));
            actions.append(dropButton);
            tr.append(name, type, nullable, def, actions);
            return tr;
        });
        columnRows.replaceChildren(...rows);
    }

    async function loadColumns() {
        columnsError.hidden = true;
        columnRows.replaceChildren(messageRow(5, '載入中…'));
        try {
            renderColumns(await api(tableApi + '/columns'));
        } catch (err) {
            columnRows.replaceChildren();
            columnsError.textContent = err.message;
            columnsError.hidden = false;
        }
    }

    addColumnButton.addEventListener('click', () => {
        columnsError.hidden = true;
        columnForm.hidden = false;
        columnName.focus();
    });

    columnCancel.addEventListener('click', () => {
        columnForm.hidden = true;
        columnForm.reset();
    });

    columnForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        const payload = {
            name: columnName.value,
            type: columnType.value,
            nullable: columnNullable.checked,
        };
        const defaultValue = columnDefault.value.trim();
        if (defaultValue !== '') { payload.default = defaultValue; }

        columnSubmit.disabled = true;
        try {
            await api(tableApi + '/columns', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            });
            columnForm.hidden = true;
            columnForm.reset();
            loadColumns();
        } catch (err) {
            columnsError.textContent = err.message;
            columnsError.hidden = false;
        } finally {
            columnSubmit.disabled = false;
        }
    });

    async function dropColumn(name) {
        if (!window.confirm('確定刪除欄位「' + name + '」？該欄位的資料將一併刪除且無法復原。')) { return; }
        try {
            await api(tableApi + '/columns/' + encodeURIComponent(name), { method: 'DELETE' });
            loadColumns();
        } catch (err) {
            columnsError.textContent = err.message;
            columnsError.hidden = false;
        }
    }

    loadColumns();
})();
</script>
{% endblock %}