{% extends "base.html" %}
{% block title %}Configuración{% endblock %}
{% block page_title %}Configuración de empresa{% endblock %}

{% block content %}

{% if request.args.get('bienvenido') %}
<div class="mb-4" style="background:linear-gradient(135deg,#0f2744,#1e3a8a);border-radius:16px;padding:2rem;color:#fff">
  <div class="d-flex align-items-center gap-3 mb-3">
    <div style="width:48px;height:48px;background:rgba(255,255,255,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <i class="bi bi-stars" style="font-size:1.5rem"></i>
    </div>
    <div>
      <div class="fw-bold" style="font-size:1.2rem">¡Bienvenido a ContaApp!</div>
      <div style="font-size:.85rem;opacity:.8">Solo te llevará 2 minutos estar listo para facturar.</div>
    </div>
  </div>
  <div class="row g-2">
    <div class="col-md-4">
      <div style="background:rgba(255,255,255,.1);border-radius:10px;padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem">
        <span style="background:#3b82f6;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0">1</span>
        <div>
          <div class="fw-semibold" style="font-size:.85rem">Configura tu empresa</div>
          <div style="font-size:.75rem;opacity:.7">Nombre, NIF y dirección</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div style="background:rgba(255,255,255,.07);border-radius:10px;padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem">
        <span style="background:rgba(255,255,255,.2);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0">2</span>
        <div>
          <div class="fw-semibold" style="font-size:.85rem">Añade tus clientes</div>
          <div style="font-size:.75rem;opacity:.7">O crea directamente tu primera factura</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div style="background:rgba(255,255,255,.07);border-radius:10px;padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem">
        <span style="background:rgba(255,255,255,.2);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0">3</span>
        <div>
          <div class="fw-semibold" style="font-size:.85rem">Registra tus gastos</div>
          <div style="font-size:.75rem;opacity:.7">Facturas recibidas y transacciones</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-3" style="font-size:.82rem;opacity:.7">
    <i class="bi bi-info-circle me-1"></i>Rellena el formulario de abajo para completar el paso 1.
  </div>
</div>
{% endif %}

<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-building me-2"></i>Datos de la empresa</div>
      <div class="card-body p-4">
        <form method="post">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label">Nombre de la empresa *</label>
              <input type="text" name="nombre" class="form-control" required value="{{ empresa.nombre }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">NIF / CIF</label>
              <input type="text" name="nif" class="form-control" value="{{ empresa.nif or '' }}">
            </div>
            <div class="col-12">
              <label class="form-label">Dirección</label>
              <input type="text" name="direccion" class="form-control" value="{{ empresa.direccion or '' }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">Código postal</label>
              <input type="text" name="cp" class="form-control" value="{{ empresa.cp or '' }}">
            </div>
            <div class="col-md-5">
              <label class="form-label">Ciudad</label>
              <input type="text" name="ciudad" class="form-control" value="{{ empresa.ciudad or '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">País</label>
              <input type="text" name="pais" class="form-control" value="{{ empresa.pais or 'España' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Email</label>
              <input type="email" name="email" class="form-control" value="{{ empresa.email or '' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Teléfono</label>
              <input type="text" name="telefono" class="form-control" value="{{ empresa.telefono or '' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Web</label>
              <input type="text" name="web" class="form-control" placeholder="https://..." value="{{ empresa.web or '' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">IBAN</label>
              <input type="text" name="iban" class="form-control" placeholder="ES00 0000 0000 0000 0000 0000"
                     value="{{ empresa.iban or '' }}">
            </div>
          </div>
          <div class="mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Guardar configuración
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- SMTP / Email -->
    <div class="card mt-3">
      <div class="card-header py-3"><i class="bi bi-envelope-at me-2"></i>Configuración de email (SMTP)</div>
      <div class="card-body p-4">
        <p class="text-muted small mb-3">
          Necesario para enviar facturas por email desde la aplicación.
          Compatible con Gmail, Outlook, y cualquier servidor SMTP.
        </p>
        <form method="post">
          <input type="hidden" name="accion" value="smtp">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label fw-semibold">Servidor SMTP</label>
              <input type="text" name="smtp_host" class="form-control"
                     placeholder="smtp.gmail.com"
                     value="{{ empresa.smtp_host or '' if 'smtp_host' in empresa.keys() else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Puerto</label>
              <input type="number" name="smtp_port" class="form-control"
                     placeholder="587"
                     value="{{ empresa.smtp_port or 587 if 'smtp_port' in empresa.keys() else 587 }}">
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Usuario / Email remitente</label>
              <input type="email" name="smtp_user" class="form-control"
                     placeholder="tu@email.com"
                     value="{{ empresa.smtp_user or '' if 'smtp_user' in empresa.keys() else '' }}">
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Contraseña / App Password</label>
              <input type="password" name="smtp_password" class="form-control"
                     placeholder="••••••••"
                     value="{{ empresa.smtp_password or '' if 'smtp_password' in empresa.keys() else '' }}">
            </div>
            <div class="col-12">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="smtp_use_tls" id="smtp_tls"
                       {% if not 'smtp_use_tls' in empresa.keys() or empresa.smtp_use_tls %}checked{% endif %}>
                <label class="form-check-label" for="smtp_tls">
                  Usar STARTTLS (puerto 587) — desmarca si usas SSL directo (puerto 465)
                </label>
              </div>
            </div>
          </div>
          <div class="alert alert-info mt-3 mb-0 small">
            <i class="bi bi-info-circle me-1"></i>
            <strong>Gmail:</strong> usa <code>smtp.gmail.com</code>, puerto <code>587</code>, y una
            <a href="https://myaccount.google.com/apppasswords" target="_blank">contraseña de aplicación</a>
            (no tu contraseña de cuenta).<br>
            <strong>Outlook:</strong> usa <code>smtp-mail.outlook.com</code>, puerto <code>587</code>.
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Guardar configuración SMTP
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-header py-3"><i class="bi bi-database me-2"></i>Base de datos</div>
      <div class="card-body">
        <p class="text-muted small mb-2">
          Los datos se guardan localmente en <code>contabilidad.db</code> en la carpeta de la aplicación.
        </p>
        <a href="{{ url_for('informes.exportar') }}" class="btn btn-outline-success btn-sm">
          <i class="bi bi-download me-1"></i>Exportar todo a Excel
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}