{% extends "base.html" %}
{% block title %}Create a New Plan - PlanExe{% endblock %}
{% block head %}
<style>
    .new-plan-section {
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: 32px;
        box-shadow: 0 1px 3px var(--color-card-shadow);
    }
    .new-plan-header {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border);
    }
    .new-plan-header svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
    .new-plan-header h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
    .new-plan-body { padding: 20px; }
    .new-plan-body textarea {
        width: 100%; min-height: 120px; padding: 12px 14px;
        border: 1px solid var(--color-border); border-radius: var(--radius);
        font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.5;
        resize: vertical; outline: none; transition: border-color 0.15s;
        box-sizing: border-box; color: var(--color-text); background: var(--color-bg);
    }
    .new-plan-body textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
    .new-plan-body textarea::placeholder { color: var(--color-text-secondary); }
    .example-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .example-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 5px 12px; background: var(--color-bg-soft);
        border: 1px solid var(--color-border); border-radius: 20px;
        font-size: 0.78rem; font-weight: 500; color: var(--color-text-secondary);
        cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .example-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .new-plan-footer {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-top: 14px;
    }
    .new-plan-footer .footer-spacer { flex: 1 1 auto; }
    .new-plan-footer .model-profile-inline { width: auto; min-width: 0; max-width: none; }
    .model-profile-picker { position: relative; }
    .model-profile-button {
        width: auto; display: flex; align-items: center; justify-content: flex-start;
        gap: 0; padding: 6px 8px; border-radius: 8px;
        border: 1px solid var(--color-border); background: var(--color-bg-soft);
        color: var(--color-text); cursor: pointer; text-align: left;
    }
    .model-profile-button:hover { border-color: var(--color-primary); }
    .model-profile-title { font-size: 0.82rem; font-weight: 700; }
    .model-profile-subtitle { font-size: 0.75rem; color: var(--color-text-secondary); }
    .model-profile-caret {
        color: var(--color-text); opacity: 0.95;
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; flex: 0 0 16px;
    }
    .model-profile-caret svg { width: 16px; height: 16px; display: block; }
    .model-profile-menu {
        position: absolute; top: calc(100% + 6px); left: 0;
        width: max-content; min-width: 260px; z-index: 20;
        background: var(--color-bg); border: 1px solid var(--color-border);
        border-radius: 8px; box-shadow: 0 8px 24px var(--color-card-shadow);
        overflow: hidden; display: none;
    }
    .model-profile-menu.open { display: block; }
    .model-profile-menu-header {
        padding: 8px 12px; font-size: 0.72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.03em;
        color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border);
        background: var(--color-bg-soft);
    }
    .model-profile-option {
        width: 100%; border: none; border-bottom: 1px solid var(--color-border);
        background: transparent; color: var(--color-text); text-align: left;
        padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
    }
    .model-profile-option:last-child { border-bottom: none; }
    .model-profile-option:hover { background: var(--color-bg-soft); }
    .start-date-wrapper { display: flex; align-items: center; }
    .start-date-toggle {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 6px 8px; background: none;
        border: 1px solid var(--color-border); border-radius: var(--radius);
        font-family: var(--font-sans); font-size: 0.8rem;
        color: var(--color-text-secondary); cursor: pointer;
        transition: border-color 0.15s, color 0.15s;
    }
    .start-date-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .start-date-toggle svg { width: 14px; height: 14px; }
    .start-date-row { display: none; align-items: center; gap: 8px; }
    .start-date-row.open { display: flex; }
    .start-date-row input[type="date"] {
        padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius);
        font-family: var(--font-sans); font-size: 0.82rem;
        color: var(--color-text); background: var(--color-bg); outline: none;
        transition: border-color 0.15s;
    }
    .start-date-clear {
        padding: 4px 8px; background: none;
        border: 1px solid var(--color-border); border-radius: var(--radius);
        font-family: var(--font-sans); font-size: 0.75rem;
        color: var(--color-text-secondary); cursor: pointer;
        transition: border-color 0.15s, color 0.15s;
    }
    .start-date-clear:hover { border-color: var(--color-primary); color: var(--color-primary); }
    .btn-start-plan {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 28px; background: var(--color-primary); color: #fff;
        border: none; border-radius: var(--radius);
        font-size: 0.9rem; font-weight: 600; cursor: pointer;
        transition: background 0.15s, transform 0.1s;
    }
    .btn-start-plan:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
    .btn-start-plan:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn-start-plan svg { width: 16px; height: 16px; }
</style>
{% endblock %}

