{% extends "base.html" %}

{% block title %}{{ contact.name }} — Software of You{% endblock %}

{% block content %}
<!-- Contact Header -->
<div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-6 mb-6">
    <div class="flex items-start gap-4">
        <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-xl font-bold text-blue-700 shrink-0">
            {{ contact.name[:2] | upper }}
        </div>
        <div class="flex-1">
            <h1 class="text-2xl font-bold text-zinc-900">{{ contact.name }}</h1>
            {% if contact.role or contact.company %}
            <p class="text-sm text-zinc-500 mt-0.5">
                {{ contact.role or '' }}{{ ' at ' if contact.role and contact.company else '' }}{{ contact.company or '' }}
            </p>
            {% endif %}
            <div class="flex items-center gap-4 mt-2 text-sm text-zinc-500">
                {% if contact.email %}
                <span class="flex items-center gap-1"><i data-lucide="mail" class="w-3.5 h-3.5"></i> {{ contact.email }}</span>
                {% endif %}
                {% if contact.phone %}
                <span class="flex items-center gap-1"><i data-lucide="phone" class="w-3.5 h-3.5"></i> {{ contact.phone }}</span>
                {% endif %}
            </div>
            <div class="flex items-center gap-2 mt-3">
                {% with status=contact.status %}{% include "components/status_badge.html" %}{% endwith %}
                {% for tag in tags %}
                <span class="px-2 py-0.5 rounded-full text-xs" style="background: {{ tag.color }}20; color: {{ tag.color }}">{{ tag.name }}</span>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Two-column layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left column (2/3) -->
    <div class="lg:col-span-2 space-y-6">
        {% if narrative_sections and narrative_sections.relationship_context %}
        <!-- Relationship Context -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="heart" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Relationship Context</h3>
            </div>
            <div class="text-sm text-zinc-700 leading-relaxed space-y-2">
                {{ narrative_sections.relationship_context }}
            </div>
            {% if next_action %}
            <div class="mt-4 bg-amber-50 border border-amber-100 rounded-lg p-3">
                <div class="flex items-center gap-2">
                    <i data-lucide="clock" class="w-4 h-4 text-amber-600"></i>
                    <p class="text-sm font-medium text-amber-900">{{ next_action }}</p>
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {% if narrative_sections and narrative_sections.company_intel %}
        <!-- Company Intel -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="building-2" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">{{ contact.company or 'Company Intel' }}</h3>
            </div>
            <div class="text-sm text-zinc-700 leading-relaxed space-y-2">
                {{ narrative_sections.company_intel }}
            </div>
            {% if company_team %}
            <div class="mt-4 pt-4 border-t border-zinc-100">
                <p class="text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">Key Team</p>
                {% for member in company_team %}
                <div class="flex items-center gap-2 py-1">
                    <div class="w-6 h-6 rounded-full bg-zinc-100 flex items-center justify-center text-[10px] font-medium text-zinc-500">{{ member.name[:2] | upper }}</div>
                    <span class="text-sm text-zinc-700">{{ member.name }}</span>
                    {% if member.role %}<span class="text-xs text-zinc-400">· {{ member.role }}</span>{% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}

        {% if emails %}
        <!-- Email Threads -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="mail" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Email History</h3>
                <span class="px-2 py-0.5 rounded-full text-xs bg-zinc-100 text-zinc-500">{{ emails | length }} messages</span>
            </div>
            <div class="space-y-3">
                {% for email in emails %}
                <div class="flex items-start gap-3 pb-3 border-b border-zinc-100 last:border-0 last:pb-0">
                    <div class="w-7 h-7 rounded-full {{ 'bg-emerald-100' if email.direction == 'outbound' else 'bg-blue-100' }} flex items-center justify-center text-[10px] font-semibold {{ 'text-emerald-700' if email.direction == 'outbound' else 'text-blue-700' }} shrink-0">
                        {{ 'You' if email.direction == 'outbound' else (email.from_name[:2] | upper if email.from_name else '?') }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-medium text-zinc-700">{{ 'You' if email.direction == 'outbound' else email.from_name }}</span>
                            <span class="text-xs text-zinc-400">{{ email.received_at_formatted }}</span>
                        </div>
                        <p class="text-xs text-zinc-500 mt-0.5">{{ email.summary or email.snippet }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if call_intelligence %}
        <!-- Call Intelligence -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="brain" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Call Intelligence</h3>
                <span class="px-2 py-0.5 rounded-full text-xs bg-violet-50 text-violet-700">{{ transcripts | length }} calls</span>
            </div>
            {% if call_intelligence.pain_points %}
            <div class="mb-4">
                <p class="text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">Pain Points</p>
                {% for pp in call_intelligence.pain_points %}
                <div class="flex items-start gap-2 py-1.5">
                    <span class="w-2 h-2 rounded-full mt-1.5 {{ 'bg-red-500' if pp.severity == 'high' else 'bg-amber-500' }} shrink-0"></span>
                    <div>
                        <p class="text-sm font-medium text-zinc-700">{{ pp.title }}</p>
                        <p class="text-xs text-zinc-500">{{ pp.detail }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
            {% if call_intelligence.tech_stack %}
            <div class="mb-4">
                <p class="text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">Known Tech Stack</p>
                <div class="flex flex-wrap gap-1.5">
                    {% for tool in call_intelligence.tech_stack %}
                    <span class="px-2 py-0.5 rounded text-xs bg-zinc-100 text-zinc-600">{{ tool.name }} <span class="text-zinc-400">· {{ tool.category }}</span></span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if call_intelligence.key_concerns %}
            <div>
                <p class="text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">Key Concerns</p>
                {% for concern in call_intelligence.key_concerns %}
                <div class="flex items-start gap-2 py-1.5">
                    {% if concern.addressed %}
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-500 shrink-0 mt-0.5"></i>
                    {% else %}
                    <i data-lucide="alert-circle" class="w-4 h-4 text-amber-500 shrink-0 mt-0.5"></i>
                    {% endif %}
                    <div>
                        <p class="text-sm font-medium text-zinc-700">{{ concern.title }}</p>
                        <p class="text-xs text-zinc-500">{{ concern.detail }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Right column (1/3) -->
    <div class="space-y-4">
        {% if upcoming_events %}
        <!-- Upcoming -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="calendar" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Upcoming</h3>
            </div>
            {% for event in upcoming_events %}
            <div class="py-2 {{ 'bg-amber-50 -mx-2 px-2 rounded-lg border border-amber-100' if loop.first else 'border-b border-zinc-100 last:border-0' }}">
                <p class="text-sm font-medium text-zinc-900">{{ event.title }}</p>
                <p class="text-xs text-zinc-500 mt-0.5">{{ event.start_formatted }}</p>
                {% if event.location %}<p class="text-xs text-zinc-400">{{ event.location }}</p>{% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if projects %}
        <!-- Projects -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="folder" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Projects</h3>
            </div>
            {% for p in projects %}
            <div class="pb-3 border-b border-zinc-100 last:border-0 last:pb-0 mb-3">
                <div class="flex items-center gap-2 mb-1">
                    <span class="text-sm font-medium text-zinc-900">{{ p.name }}</span>
                    {% with status=p.status %}{% include "components/status_badge.html" %}{% endwith %}
                </div>
                {% if p.tasks %}
                <div class="space-y-1 mt-2">
                    {% for task in p.tasks %}
                    <div class="flex items-center gap-2 text-xs">
                        {% if task.status == 'done' %}
                        <i data-lucide="check-square" class="w-3 h-3 text-green-500"></i>
                        <span class="text-zinc-400 line-through">{{ task.title }}</span>
                        {% else %}
                        <i data-lucide="square" class="w-3 h-3 text-zinc-300"></i>
                        <span class="text-zinc-600">{{ task.title }}</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if notes or standalone_notes %}
        <!-- About / Notes -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="file-text" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">About</h3>
            </div>
            {% for note in notes %}
            <p class="text-sm text-zinc-600 leading-relaxed mb-2">{{ note.content }}</p>
            {% endfor %}
            {% for note in standalone_notes %}
            <div class="pb-2 mb-2 border-b border-zinc-100 last:border-0">
                {% if note.title %}<p class="text-xs font-medium text-zinc-700">{{ note.title }}</p>{% endif %}
                <p class="text-xs text-zinc-500">{{ note.preview }}</p>
                {% if note.tags %}
                <div class="flex flex-wrap gap-1 mt-1">
                    {% for tag in note.tags %}
                    <span class="px-1.5 py-0.5 rounded text-[10px] bg-violet-50 text-violet-600">{{ tag }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if follow_ups %}
        <!-- Follow-ups -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="clock" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Follow-ups</h3>
            </div>
            {% for fu in follow_ups %}
            <div class="py-2 border-b border-zinc-100 last:border-0">
                <p class="text-sm text-zinc-700">{{ fu.reason }}</p>
                <p class="text-xs {{ 'text-red-500' if fu.overdue else 'text-zinc-400' }}">{{ fu.due_date }}</p>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if narrative_sections and narrative_sections.discovery_questions %}
        <!-- Discovery Questions -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="help-circle" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Discovery Questions</h3>
            </div>
            <div class="text-sm text-zinc-700 leading-relaxed space-y-2">
                {{ narrative_sections.discovery_questions }}
            </div>
        </div>
        {% endif %}

        {% if relationship_score %}
        <!-- Relationship Score -->
        <div class="bg-white rounded-xl shadow-sm border border-zinc-200 p-5">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="trending-up" class="w-5 h-5 text-zinc-400"></i>
                <h3 class="text-sm font-semibold">Relationship Score</h3>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-zinc-50 rounded-lg p-3 text-center">
                    <p class="text-lg font-bold">{{ relationship_score.relationship_depth | default('—') | title }}</p>
                    <p class="text-[10px] text-zinc-500">Depth</p>
                </div>
                <div class="bg-zinc-50 rounded-lg p-3 text-center">
                    <p class="text-lg font-bold">{{ relationship_score.trajectory | default('—') | title }}</p>
                    <p class="text-[10px] text-zinc-500">Trajectory</p>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
