{% extends "base.html" %}
{% block title %}{{ s.name }} — Strategic Memory CRM{% endblock %}

{% block content %}
<div class="breadcrumb">
    <a href="/">Dashboard</a> &rsaquo; {{ s.name }}
</div>

<div class="stakeholder-header">
    <div>
        <h1>{{ s.name }}</h1>
        <p class="subtitle">{{ s.role }} &mdash; {{ s.organization }}</p>
    </div>
    <div class="header-badges">
        <span class="badge badge-tier">{{ s.tier.value|replace('_', ' ') }}</span>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-card">
        <h3>Influence Metrics</h3>
        <dl>
            <dt>Power Score</dt><dd>{{ power_score }}</dd>
            <dt>PageRank</dt><dd>{{ pagerank }}</dd>
            <dt>Betweenness</dt><dd>{{ betweenness }}</dd>
        </dl>
    </div>

    <div class="detail-card">
        <h3>Risk Assessment</h3>
        {% if risk %}
        <div class="risk-score {% if risk.risk_score > 0.5 %}risk-high{% elif risk.risk_score > 0.3 %}risk-medium{% else %}risk-low{% endif %}">
            {{ risk.risk_score }}
        </div>
        {% for f in risk.factors %}
        <span class="flag">{{ f|replace('_', ' ') }}</span>
        {% endfor %}
        {% if risk.recommendations %}
        <h4>Recommendations</h4>
        <ul>{% for r in risk.recommendations %}<li>{{ r }}</li>{% endfor %}</ul>
        {% endif %}
        {% endif %}
    </div>

    <div class="detail-card">
        <h3>Personality Profile</h3>
        {% for axis, val in s.personality.items() %}
        <div class="personality-bar">
            <span class="axis-label">{{ axis|replace('_', ' ')|title }}</span>
            <div class="bar-track">
                <div class="bar-fill" style="width: {{ (val * 100)|int }}%"></div>
            </div>
            <span class="axis-value">{{ (val * 100)|int }}%</span>
        </div>
        {% endfor %}
    </div>

    <div class="detail-card">
        <h3>Negotiation Profile</h3>
        {% if profile %}
        <dl>
            <dt>Style</dt><dd><span class="badge badge-neg-{{ profile.dominant_style }}">{{ profile.dominant_style }}</span></dd>
            <dt>Reliability</dt><dd>{{ profile.reliability_score }}</dd>
            <dt>Concession Ratio</dt><dd>{{ profile.concession_ratio }}</dd>
            <dt>Power Moves</dt><dd>{{ profile.power_moves }}</dd>
            <dt>Negotiations</dt><dd>{{ profile.total_negotiations }}</dd>
        </dl>
        {% if profile.patterns %}
        <div class="mt-1">
            {% for p in profile.patterns %}
            <span class="flag flag-neg">{{ p|replace('_', ' ') }}</span>
            {% endfor %}
        </div>
        {% endif %}
        {% else %}
        <p class="muted">No negotiation data</p>
        {% endif %}
    </div>
</div>

<!-- ============ AI STRATEGIC ADVISOR SECTION ============ -->
<section class="section advisor-section">
    <div class="advisor-header">
        <div>
            <h2>⚡ AI Strategic Advisor & Tactical Briefing</h2>
            <p class="subtitle">Generate high-stakes negotiation battleplans, leverage points, and red-line warnings</p>
        </div>
    </div>
    
    <div class="advisor-controls-card">
        <div class="advisor-config-row">
            <div class="form-group" style="flex: 1;">
                <label>AI Intelligence Engine:</label>
                <select id="advisor-provider" onchange="toggleAdvisorKeyField()">
                    <option value="builtin" selected>🟢 Built-in Tactical Engine (Offline / Instant)</option>
                    <option value="gemini">✨ Google Gemini (2.0 Flash / Pro)</option>
                    <option value="openai">🧠 OpenAI (GPT-4o / Mini)</option>
                    <option value="anthropic">⚡ Anthropic Claude (3.5 Sonnet)</option>
                </select>
            </div>
            <div class="form-group" id="advisor-key-container" style="flex: 2; display: none;">
                <label>API Key (Saved locally):</label>
                <input type="password" id="advisor-api-key" placeholder="Enter API key...">
            </div>
        </div>
        <div class="form-group">
            <label>Specific Meeting Context or Objective:</label>
            <input type="text" id="advisor-context" placeholder="e.g. Discussing European expansion budget cuts and head-count allocation..." value="Strategic alignment on upcoming quarterly milestone commitments">
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
            <button class="btn btn-primary" id="btn-generate-briefing" onclick="generateTacticalBriefing()">⚡ Generate Tactical Briefing</button>
        </div>
    </div>

    <div id="briefing-output-container" class="briefing-output-card" style="display: none;">
        <div class="briefing-toolbar">
            <span id="briefing-status" class="briefing-status">✔ Briefing Generated</span>
            <button class="btn btn-secondary btn-sm" onclick="copyBriefing()">📋 Copy Briefing</button>
        </div>
        <div id="briefing-content" class="briefing-markdown"></div>
    </div>
</section>

