{% extends "base.html" %}

{% block title %}{{ company.name }} - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .company-header {
        background: white;
        padding: var(--spacing-2xl);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        margin-bottom: var(--spacing-xl);
    }

    .company-category-badge {
        display: inline-block;
        padding: var(--spacing-xs) var(--spacing-md);
        background: var(--primary);
        color: white;
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }

    .company-name {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .company-description {
        font-size: var(--font-size-lg);
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: var(--spacing-xl);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        background: var(--background);
        border-radius: var(--radius-lg);
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-base);
    }

    .contact-item svg {
        color: var(--primary);
    }

    .contact-item a {
        color: var(--primary);
        text-decoration: none;
    }

    .contact-item a:hover {
        text-decoration: underline;
    }

    .company-section {
        background: white;
        padding: var(--spacing-xl);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
        border-bottom: 2px solid var(--border);
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-lg);
    }

    .info-item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .info-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .info-value {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
    }

    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .tag {
        padding: var(--spacing-xs) var(--spacing-md);
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .tag.primary {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-secondary);
        text-decoration: none;
        margin-bottom: var(--spacing-lg);
        transition: var(--transition);
    }

    .back-link:hover {
        color: var(--primary);
    }

    .score-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-2xl);
        font-weight: 700;
        margin: 0 auto var(--spacing-md);
    }

    .score-excellent { background: #dcfce7; color: #166534; }
    .score-good { background: #dbeafe; color: #1e40af; }
    .score-fair { background: #fef3c7; color: #92400e; }
    .score-poor { background: #fee2e2; color: #991b1b; }

    .feature-list {
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }

    .feature-list li {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        background: var(--background);
        border-radius: var(--radius);
    }

    .feature-icon {
        font-size: var(--font-size-lg);
    }

    .feature-yes { color: var(--success); }
    .feature-no { color: var(--error); }
</style>
{% endblock %}

{% block content %}
<a href="{{ url_for('index') }}" class="back-link">
    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 12H5M12 19l-7-7 7-7"/>
    </svg>
    Powrót do katalogu
</a>

<div class="company-header">
    {% if company.category %}
    <span class="company-category-badge">{{ company.category.name }}</span>
    {% endif %}

    <h1 class="company-name">{{ company.name }}</h1>

    {% if company.description_short %}
    <p class="company-description">{{ company.description_short }}</p>
    {% endif %}

    <div class="contact-grid">
        {% if company.website %}
        <div class="contact-item">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="10" cy="10" r="9"/>
                <path d="M1 10h18M10 1a15 15 0 0 1 0 18 15 15 0 0 1 0-18"/>
            </svg>
            <a href="{{ company.website }}" target="_blank" rel="noopener noreferrer">
                {{ company.website|replace('https://', '')|replace('http://', '')|replace('www.', '') }}
            </a>
        </div>
        {% endif %}

        {% if company.email %}
        <div class="contact-item">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                <path d="M22 6l-10 7L2 6"/>
            </svg>
            <a href="mailto:{{ company.email }}">{{ company.email }}</a>
        </div>
        {% endif %}

        {% if company.phone %}
        <div class="contact-item">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            <a href="tel:{{ company.phone }}">{{ company.phone }}</a>
        </div>
        {% endif %}

        {% if company.address_city %}
        <div class="contact-item">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                <circle cx="12" cy="10" r="3"/>
            </svg>
            {{ company.address_city }}
        </div>
        {% endif %}
    </div>
</div>

<!-- Digital Maturity Score -->
{% if maturity_data %}
<div class="company-section">
    <h2 class="section-title">📊 Dojrzałość Cyfrowa</h2>
    <div class="info-grid">
        <div class="info-item" style="text-align: center;">
            <div class="score-circle {% if maturity_data.overall_score >= 80 %}score-excellent{% elif maturity_data.overall_score >= 70 %}score-good{% elif maturity_data.overall_score >= 60 %}score-fair{% else %}score-poor{% endif %}">
                {{ maturity_data.overall_score }}
            </div>
            <span class="info-label">Overall Score</span>
        </div>
        <div class="info-item">
            <span class="info-label">Online Presence</span>
            <span class="info-value">{{ maturity_data.online_presence_score }}/100</span>
        </div>
        <div class="info-item">
            <span class="info-label">Sales Readiness</span>
            <span class="info-value">{{ maturity_data.sales_readiness|upper }}</span>
        </div>
        {% if maturity_data.total_opportunity_value %}
        <div class="info-item">
            <span class="info-label">Opportunity Value</span>
            <span class="info-value">{{ "{:,.0f}".format(maturity_data.total_opportunity_value) }} PLN</span>
        </div>
        {% endif %}
    </div>

    {% if maturity_data.critical_gaps %}
    <div style="margin-top: var(--spacing-lg);">
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Kluczowe braki:</h3>
        <div class="tags-container">
            {% for gap in maturity_data.critical_gaps %}
            <span class="tag">{{ gap }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Website Analysis - TEMPORARILY DISABLED FOR VERIFICATION -->
{% if false %}
{% if website_analysis %}
<div class="company-section">
    <h2 class="section-title">🌐 Analiza Strony Internetowej</h2>

    {% if website_analysis.content_summary %}
    <p style="line-height: 1.8; color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
        {{ website_analysis.content_summary }}
    </p>
    {% endif %}

    <div class="info-grid" style="margin-bottom: var(--spacing-lg);">
        <div class="info-item">
            <span class="info-label">Bogactwo treści</span>
            <span class="info-value">{{ website_analysis.content_richness_score }}/10</span>
        </div>
        <div class="info-item">
            <span class="info-label">CMS</span>
            <span class="info-value">{{ website_analysis.cms_detected or 'Unknown' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">SSL</span>
            <span class="info-value">{% if website_analysis.has_ssl %}✓ Tak{% else %}✗ Nie{% endif %}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Responsive</span>
            <span class="info-value">{% if website_analysis.is_responsive %}✓ Tak{% else %}✗ Nie{% endif %}</span>
        </div>
    </div>

    <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Funkcje strony:</h3>
    <ul class="feature-list">
        <li>
            <span class="feature-icon {% if website_analysis.has_blog %}feature-yes{% else %}feature-no{% endif %}">
                {% if website_analysis.has_blog %}✓{% else %}✗{% endif %}
            </span>
            Blog
        </li>
        <li>
            <span class="feature-icon {% if website_analysis.has_portfolio %}feature-yes{% else %}feature-no{% endif %}">
                {% if website_analysis.has_portfolio %}✓{% else %}✗{% endif %}
            </span>
            Portfolio
        </li>
        <li>
            <span class="feature-icon {% if website_analysis.has_contact_form %}feature-yes{% else %}feature-no{% endif %}">
                {% if website_analysis.has_contact_form %}✓{% else %}✗{% endif %}
            </span>
            Formularz kontaktowy
        </li>
        <li>
            <span class="feature-icon {% if website_analysis.has_live_chat %}feature-yes{% else %}feature-no{% endif %}">
                {% if website_analysis.has_live_chat %}✓{% else %}✗{% endif %}
            </span>
            Live Chat
        </li>
        <li>
            <span class="feature-icon {% if website_analysis.has_google_analytics %}feature-yes{% else %}feature-no{% endif %}">
                {% if website_analysis.has_google_analytics %}✓{% else %}✗{% endif %}
            </span>
            Google Analytics
        </li>
    </ul>

    {% if website_analysis.services_extracted %}
    <div style="margin-top: var(--spacing-lg);">
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Usługi zidentyfikowane na stronie:</h3>
        <div class="tags-container">
            {% for service in website_analysis.services_extracted[:10] %}
            <span class="tag">{{ service }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if website_analysis.missing_features %}
    <div style="margin-top: var(--spacing-lg);">
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); color: var(--warning);">Rekomendowane usprawnienia:</h3>
        <ul style="list-style: disc; padding-left: var(--spacing-xl); color: var(--text-secondary);">
            {% for feature in website_analysis.missing_features[:8] %}
            <li style="margin-bottom: var(--spacing-xs);">{{ feature }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endif %}

{% endif %}
<!-- Founding History -->
{% if company.founding_date or company.founding_story or company.owners_text or company.board_members_text %}
<div class="company-section">
    <h2 class="section-title">📜 Historia i Struktura</h2>

    {% if company.founding_story %}
    <p style="line-height: 1.8; color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
        {{ company.founding_story }}
    </p>
    {% endif %}

    {% if company.owners_text %}
    <div style="margin-bottom: var(--spacing-lg);">
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Właściciele:</h3>
        <p style="line-height: 1.8; color: var(--text-secondary);">{{ company.owners_text }}</p>
    </div>
    {% endif %}

    {% if company.board_members_text %}
    <div style="margin-bottom: var(--spacing-lg);">
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Zarząd:</h3>
        <p style="line-height: 1.8; color: var(--text-secondary);">{{ company.board_members_text }}</p>
    </div>
    {% endif %}

    {% if company.contact_person %}
    <div>
        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);">Osoba kontaktowa:</h3>
        <p style="line-height: 1.8; color: var(--text-secondary);">{{ company.contact_person }}</p>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Full Description -->
{% if company.description_full %}
<div class="company-section">
    <h2 class="section-title">O firmie</h2>
    <div style="line-height: 1.8; color: var(--text-secondary);">
        {{ company.description_full }}
    </div>
</div>
{% endif %}

<!-- Services -->
{% if company.services %}
<div class="company-section">
    <h2 class="section-title">Usługi</h2>
    <div class="tags-container">
        {% for cs in company.services %}
        {% if cs.service %}
        <span class="tag {% if cs.is_primary %}primary{% endif %}">
            {{ cs.service.name }}
        </span>
        {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Competencies -->
{% if company.competencies %}
<div class="company-section">
    <h2 class="section-title">Kompetencje</h2>
    <div class="tags-container">
        {% for cc in company.competencies %}
        {% if cc.competency %}
        <span class="tag">
            {{ cc.competency.name }}
        </span>
        {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Legal & Business Info -->
<div class="company-section">
    <h2 class="section-title">Informacje prawne i biznesowe</h2>
    <div class="info-grid">
        {% if company.legal_name %}
        <div class="info-item">
            <span class="info-label">Pełna nazwa</span>
            <span class="info-value">{{ company.legal_name }}</span>
        </div>
        {% endif %}

        {% if company.nip %}
        <div class="info-item">
            <span class="info-label">NIP</span>
            <span class="info-value">{{ company.nip }}</span>
        </div>
        {% endif %}

        {% if company.regon %}
        <div class="info-item">
            <span class="info-label">REGON</span>
            <span class="info-value">{{ company.regon }}</span>
        </div>
        {% endif %}

        {% if company.krs %}
        <div class="info-item">
            <span class="info-label">KRS</span>
            <span class="info-value">{{ company.krs }}</span>
        </div>
        {% endif %}

        {% if company.year_established %}
        <div class="info-item">
            <span class="info-label">Rok założenia</span>
            <span class="info-value">{{ company.year_established }}</span>
        </div>
        {% endif %}

        {% if company.employees_count %}
        <div class="info-item">
            <span class="info-label">Liczba pracowników</span>
            <span class="info-value">{{ company.employees_count }}</span>
        </div>
        {% endif %}
    </div>
</div>

<!-- Address -->
{% if company.address_full or company.address_street %}
<div class="company-section">
    <h2 class="section-title">Adres</h2>
    {% if company.address_full %}
        <p style="line-height: 1.8; color: var(--text-secondary);">{{ company.address_full }}</p>
    {% else %}
        <p style="line-height: 1.8; color: var(--text-secondary);">
            {{ company.address_street }}<br>
            {{ company.address_postal }} {{ company.address_city }}
        </p>
    {% endif %}
</div>
{% endif %}
{% endblock %}
