{% extends "base.html" %}

{% block title %}AI工具库 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .ai-page { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border: 1px solid #e5e7eb; border-radius: 12px; min-height: calc(100vh - 200px); color: #1f2937; padding: 24px; }
    .ai-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
    .ai-title { font-size: 22px; font-weight: 700; color: #111827; }
    .ai-subtitle { font-size: 13px; color: #6b7280; margin-top: 4px; }
    .ai-search {
        display: flex; align-items: center; gap: 8px;
        background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px;
        padding: 8px 14px; min-width: 260px;
    }
    .ai-search input {
        background: transparent; border: none; outline: none; color: #1f2937;
        font-size: 14px; flex: 1;
    }

    .ai-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .ai-cat-btn {
        padding: 6px 16px; border-radius: 18px; font-size: 13px; cursor: pointer;
        background: transparent; color: #6b7280; border: 1px solid #e5e7eb; transition: all 0.2s;
    }
    .ai-cat-btn:hover { border-color: #3b82f6; color: #3b82f6; }
    .ai-cat-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    .ai-grid {
        display: grid; gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .ai-card {
        background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
        padding: 18px; transition: all 0.2s; cursor: pointer; position: relative;
        display: flex; flex-direction: column; gap: 10px;
    }
    .ai-card:hover { border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 165, 233, 0.1); }
    .ai-card-logo {
        width: 48px; height: 48px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .ai-card-head { display: flex; gap: 12px; align-items: center; }
    .ai-card-name { font-size: 15px; font-weight: 600; color: #111827; }
    .ai-card-cat {
        display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
        background: #f1f5f9; color: #6b7280; border: 1px solid #e5e7eb; margin-top: 4px;
    }
    .ai-card-desc { font-size: 13px; color: #6b7280; line-height: 1.6; min-height: 40px; }
    .ai-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .ai-card-tag {
        font-size: 11px; padding: 2px 8px; border-radius: 8px;
        background: #f1f5f9; color: #3b82f6; border: 1px solid #dbeafe;
    }
    .ai-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid #e5e7eb; }
    .ai-card-btn {
        flex: 1; padding: 6px 12px; border-radius: 6px; font-size: 12px;
        cursor: pointer; border: 1px solid #d1d5db; background: transparent; color: #4b5563;
        transition: all 0.2s;
    }
    .ai-card-btn:hover { border-color: #3b82f6; color: #3b82f6; }
    .ai-card-btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
    .ai-card-btn.primary:hover { background: #1d4ed8; }

    .ai-empty { text-align: center; padding: 80px 20px; color: #6b7280; }
    .ai-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
</style>
{% endblock %}

{% block content %}
<div class="ai-page">
    <div class="ai-header">
            <div>
                <div class="ai-title">🧰 AI工具库</div>
                <div class="ai-subtitle">常用AI工具一站式入口，点击直达官网；可添加自己的自定义导航</div>
            </div>
            <div style="display:flex;gap:10px;align-items:center;">
                <div class="ai-search">
                    <span style="color:#6b7280;">🔍</span>
                    <input type="text" id="ai-search-input" placeholder="搜索工具名称、标签或描述" onkeyup="debounceSearch()">
                </div>
                <button class="ai-cat-btn" style="background:#2563eb;color:#fff;border-color:#2563eb;white-space:nowrap;" onclick="openCustomModal()">➕ 自定义导航</button>
            </div>
        </div>

    <div class="ai-categories" id="ai-categories"></div>

    <div id="ai-grid" class="ai-grid"></div>
</div>

<!-- 自定义导航弹窗 -->
<div id="custom-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:1000;align-items:center;justify-content:center;" onclick="if(event.target===this)closeCustomModal()">
    <div style="background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;width:440px;max-width:92vw;color:#1f2937;">
        <h3 style="font-size:17px;font-weight:700;color:#111827;margin-bottom:16px;">➕ 添加自定义导航</h3>
        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:4px;">名称 <span style="color:#ef4444;">*</span></label>
        <input id="c-name" placeholder="如：某个AI工具官网" style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;margin-bottom:12px;box-sizing:border-box;">
        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:4px;">链接 URL <span style="color:#ef4444;">*</span></label>
        <input id="c-url" placeholder="https://..." style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;margin-bottom:12px;box-sizing:border-box;">
        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:4px;">描述</label>
        <input id="c-desc" placeholder="选填" style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;margin-bottom:12px;box-sizing:border-box;">
        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:4px;">图标文字</label>
        <input id="c-logo" placeholder="默认取名称前2字" style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:14px;outline:none;margin-bottom:12px;box-sizing:border-box;">
        <label style="display:block;font-size:13px;color:#6b7280;margin-bottom:8px;">图标颜色</label>
        <div id="c-colors" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;"></div>
        <div style="display:flex;justify-content:flex-end;gap:10px;">
            <button class="ai-cat-btn" onclick="closeCustomModal()">取消</button>
            <button class="ai-cat-btn" style="background:#2563eb;color:#fff;border-color:#2563eb;" onclick="saveCustomLink()">保存</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/ai_tools.js"></script>
{% endblock %}