#!/usr/bin/env python3
"""Génère le rendu fidèle du back-office AmChoose (sans clé webservice) et capture PNG."""

from __future__ import annotations

import subprocess
import sys
from pathlib import Path

ROOT = Path(__file__).resolve().parents[1]
OUT_DIR = ROOT / "exports" / "amchoose-product"
HTML_PATH = OUT_DIR / "amchoose-bo-mockup.html"
CSS_PATH = Path("/Users/arnaudmerigeau/Locals/bohomane_refonte/modules/amchoose/views/css/back.css")
RAW_PNG = OUT_DIR / "product-amchoose-admin-raw.png"
FINAL_PNG = OUT_DIR / "product-amchoose-admin-config.png"

FORM_BASE_CSS = """
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 32px;
  background: #eef2f4;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #363a41;
}
.mockup-frame {
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(54, 58, 65, 0.12);
  overflow: hidden;
  border: 1px solid #dbe6e9;
}
.mockup-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #363a41 0%, #2b2e34 100%);
  color: #b7c5cb;
  font-size: 12px;
}
.mockup-frame__dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-frame__dot--r { background: #ff5f57; }
.mockup-frame__dot--y { background: #febc2e; }
.mockup-frame__dot--g { background: #28c840; }
.mockup-frame__title { margin-left: 8px; }
.mockup-content { padding: 20px 22px 24px; background: #f8fafb; }
.ps-panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #fafbfc;
  border-bottom: 1px solid #dbe6e9;
  font-weight: 700;
  font-size: 14px;
}
.ps-panel-heading svg { color: #1f8fa8; }
.form-wrapper { padding: 16px 18px 8px; }
.form-group { margin-bottom: 16px; }
.control-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 12px;
}
.form-control {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid #dbe6e9;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #363a41;
}
.form-control--masked {
  color: #6c868e;
  letter-spacing: 0.12em;
  background: #f4f9fb;
}
select.form-control { max-width: 320px; }
.help-block { margin: 6px 0 0; font-size: 11px; color: #6c868e; line-height: 1.45; }
.panel-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  background: #f4f9fb;
  border-top: 1px solid #dbe6e9;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid #c7d6db;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #363a41;
  text-decoration: none;
}
.btn-primary {
  background: #25b9d7;
  border-color: #25b9d7;
  color: #fff;
  padding: 9px 18px;
}
.btn-xs { padding: 4px 8px; font-size: 11px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.switch-group { display: flex; gap: 16px; align-items: center; }
.switch-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.switch-item input { accent-color: #25b9d7; }
.ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; }
"""