<section class="section">
    <h2>Strategic Context</h2>
    <div class="context-grid">
        <div>
            <h3>Goals</h3>
            <ul>{% for g in s.goals %}<li>{{ g }}</li>{% endfor %}</ul>
        </div>
        <div>
            <h3>Vulnerabilities</h3>
            <ul>{% for v in s.vulnerabilities %}<li>{{ v }}</li>{% endfor %}</ul>
        </div>
        <div>
            <h3>Political Vulnerabilities</h3>
            {% if vulnerabilities %}
            <ul>{% for v in vulnerabilities %}<li>{{ v|replace('_', ' ') }}</li>{% endfor %}</ul>
            {% else %}<p class="muted">None detected</p>{% endif %}
        </div>
    </div>
</section>

<section class="section">
    <h2>Relationships</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Stakeholder</th>
                    <th>Trust</th>
                    <th>Entropy</th>
                    <th>Risk</th>
                    <th>Interactions</th>
                    <th>Trajectory</th>
                    <th>Reciprocity</th>
                </tr>
            </thead>
            <tbody>
                {% for r in relationships %}
                <tr>
                    <td><a href="/stakeholder/{{ r.other_id }}"><strong>{{ r.other_name }}</strong></a></td>
                    <td>
                        <div class="bar-cell">
                            <div class="bar bar-trust" style="width: {{ (r.trust * 100)|int }}%"></div>
                            <span>{{ r.trust }}</span>
                        </div>
                    </td>
                    <td>
                        <div class="bar-cell">
                            <div class="bar bar-entropy" style="width: {{ (r.entropy * 100)|int }}%"></div>
                            <span>{{ r.entropy }}</span>
                        </div>
                    </td>
                    <td>
                        <div class="bar-cell">
                            <div class="bar bar-risk" style="width: {{ (r.risk * 100)|int }}%"></div>
                            <span>{{ r.risk }}</span>
                        </div>
                    </td>
                    <td>{{ r.interactions }}</td>
                    <td><span class="badge badge-traj-{{ r.trajectory }}">{{ r.trajectory|replace('_', ' ') }}</span></td>
                    <td>{{ r.reciprocity }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>

<section class="section">
    <h2>Recent Interactions</h2>
    <div class="timeline">
        {% for i in interactions %}
        <div class="timeline-item sentiment-{{ i.sentiment }}">
            <div class="timeline-date">{{ i.timestamp[:10] }}</div>
            <div class="timeline-body">
                <span class="badge badge-itype">{{ i.type|replace('_', ' ') }}</span>
                <p>{{ i.summary }}</p>
                {% if i.commitments_made %}
                <div class="commitments">
                    <strong>Commitments:</strong>
                    {% for c in i.commitments_made %}
                    <span class="commitment-tag">{{ c }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<script>
function toggleAdvisorKeyField() {
    const provider = document.getElementById('advisor-provider').value;
    const keyCont = document.getElementById('advisor-key-container');
    const keyInput = document.getElementById('advisor-api-key');
    if (provider === 'builtin') {
        keyCont.style.display = 'none';
    } else {
        keyCont.style.display = 'block';
        keyInput.value = localStorage.getItem('crm_advisor_key_' + provider) || '';
    }
}

function parseMarkdownToHTML(md) {
    if (!md) return '';
    return md
        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
        .replace(/^\* (.*$)/gim, '<li>$1</li>')
        .replace(/^- (.*$)/gim, '<li>$1</li>')
        .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/gim, '<em>$1</em>')
        .replace(/`([^`]+)`/gim, '<code>$1</code>')
        .replace(/\n\n/gim, '<br><br>');
}

function generateTacticalBriefing() {
    const provider = document.getElementById('advisor-provider').value;
    const apiKey = document.getElementById('advisor-api-key').value.trim();
    const context = document.getElementById('advisor-context').value.trim();
    const btn = document.getElementById('btn-generate-briefing');
    const outCont = document.getElementById('briefing-output-container');
    const outDiv = document.getElementById('briefing-content');
    const statusEl = document.getElementById('briefing-status');

    if (provider !== 'builtin') {
        localStorage.setItem('crm_advisor_key_' + provider, apiKey);
    }

    btn.disabled = true;
    btn.textContent = '⚡ Analyzing & Generating Battleplan...';
    outCont.style.display = 'block';
    outDiv.innerHTML = '<p class="muted">Synthesizing behavioral metrics, psychometrics, and political network graph...</p>';

    fetch('/api/advisor/briefing', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            stakeholder_id: '{{ s.id }}',
            context: context,
            provider: provider,
            apiKey: apiKey
        })
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            outDiv.innerHTML = `<p style="color: #ef4444;"><strong>Error:</strong> ${data.error}</p>`;
            statusEl.textContent = '❌ Generation Failed';
        } else {
            outDiv.innerHTML = parseMarkdownToHTML(data.output);
            statusEl.textContent = `✔ Briefing Generated (${data.provider.toUpperCase()})`;
        }
    })
    .catch(err => {
        outDiv.innerHTML = `<p style="color: #ef4444;"><strong>Network Error:</strong> ${err.message}</p>`;
        statusEl.textContent = '❌ Error';
    })
    .finally(() => {
        btn.disabled = false;
        btn.textContent = '⚡ Generate Tactical Briefing';
    });
}

function copyBriefing() {
    const text = document.getElementById('briefing-content').innerText;
    navigator.clipboard.writeText(text).then(() => {
        alert('Tactical briefing copied to clipboard!');
    });
}

window.addEventListener('DOMContentLoaded', () => {
    toggleAdvisorKeyField();
});
</script>
{% endblock %}