{% extends "v3/base.html" %}

{% block content %}
<div id="workspace-gate-banner" style="display:none;"></div>

<div class="page-header">
    <h1 class="page-title">Abonnement</h1>
    <p class="text-muted" style="margin-top:0.25rem;">Commence gratuitement, évolue selon ton usage.</p>
</div>

<div id="pricing-loading" class="text-muted" style="padding: 2rem; text-align: center;">
    Chargement des plans...
</div>

<div id="pilot-banner" style="display:none;"></div>

<div id="pricing-grid" class="pricing-grid" style="display:none;"></div>

<div id="launch-offer" style="display:none; margin-top: 2.5rem; max-width: 980px;"></div>

<div id="pricing-faq" style="display:none;"></div>

<style>
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
        gap: 1rem;
        max-width: 980px;
        margin-top: 2rem;
    }
    .pricing-card {
        position: relative;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.5rem 1.25rem;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.2s, transform 0.2s;
    }
    .pricing-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
    .pricing-card.highlight {
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--accent);
    }
    .pricing-card.current {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent-light);
    }
    .pricing-badge {
        position: absolute;
        top: -0.75rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        white-space: nowrap;
        letter-spacing: 0.02em;
    }
    .badge-reco { background: var(--accent); color: #fff; }
    .badge-current { background: var(--accent); color: #fff; }
    .badge-soon { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); }
    .pricing-name { font-size: 1.05rem; font-weight: 700; }
    .pricing-subtitle {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin: 0.15rem 0 0.5rem;
        line-height: 1.35;
        min-height: 2rem;
    }
    .pricing-price { margin: 0.25rem 0 0.1rem; }
    .price-num { font-size: 1.75rem; font-weight: 700; color: var(--accent); }
    .price-num .currency { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
    .price-hint { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-top: 0.15rem; }
    .pricing-tag {
        font-size: 0.72rem;
        color: var(--accent);
        font-weight: 500;
        margin: 0.4rem 0 0.2rem;
        line-height: 1.3;
        min-height: 1.8rem;
    }
    .pricing-desc {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        line-height: 1.45;
        min-height: 2rem;
    }
    .pricing-features { list-style: none; flex: 1; margin-bottom: 1.25rem; padding: 0; }
    .pricing-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.3rem 0;
        font-size: 0.82rem;
        line-height: 1.35;
    }
    .pricing-features svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .pricing-action { margin-top: auto; }
    .pricing-action .btn { width: 100%; justify-content: center; padding: 0.55rem 1rem; }
    .btn-current { background: var(--bg-hover); color: var(--text-muted); cursor: default; border-color: var(--border); }
    .btn-soon { background: var(--bg-hover); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); opacity: 0.7; }
    .pilot-banner {
        max-width: 980px;
        margin: 1.5rem 0 0;
        background: var(--accent-light);
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        padding: 1rem 1.25rem;
        text-align: center;
    }
    .gate-banner {
        max-width: 980px;
        margin: 0 0 1.5rem;
        background: var(--accent);
        color: #fff;
        border-radius: var(--radius);
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    }
    .gate-banner .gate-lock { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
    .gate-banner .gate-title { font-weight: 700; }
    .gate-banner .gate-sub { font-size: 0.85rem; opacity: 0.9; margin-top: 0.1rem; }
    .pilot-banner .pilot-kicker { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
    .pilot-banner .pilot-title { font-weight: 600; margin-top: 0.2rem; }
    .pilot-banner .pilot-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; }
    .pricing-faq {
        max-width: 980px;
        margin: 2rem 0 0;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.5rem;
    }
    .pricing-faq h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 1rem; }
    .pricing-faq .faq-q { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.25rem; }
    .pricing-faq .faq-a { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }
    .pricing-note { max-width: 980px; font-size: 0.75rem; color: var(--text-muted); margin: 1rem 0 0; line-height: 1.5; }
</style>
{% endblock %}

{% block scripts %}
<script>
let currentPlan = 'free';
let currentLevel = 0;