HTML_BODY = """
<div class="mockup-frame">
  <div class="mockup-frame__bar">
    <span class="mockup-frame__dot mockup-frame__dot--r"></span>
    <span class="mockup-frame__dot mockup-frame__dot--y"></span>
    <span class="mockup-frame__dot mockup-frame__dot--g"></span>
    <span class="mockup-frame__title">PrestaShop 8.2 — Modules › (AM) Choose › Configurer</span>
  </div>
  <div class="mockup-content">
    <div class="amchoose-admin" id="amchoose-admin">

      <header class="amchoose-hero panel">
        <div class="amchoose-hero__content">
          <div class="amchoose-hero__badge"><span class="ico">↻</span> Synchronisation marketplace</div>
          <h1 class="amchoose-hero__title"><span class="icon-exchange">⇄</span> Choose × PrestaShop</h1>
          <p class="amchoose-hero__lead">Importez les ventes Choose dans PrestaShop et remontez automatiquement les numéros de suivi.</p>
          <div class="amchoose-hero__meta">
            <span class="amchoose-pill amchoose-pill--version">v4.3.0</span>
            <span class="amchoose-pill amchoose-pill--success">✓ API configurée</span>
            <span class="amchoose-pill amchoose-pill--neutral">☁ cURL</span>
          </div>
        </div>
        <div class="amchoose-hero__stats">
          <div class="amchoose-stat"><span class="amchoose-stat__value">24</span><span class="amchoose-stat__label">Commandes synchronisées</span></div>
          <div class="amchoose-stat"><span class="amchoose-stat__value">3</span><span class="amchoose-stat__label">Suivis en attente</span></div>
          <div class="amchoose-stat"><span class="amchoose-stat__value">2</span><span class="amchoose-stat__label">Fichiers de log</span></div>
        </div>
      </header>

      <section class="amchoose-flow panel">
        <h3 class="amchoose-section-title"><span class="ico">⇄</span> Flux de synchronisation</h3>
        <div class="amchoose-flow__steps">
          <div class="amchoose-flow__step">
            <span class="amchoose-flow__icon">↓</span>
            <strong>Import CRON</strong>
            <p>Récupère les commandes Choose non traitées et les crée dans PrestaShop avec les montants exacts.</p>
          </div>
          <div class="amchoose-flow__arrow">→</div>
          <div class="amchoose-flow__step">
            <span class="amchoose-flow__icon">🚚</span>
            <strong>Expédition BO</strong>
            <p>Vous préparez et expédiez la commande depuis PrestaShop comme d'habitude.</p>
          </div>
          <div class="amchoose-flow__arrow">→</div>
          <div class="amchoose-flow__step">
            <span class="amchoose-flow__icon">↑</span>
            <strong>Export CRON</strong>
            <p>Envoie le numéro de suivi à Choose via l'API createParcel.</p>
          </div>
        </div>
      </section>

      <div class="amchoose-admin__grid">
        <div class="amchoose-admin__column amchoose-admin__column--main">
          <div class="amchoose-form-shell panel">
            <div class="ps-panel-heading">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/></svg>
              Paramètres de synchronisation
            </div>
            <div class="form-wrapper">
              <div class="amchoose-form-section">
                <p class="amchoose-form-section__title">Connexion API</p>
                <p class="amchoose-form-section__desc">Identifiants Choose et accès webservice PrestaShop utilisés pour créer les commandes.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Clé webservice PrestaShop</label>
                <input class="form-control form-control--masked" readonly value="•••••••••••••••••••••••••••••••••">
                <p class="help-block">Clé générée à l'installation du module. Ne la partagez pas.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Clé API Choose</label>
                <input class="form-control" readonly value="ch_live_••••••••••••••••">
                <p class="help-block">Token x-api-key disponible dans le dashboard Choose.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Sale ID Choose</label>
                <input class="form-control" readonly value="12847">
                <p class="help-block">Identifiant de la vente Choose à synchroniser.</p>
              </div>

              <div class="amchoose-form-section">
                <p class="amchoose-form-section__title">Import des commandes</p>
                <p class="amchoose-form-section__desc">Définissez comment les commandes Choose sont créées dans PrestaShop.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Statut Choose à importer</label>
                <select class="form-control"><option>NOT_PROCESSED (UNFULFILLED)</option></select>
                <p class="help-block">NOT_PROCESSED est recommandé pour n'importer que les commandes non traitées.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Commandes max. par import</label>
                <select class="form-control"><option>50</option></select>
                <p class="help-block">Limite de commandes récupérées à chaque exécution du CRON d'import.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Groupe client</label>
                <select class="form-control"><option>Client</option></select>
                <p class="help-block">Groupe attribué aux clients créés depuis Choose.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Devise</label>
                <select class="form-control"><option>Euro</option></select>
                <p class="help-block">Devise des commandes importées.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Transporteur</label>
                <select class="form-control"><option>Colissimo</option></select>
                <p class="help-block">Transporteur appliqué aux commandes importées.</p>
              </div>
              <div class="form-group">
                <label class="control-label">État de commande</label>
                <select class="form-control"><option>Paiement accepté</option></select>
                <p class="help-block">État initial des commandes importées.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Frais de port de secours</label>
                <input class="form-control" readonly value="0" style="max-width:120px">
                <p class="help-block">Utilisé uniquement si Choose ne renvoie pas shipping.feesSold. Si le client n'a pas payé de livraison (0 €), le port reste à 0.</p>
              </div>

              <div class="amchoose-form-section">
                <p class="amchoose-form-section__title">Export des numéros de suivi</p>
                <p class="amchoose-form-section__desc">Paramètres du CRON qui remonte les suivis vers Choose via createParcel.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Commandes max. par export</label>
                <select class="form-control"><option>20</option></select>
                <p class="help-block">Limite de commandes traitées à chaque exécution du CRON d'export.</p>
              </div>

              <div class="amchoose-form-section">
                <p class="amchoose-form-section__title">Options développeur</p>
                <p class="amchoose-form-section__desc">Permet de simuler import et export sans écrire en base ni appeler les mutations Choose.</p>
              </div>
              <div class="form-group">
                <label class="control-label">Mode dry-run développeur</label>
                <div class="switch-group">
                  <label class="switch-item"><input type="radio" name="dry"> Oui</label>
                  <label class="switch-item"><input type="radio" name="dry" checked> Non</label>
                </div>
                <p class="help-block">Si activé, les CRON avec &amp;dry_run=1 simulent le traitement. Utilisez aussi les boutons de test dans le panneau latéral.</p>
              </div>
            </div>
            <div class="panel-footer"><button class="btn btn-primary" type="button">Enregistrer</button></div>
          </div>
        </div>

        <aside class="amchoose-admin__column amchoose-admin__column--aside">
          <div class="amchoose-side-stack">
            <div class="panel amchoose-side-card">
              <h3 class="amchoose-section-title"><span class="ico">⏱</span> Tâches automatiques</h3>
              <p class="amchoose-side-card__intro">Planifiez ces URLs dans votre crontab ou l'orchestrateur de tâches de l'hébergeur.</p>
              <div class="amchoose-cron-block">
                <div class="amchoose-cron-block__head">
                  <span class="amchoose-cron-block__label">↓ Import commandes</span>
                  <button class="btn btn-xs" type="button">Copier</button>
                </div>
                <code class="amchoose-cron-block__url">https://votre-boutique.fr/modules/amchoose/amchoose-cron-import.php?token=••••••&amp;id_shop=1</code>
                <a class="amchoose-cron-block__run" href="#">↗ Exécuter maintenant</a>
              </div>
              <div class="amchoose-cron-block">
                <div class="amchoose-cron-block__head">
                  <span class="amchoose-cron-block__label">↑ Export numéros de suivi</span>
                  <button class="btn btn-xs" type="button">Copier</button>
                </div>
                <code class="amchoose-cron-block__url">https://votre-boutique.fr/modules/amchoose/amchoose-cron-update.php?token=••••••&amp;id_shop=1</code>
                <a class="amchoose-cron-block__run" href="#">↗ Exécuter maintenant</a>
              </div>
              <div class="amchoose-cron-hint"><span class="ico">ℹ</span> Exemple crontab : toutes les 15 minutes pour l'import, toutes les 30 minutes pour l'export.</div>
            </div>

            <div class="panel amchoose-side-card">
              <h3 class="amchoose-section-title"><span class="ico">📄</span> Journaux</h3>
              <ul class="amchoose-log-list">
                <li class="amchoose-log-list__item">
                  <a class="amchoose-log-list__link" href="#"><span>📄</span><span>amchoose-getOrders-log-20260611.txt</span><small>11/06/2026</small></a>
                </li>
                <li class="amchoose-log-list__item">
                  <a class="amchoose-log-list__link" href="#"><span>📄</span><span>amchoose-updateOrders-log-20260610.txt</span><small>10/06/2026</small></a>
                </li>
              </ul>
              <div class="amchoose-log-actions"><button class="btn btn-sm amchoose-log-actions__btn" type="button">🗑 Supprimer tous les journaux</button></div>
            </div>

            <div class="panel amchoose-side-card amchoose-dev-card">
              <h3 class="amchoose-section-title"><span class="ico">🧪</span> Mode développeur</h3>
              <p class="amchoose-side-card__intro">Simulez import et export sans modifier PrestaShop ni Choose. Activez l'option dans le formulaire puis lancez un test.</p>
              <div class="amchoose-dev-badge amchoose-dev-badge--off">🔒 Activez « Mode dry-run développeur » dans les paramètres pour débloquer les tests.</div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</div>
"""