{% block content %}
<div class="new-plan-section">
    <div class="new-plan-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
        <h2>Create a New Plan</h2>
    </div>
    <div class="new-plan-body">
        {% if example_prompts %}
        <div class="example-chips">
            {% for ep in example_prompts %}
            <button type="button" class="example-chip" data-index="{{ loop.index0 }}">Example {{ loop.index }}</button>
            {% endfor %}
        </div>
        {% endif %}
        <form id="new-plan-form" method="POST" action="{{ url_for('plan_routes.create_plan') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="speed_vs_detail" value="all_details_but_slow">
            <textarea name="prompt" id="plan-prompt" placeholder="Describe your project or idea in detail. The more context you provide, the better the plan will be." required></textarea>
            <input type="hidden" name="start_date" id="start-date-hidden" value="">
            <div class="new-plan-footer">
                <div class="start-date-wrapper">
                    <button type="button" class="start-date-toggle" id="start-date-toggle">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                        Set start date
                    </button>
                    <div class="start-date-row" id="start-date-row">
                        <input type="date" id="start-date-input">
                        <button type="button" class="start-date-clear" id="start-date-clear">Clear</button>
                    </div>
                </div>
                <div class="footer-spacer"></div>
                <div class="model-profile-inline model-profile-picker">
                    {% set default_profile_option = model_profile_options[0] %}
                    <input type="hidden" name="model_profile" id="model-profile" value="{{ default_profile_option.value }}">
                    <button type="button" id="model-profile-button" class="model-profile-button" aria-haspopup="listbox" aria-expanded="false" title="Select model profile">
                        <span class="model-profile-title" id="model-profile-selected-title">{{ default_profile_option.title }}</span>
                        <span class="model-profile-caret" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </span>
                    </button>
                    <div id="model-profile-menu" class="model-profile-menu" role="listbox">
                        <div class="model-profile-menu-header">Select model profile</div>
                        {% for profile_option in model_profile_options %}
                        <button type="button" class="model-profile-option" data-value="{{ profile_option.value }}">
                            <span class="model-profile-title">{{ profile_option.title }}</span>
                            <span class="model-profile-subtitle">{{ profile_option.subtitle }}</span>
                        </button>
                        {% endfor %}
                    </div>
                </div>
                <button type="submit" class="btn-start-plan" id="btn-start-plan" title="Generate a plan from your prompt" {% if not can_create_plan %}disabled{% endif %}>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    {% if not can_create_plan %}
                        Insufficient credits
                    {% else %}
                        Generate Plan
                    {% endif %}
                </button>
            </div>
        </form>
    </div>
</div>

<div style="max-width:640px; margin:0 auto; font-size:0.82rem; line-height:1.6; color:var(--color-text-secondary);">
    <p style="margin:0 0 8px;">
        <strong>Tip:</strong> You can type a prompt above to try PlanExe out, however the intended way is when your AI assistant writes the prompt for you. A good prompt is detailed &mdash; it includes your goal, constraints, budget, timeline, and context. Writing all of that by hand takes effort and it's easy to leave out important details.
    </p>
    <p style="margin:0 0 8px;">
        The recommended way to use PlanExe is through <strong>MCP</strong> (Model Context Protocol). Connect PlanExe to your preferred AI tool &mdash; such as Claude, Cursor, or Windsurf &mdash; and let it interview you about your idea, then compose a thorough prompt on your behalf. This consistently produces higher-quality plans because the AI ensures nothing important is missing.
    </p>
    <p style="margin:0;">
        See the <a href="https://docs.planexe.org/mcp/mcp_welcome/" target="_blank" style="color:var(--color-primary, #0066cc);">MCP documentation</a> for how to set up MCP with your AI tool.
    </p>
</div>

{% if example_prompts %}
<script>
    var examplePrompts = {{ example_prompts | tojson | safe }};
    var textarea = document.getElementById('plan-prompt');
    document.querySelectorAll('.example-chip').forEach(function(chip) {
        chip.addEventListener('click', function() {
            var idx = parseInt(this.getAttribute('data-index'), 10);
            if (examplePrompts[idx]) { textarea.value = examplePrompts[idx]; textarea.focus(); }
        });
    });
</script>
{% endif %}
<script>
    (function() {
        var toggle = document.getElementById('start-date-toggle');
        var row = document.getElementById('start-date-row');
        var dateInput = document.getElementById('start-date-input');
        var hiddenDate = document.getElementById('start-date-hidden');
        var clearBtn = document.getElementById('start-date-clear');
        if (!toggle || !row || !dateInput || !hiddenDate || !clearBtn) return;
        toggle.addEventListener('click', function() {
            var isOpen = row.classList.contains('open');
            if (isOpen) { row.classList.remove('open'); toggle.style.display = ''; }
            else { row.classList.add('open'); toggle.style.display = 'none'; }
        });
        clearBtn.addEventListener('click', function() {
            dateInput.value = ''; hiddenDate.value = '';
            row.classList.remove('open'); toggle.style.display = '';
        });
        function toISO8601WithOffset(dateStr) {
            var d = new Date(dateStr + 'T20:55:00');
            if (isNaN(d.getTime())) return '';
            var off = -d.getTimezoneOffset();
            var sign = off >= 0 ? '+' : '-';
            var absOff = Math.abs(off);
            var hh = String(Math.floor(absOff / 60)).padStart(2, '0');
            var mm = String(absOff % 60).padStart(2, '0');
            return dateStr + 'T20:55:00' + sign + hh + ':' + mm;
        }
        dateInput.addEventListener('change', function() {
            hiddenDate.value = dateInput.value ? toISO8601WithOffset(dateInput.value) : '';
        });
    })();
    (function() {
        var hiddenInput = document.getElementById('model-profile');
        var button = document.getElementById('model-profile-button');
        var menu = document.getElementById('model-profile-menu');
        var titleEl = document.getElementById('model-profile-selected-title');
        if (!hiddenInput || !button || !menu || !titleEl) return;
        function closeMenu() { menu.classList.remove('open'); button.setAttribute('aria-expanded', 'false'); }
        function selectOption(optionEl) {
            var value = optionEl.getAttribute('data-value') || 'baseline';
            var nextTitle = optionEl.querySelector('.model-profile-title');
            hiddenInput.value = value;
            titleEl.textContent = nextTitle ? nextTitle.textContent : 'Baseline';
            closeMenu();
        }
        button.addEventListener('click', function() {
            if (menu.classList.contains('open')) closeMenu();
            else { menu.classList.add('open'); button.setAttribute('aria-expanded', 'true'); }
        });
        menu.querySelectorAll('.model-profile-option').forEach(function(optionEl) {
            optionEl.addEventListener('click', function() { selectOption(optionEl); });
        });
        document.addEventListener('click', function(event) {
            if (!menu.contains(event.target) && !button.contains(event.target)) closeMenu();
        });
    })();
</script>
{% endblock %}