// Contenu marketing calqué sur le site vitrine (bullets/tags/sous-titres).
// Les chiffres (prix, plans actifs, « à venir ») viennent de Supabase via /api/billing/plans.
const PLAN_CONTENT = {
    free: {
        subtitle: "Découverte — aucune carte requise",
        descOverride: "Essaie sans carte bancaire. Pas de trial expiré.",
        features: [
            "20 min offertes à l'inscription",
            "5 min/jour après",
            "Correction et traduction basiques",
            "Pas de connecteurs",
        ],
    },
    starter: {
        subtitle: "Assistant vocal IA",
        tag: "L'assistant vocal IA, 100% français",
        highlight: true,
        features: [
            "Transcription illimitée toute la journée",
            "Quota IA journalier — largement suffisant pour une journée de travail",
            "Correction et traduction illimitées",
            "Connecteurs MCP (Gmail, Outlook, outils métier)",
            "Orchestrateur simple — un raccourci, plusieurs agents",
        ],
    },
    pro: {
        subtitle: "Assistant vocal + chatbot IA + automatisations — plus de quota que Starter",
        tag: "Vocal · Chat IA · Automatisation",
        features: [
            "Tout le plan Starter",
            "Plus de quota IA que Starter",
            "Orchestrateur complet — agents en cascade, contexte enrichi",
            "Automatisations locales — scripts Python qui s'exécutent sur ta machine",
            "Buffer automatique si quota épuisé en cours de journée",
        ],
    },
    pro_x3: {
        subtitle: "Assistant vocal + automatisations hébergées 24/7 — 3× les limites Pro",
        tag: "Le seul plan où Vicsia travaille en ton absence",
        features: [
            "Tout le plan Pro",
            "3× plus de quota IA que Pro",
            "Automatisations hébergées 24/7 — scripts qui tournent même quand tu dors",
            "Buffer automatique étendu",
        ],
    },
};

const CHECK_SVG = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M5 13l4 4L19 7"/></svg>';

function fmtEur(n) {
    return Number(n).toFixed(2).replace('.', ',').replace(/,00$/, '');
}

function betaUntilLabel() {
    if (!window.betaUntil) return '1er septembre';
    const d = new Date(window.betaUntil);
    if (isNaN(d)) return '1er septembre';
    const day = d.getDate();
    const month = d.toLocaleDateString('fr-FR', {month: 'long'});
    return `${day === 1 ? '1er' : day} ${month}`;
}

function fullDateLabel(value, fallback) {
    if (!value) return fallback;
    const d = new Date(value);
    if (isNaN(d)) return fallback;
    return d.toLocaleDateString('fr-FR', {day: 'numeric', month: 'long', year: 'numeric'});
}

async function loadPricing() {
    try {
        const [plansRes, authRes, offerRes, appModeRes] = await Promise.all([
            fetch('/api/billing/plans'),
            fetch('/api/auth/status'),
            fetch('/api/billing/launch-offer'),
            fetch('/api/billing/app-mode'),
        ]);

        const allPlans = await plansRes.json();
        const auth = await authRes.json();
        const offer = await offerRes.json();
        const appMode = await appModeRes.json();
        window.appMode = appMode.app_mode || 'normal';
        window.betaUntil = appMode.beta_until || null;

        renderWorkspaceGate();

        if (auth.authenticated) {
            currentPlan = auth.subscription?.plan || 'free';
        }

        // Enterprise = offre sur mesure, jamais affichée publiquement.
        const plans = allPlans.filter(p => p.plan !== 'enterprise');
        if (!plans.length) {
            document.getElementById('pricing-loading').textContent = 'Aucun plan disponible.';
            return;
        }

        const currentPlanData = plans.find(p => p.plan === currentPlan);
        currentLevel = currentPlanData ? currentPlanData.level : 0;
        const maxLevel = Math.max(...plans.map(p => p.level));
        window.isMaxPlan = currentLevel >= maxLevel;

        renderPilotBanner();

        const grid = document.getElementById('pricing-grid');
        grid.innerHTML = plans.map(renderCard).join('');
        grid.style.display = '';
        document.getElementById('pricing-loading').style.display = 'none';

        renderFaq();

        if (window.appMode !== 'beta_free' && offer.enabled && new Date(offer.expiry) > new Date()
            && (!auth.authenticated || currentPlan === 'free')) {
            renderLaunchOffer(offer);
        }
    } catch (e) {
        console.error('Erreur chargement pricing:', e);
        document.getElementById('pricing-loading').textContent = 'Erreur de chargement.';
    }
}