def write_html() -> None:
    OUT_DIR.mkdir(parents=True, exist_ok=True)
    module_css = CSS_PATH.read_text(encoding="utf-8")
    html = f"""<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1200">
<title>AmChoose — Configuration back-office</title>
<style>{FORM_BASE_CSS}\n{module_css}</style>
</head>
<body>{HTML_BODY}</body>
</html>"""
    HTML_PATH.write_text(html, encoding="utf-8")
    print(f"HTML : {HTML_PATH}")


def enhance_png() -> None:
    venv_python = Path("/tmp/amimg-venv/bin/python3")
    if not venv_python.is_file():
        subprocess.run([sys.executable, "-m", "venv", "/tmp/amimg-venv"], check=True)
        subprocess.run([str(venv_python), "-m", "pip", "install", "pillow", "-q"], check=True)

    code = f"""
from PIL import Image, ImageDraw, ImageFilter
src = Image.open("{RAW_PNG}").convert("RGBA")
# Trim uniform padding if any
bbox = src.getbbox()
if bbox:
    src = src.crop(bbox)
pad = 40
cw, ch = src.width + pad * 2, src.height + pad * 2
canvas = Image.new("RGBA", (cw, ch), (238, 242, 245, 255))
shadow = Image.new("RGBA", (src.width + 12, src.height + 12), (0, 0, 0, 0))
sd = ImageDraw.Draw(shadow)
sd.rounded_rectangle((0, 0, shadow.width - 1, shadow.height - 1), radius=16, fill=(15, 23, 42, 60))
shadow = shadow.filter(ImageFilter.GaussianBlur(16))
canvas.alpha_composite(shadow, (pad - 4, pad + 6))
canvas.alpha_composite(src, (pad, pad))
final = canvas.convert("RGB")
max_w = 1792
if final.width > max_w:
    r = max_w / final.width
    final = final.resize((max_w, int(final.height * r)), Image.Resampling.LANCZOS)
final.save("{FINAL_PNG}", "PNG", optimize=True)
print(final.size)
"""
    subprocess.run([str(venv_python), "-c", code], check=True)


def main() -> None:
    write_html()
    print("Ouvrez le HTML dans Chrome pour la capture, ou utilisez le MCP séparément.")
    print(f"  file://{HTML_PATH}")


if __name__ == "__main__":
    main()