function renderWorkspaceGate() {
    // Affiché quand l'utilisateur arrive depuis un lien verrouillé.
    //  - from=workspace : Chat IA, Projets, Artefacts, Automatisation -> plan Pro.
    //  - from=scripts   : page Scripts -> dès le plan Starter (≠ Pro). Cf. base.html
    //    ws_link et les redirections côté blueprints.
    const from = new URLSearchParams(window.location.search).get('from');
    if (from !== 'workspace' && from !== 'scripts') return;
    const el = document.getElementById('workspace-gate-banner');
    el.className = 'gate-banner';
    if (from === 'scripts') {
        el.innerHTML = `
            <span class="gate-lock" aria-hidden="true">&#128274;</span>
            <div>
                <div class="gate-title">Les Scripts sont disponibles dès le plan Starter</div>
                <div class="gate-sub">Le mode connecteur est inclus dès Starter ; planifié, webhook et hébergé 24h/24 sont sur Pro / Pro x3.</div>
            </div>`;
    } else {
        el.innerHTML = `
            <span class="gate-lock" aria-hidden="true">&#128274;</span>
            <div>
                <div class="gate-title">L'espace de travail (Chat IA, Projets, Artefacts) nécessite le plan Pro</div>
                <div class="gate-sub">Le plan Pro ouvre le ${betaUntilLabel()}.</div>
            </div>`;
    }
    el.style.display = '';
}

function renderPilotBanner() {
    if (window.appMode !== 'beta_free') return;
    const el = document.getElementById('pilot-banner');
    el.className = 'pilot-banner';
    el.innerHTML = `
        <div class="pilot-kicker">Phase de lancement</div>
        <div class="pilot-title">Le plan Starter est offert à tous jusqu'au ${betaUntilLabel()}</div>
        <div class="pilot-sub">Les plans Pro et Pro x3 ouvrent le ${betaUntilLabel()} — les tarifs ci-dessous s'appliqueront à cette date.</div>`;
    el.style.display = '';
}

function priceBlock(plan, content) {
    const monthly = parseFloat(plan.price_monthly || 0);
    const annual = parseFloat(plan.price_annual || 0);
    const isComingSoon = !!(plan.features && plan.features.coming_soon);
    const isBetaFree = window.appMode === 'beta_free';

    if (isComingSoon) {
        const base = annual > 0 ? annual : monthly;
        return base > 0
            ? `<span class="price-num" style="font-size:1.3rem;color:var(--text-muted);">À partir de ${fmtEur(base)}<span class="currency"> €/mois</span></span>`
            : `<span class="price-num" style="color:var(--text-muted);">À définir</span>`;
    }
    if (monthly === 0) {
        return `<span class="price-num">Gratuit</span>`;
    }
    if (isBetaFree && plan.plan === 'starter') {
        return `<span class="price-num">Gratuit</span><div class="price-hint">puis ${fmtEur(annual || monthly)} €/mois à partir du ${betaUntilLabel()}</div>`;
    }
    if (annual > 0 && annual < monthly) {
        return `<span class="price-num">${fmtEur(annual)}<span class="currency"> €/mois HT</span></span><div class="price-hint">ou ${fmtEur(monthly)} €/mois sans engagement</div>`;
    }
    return `<span class="price-num">${fmtEur(monthly)}<span class="currency"> €/mois HT</span></span>`;
}

function descBlock(plan, content) {
    if (content.descOverride) return content.descOverride;
    const monthly = parseFloat(plan.price_monthly || 0);
    const annual = parseFloat(plan.price_annual || 0);
    if (!(plan.features && plan.features.coming_soon) && annual > 0 && annual < monthly) {
        return `Engagement annuel — ${Math.round(annual * 12)}€/an. Sans engagement : ${fmtEur(monthly)}€/mois.`;
    }
    return '';
}

function actionBtn(plan, content) {
    const isCurrent = plan.plan === currentPlan;
    const isUpgrade = plan.level > currentLevel;
    const isDowngrade = plan.level < currentLevel && plan.plan !== 'free';
    const isFree = plan.plan === 'free';
    const isComingSoon = !!(plan.features && plan.features.coming_soon);
    const isBetaFree = window.appMode === 'beta_free';

    if (isComingSoon) {
        const date = fullDateLabel(plan.features.coming_soon_date, 'septembre 2026');
        return `<button class="btn btn-soon" disabled>Disponible le ${date}</button>`;
    }
    if (isCurrent) {
        if (isFree) return '<button class="btn btn-current" disabled>Votre plan actuel</button>';
        return '<button class="btn btn-secondary" onclick="goPortal()">Gérer mon abonnement</button>';
    }
    if (isFree) return '';
    if (isBetaFree && isUpgrade) {
        const date = fullDateLabel(window.betaUntil, 'la fin de la phase pilote');
        return `<button class="btn btn-soon" disabled title="Phase pilote en cours">Disponible le ${date}</button>`;
    }
    if (isUpgrade) {
        return `<button class="btn btn-primary" onclick="doCheckout('${plan.plan}')">Passer à ${plan.display_name}</button>`;
    }
    if (isDowngrade && !window.isMaxPlan) {
        return `<button class="btn btn-secondary" onclick="goPortal()">Downgrade</button>`;
    }
    return '';
}

function renderCard(plan) {
    const content = PLAN_CONTENT[plan.plan] || {features: []};
    const isCurrent = plan.plan === currentPlan;
    const isComingSoon = !!(plan.features && plan.features.coming_soon);
    const highlight = !!content.highlight && !isComingSoon;

    let badge = '';
    if (isCurrent) {
        badge = '<span class="pricing-badge badge-current">Votre plan</span>';
    } else if (isComingSoon) {
        const date = fullDateLabel(plan.features.coming_soon_date, 'le 1er septembre');
        badge = `<span class="pricing-badge badge-soon">Disponible ${date}</span>`;
    } else if (highlight) {
        badge = '<span class="pricing-badge badge-reco">Recommandé</span>';
    }

    const features = (content.features || [])
        .map(f => `<li>${CHECK_SVG}<span>${f}</span></li>`).join('');
    const tag = content.tag ? `<div class="pricing-tag">${content.tag}</div>` : '<div class="pricing-tag"></div>';
    const desc = descBlock(plan, content);

    const cls = `pricing-card${highlight ? ' highlight' : ''}${isCurrent ? ' current' : ''}`;
    return `
        <div class="${cls}">
            ${badge}
            <div class="pricing-name">${plan.display_name}</div>
            <div class="pricing-subtitle">${content.subtitle || ''}</div>
            <div class="pricing-price">${priceBlock(plan, content)}</div>
            ${tag}
            <div class="pricing-desc">${desc}</div>
            <ul class="pricing-features">${features}</ul>
            <div class="pricing-action">${actionBtn(plan, content)}</div>
        </div>`;
}

function renderFaq() {
    const el = document.getElementById('pricing-faq');
    el.innerHTML = `
        <div class="pricing-note">Prix HT. La TVA est ajoutée au paiement par Polar (Merchant of Record). Entreprises avec n° TVA intracom valide : reverse charge applicable.</div>`;
    el.style.display = '';
}

function renderLaunchOffer(offer) {
    const s = offer.starter;
    const priceEur = (s.price / 100).toFixed(2).replace('.', ',');
    const perMonth = (s.price / 100 / s.months).toFixed(2).replace('.', ',');
    const savingsEur = (s.savings / 100).toFixed(0);
    const expiryFr = fullDateLabel(offer.expiry, '');
    let features = [];
    try { features = JSON.parse(s.features || '[]'); } catch (_) {}

    const el = document.getElementById('launch-offer');
    el.innerHTML = `
        <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
            <span style="background:var(--accent);color:#fff;font-size:0.72rem;font-weight:700;padding:0.2rem 0.7rem;border-radius:999px;letter-spacing:0.04em;">OFFRE DE LANCEMENT</span>
            <span style="font-size:0.82rem;color:var(--text-muted);">Première souscription uniquement · Paiement unique</span>
        </div>
        <div style="font-size:0.78rem;color:var(--text-muted);margin-bottom:1rem;">Offre valable jusqu'au ${expiryFr}</div>
        <div class="pricing-grid" style="margin-top:0;">
            <div class="pricing-card highlight">
                <div class="pricing-name">Starter · ${s.months} mois</div>
                <div class="pricing-price"><span class="price-num">${perMonth}<span class="currency"> €/mois</span></span>
                    <div class="price-hint">${priceEur} € pour ${s.months} mois, payé en une fois</div>
                </div>
                <ul class="pricing-features">
                    ${features.map(f => `<li>${CHECK_SVG}<span>${f.replace('{savings}', savingsEur)}</span></li>`).join('')}
                </ul>
                <div class="pricing-action"><button class="btn btn-primary" onclick="doCheckout('starter_launch')">Profiter de l'offre</button></div>
            </div>
        </div>`;
    el.style.display = '';
}

async function doCheckout(plan) {
    try {
        const res = await apiFetch('/api/billing/checkout', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({plan}),
        });
        const data = await res.json();
        if (!data.url) {
            alert(data.error || 'Erreur lors du checkout');
        }
    } catch (e) {
        alert('Erreur reseau');
    }
}

async function goPortal() {
    await apiFetch('/api/billing/portal');
}

loadPricing();
</script>
{% endblock %}