/**
 * src/subscription-list.jsx — Lista editable de suscripciones recurrentes.
 *
 * Funcionalidad:
 * - Lista todas las suscripciones (activas y pausadas)
 * - Total mensual proyectado en la moneda principal
 * - Botón "Add subscription" → modal con form
 * - Click en una sub → modal editar / pausar / borrar
 * - Toggle pause/active inline
 *
 * Diseño:
 * - Cada suscripción es una card horizontal con icon + nombre + monto + día
 * - Cards pausadas en grayscale + opacity 50%
 * - Sticky header con el total
 */
(() => {
  function SubscriptionList() {
    const { lang } = window.useApp();
    const t = window.I18N[lang];
    const [subs, setSubs] = React.useState(() => window.Storage.get("subscriptions"));
    const [editingId, setEditingId] = React.useState(null);   // id de sub en edit, null=ninguna
    const [adding, setAdding] = React.useState(false);

    // Reactividad: suscribirse a cambios
    React.useEffect(() => {
      const unsub = window.Store.subscribe("subscriptions", () => {
        setSubs(window.Storage.get("subscriptions"));
      });
      return unsub;
    }, []);

    // Proyección mensual total
    const settings = window.Storage.get("settings") || {};
    const mainCurrency = settings.currency || "PEN";
    const proj = window.SubscriptionEngine.projectedMonthly(mainCurrency);
    const activeCount = subs.filter((s) => s.active).length;

    function handleAdd(payload) {
      window.Storage.add("subscriptions", payload);
      setAdding(false);
    }

    function handleUpdate(id, patch) {
      window.Storage.update("subscriptions", id, patch);
      setEditingId(null);
    }

    function handleDelete(id) {
      const confirmMsg = lang === "es"
        ? "¿Borrar esta suscripción? Las transacciones ya generadas no se borran."
        : "Delete this subscription? Past transactions remain.";
      if (window.confirm(confirmMsg)) {
        window.Storage.remove("subscriptions", id);
        setEditingId(null);
      }
    }

    function toggleActive(sub) {
      window.Storage.update("subscriptions", sub.id, { active: !sub.active });
    }

    return (
      <div className="card" style={{ padding: 20 }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div className="kicker">{lang === "es" ? "SUSCRIPCIONES" : "SUBSCRIPTIONS"}</div>
            <h2 className="h2" style={{ marginTop: 4 }}>
              {lang === "es" ? "Gastos fijos del mes" : "Monthly fixed costs"}
            </h2>
          </div>
          <button className="btn warm" onClick={() => setAdding(true)}>
            <window.Icon name="plus" size={14} /> {lang === "es" ? "Nueva" : "New"}
          </button>
        </div>

        {/* Total proyectado */}
        <div style={{ marginBottom: 18, padding: 14, background: "var(--paper-sunk)", borderRadius: "var(--radius)" }}>
          <div className="meta">{lang === "es" ? "Total mensual proyectado" : "Projected monthly total"}</div>
          <div className="display mono" style={{ fontSize: 36, marginTop: 4 }}>
            {window.fmtMoney(proj.total, mainCurrency)}
          </div>
          <div className="caption" style={{ marginTop: 4 }}>
            {activeCount} {lang === "es" ? `activa${activeCount !== 1 ? "s" : ""}` : `active${activeCount !== 1 ? "s" : ""}`}
            {subs.length - activeCount > 0 && ` · ${subs.length - activeCount} ${lang === "es" ? "pausada(s)" : "paused"}`}
          </div>
        </div>

        {/* Lista */}
        <div className="sub-list">
          {subs.length === 0 && (
            <div className="empty-small">
              {lang === "es" ? "Sin suscripciones aún. Agrega una con el botón de arriba." : "No subscriptions yet. Add one with the button above."}
            </div>
          )}
          {subs.map((sub) => (
            <SubscriptionRow
              key={sub.id}
              sub={sub}
              lang={lang}
              mainCurrency={mainCurrency}
              onEdit={() => setEditingId(sub.id)}
              onToggle={() => toggleActive(sub)}
            />
          ))}
        </div>

        {/* Modales */}
        {adding && (
          <SubscriptionForm
            lang={lang}
            mainCurrency={mainCurrency}
            onClose={() => setAdding(false)}
            onSave={handleAdd}
          />
        )}
        {editingId && (
          <SubscriptionForm
            lang={lang}
            mainCurrency={mainCurrency}
            sub={subs.find((s) => s.id === editingId)}
            onClose={() => setEditingId(null)}
            onSave={(patch) => handleUpdate(editingId, patch)}
            onDelete={() => handleDelete(editingId)}
          />
        )}
      </div>
    );
  }

  /** Una fila de la lista. */
  function SubscriptionRow({ sub, lang, mainCurrency, onEdit, onToggle }) {
    // Calcular próxima fecha de cobro para mostrar
    const nextDue = window.SubscriptionEngine.getNextDueDate(sub, new Date());
    // Si null pero la sub está activa, significa "ya cobrado este mes, próximo el otro mes"
    const today = new Date();
    let nextLabel;
    if (!sub.active) {
      nextLabel = lang === "es" ? "Pausada" : "Paused";
    } else if (nextDue) {
      nextLabel = lang === "es"
        ? `Cobra hoy/atrasada (${nextDue.toLocaleDateString("es-PE", { day: "numeric", month: "short" })})`
        : `Due (${nextDue.toLocaleDateString("en-US", { day: "numeric", month: "short" })})`;
    } else {
      // Calcular próxima ocurrencia futura
      const nextMonth = new Date(today.getFullYear(), today.getMonth() + (today.getDate() >= sub.dayOfMonth ? 1 : 0), sub.dayOfMonth);
      nextLabel = lang === "es"
        ? `Próx. ${nextMonth.toLocaleDateString("es-PE", { day: "numeric", month: "short" })}`
        : `Next ${nextMonth.toLocaleDateString("en-US", { day: "numeric", month: "short" })}`;
    }

    return (
      <div className={"sub-row " + (sub.active ? "" : "paused")}>
        <span className="sub-icon">{sub.icon || "📱"}</span>
        <div className="sub-meta">
          <div className="sub-name">{sub.name}</div>
          <div className="caption">{nextLabel}</div>
        </div>
        <div className="sub-amount mono">
          {window.fmtMoney(sub.amount, sub.currency)}
          {sub.currency !== mainCurrency && (
            <div className="caption" style={{ fontFamily: "var(--font-body)", fontSize: 11 }}>
              ≈ {window.fmtMoney(window.convertCurrency(sub.amount, sub.currency, mainCurrency), mainCurrency)}
            </div>
          )}
        </div>
        <div className="sub-actions">
          <button className="icon-btn" onClick={onToggle} title={sub.active ? "Pausar" : "Activar"}>
            <window.Icon name={sub.active ? "pause" : "play"} size={14} />
          </button>
          <button className="icon-btn" onClick={onEdit} title="Editar">
            <window.Icon name="edit" size={14} />
          </button>
        </div>
      </div>
    );
  }

  /** Modal del form add/edit subscription. */
  function SubscriptionForm({ sub, lang, mainCurrency, onClose, onSave, onDelete }) {
    const isEdit = !!sub;
    const [name, setName] = React.useState(sub?.name || "");
    const [icon, setIcon] = React.useState(sub?.icon || "📱");
    const [amount, setAmount] = React.useState(sub?.amount?.toString() || "");
    const [currency, setCurrency] = React.useState(sub?.currency || mainCurrency);
    const [dayOfMonth, setDayOfMonth] = React.useState(sub?.dayOfMonth || 1);
    const [active, setActive] = React.useState(sub?.active ?? true);
    const [notes, setNotes] = React.useState(sub?.notes || "");
    const [error, setError] = React.useState(null);

    function handleSubmit(e) {
      e.preventDefault();
      setError(null);

      if (!name.trim()) {
        setError(lang === "es" ? "Nombre requerido" : "Name required");
        return;
      }
      const amt = parseFloat(amount);
      if (isNaN(amt) || amt <= 0) {
        setError(lang === "es" ? "Monto inválido" : "Invalid amount");
        return;
      }
      const day = parseInt(dayOfMonth, 10);
      if (isNaN(day) || day < 1 || day > 31) {
        setError(lang === "es" ? "Día debe ser 1-31" : "Day must be 1-31");
        return;
      }

      const payload = {
        name: name.trim(),
        icon,
        amount: amt,
        currency,
        frequency: "monthly",
        dayOfMonth: day,
        category: "cat_subs",
        subcategory: sub?.subcategory || "",
        active,
        startDate: sub?.startDate || window.todayISO(),
        lastChargeDate: sub?.lastChargeDate || null,
        notes,
      };

      onSave(payload);
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal-card" style={{ maxWidth: 480, padding: 24 }} onClick={(e) => e.stopPropagation()}>
          <button className="ob-close" onClick={onClose} aria-label="close">
            <window.Icon name="x" size={14} />
          </button>

          <div className="kicker" style={{ marginBottom: 4 }}>
            {isEdit ? (lang === "es" ? "Editar suscripción" : "Edit subscription") : (lang === "es" ? "Nueva suscripción" : "New subscription")}
          </div>
          <div className="h2" style={{ marginBottom: 20 }}>{name || (lang === "es" ? "Sin nombre" : "Untitled")}</div>

          <form onSubmit={handleSubmit} className="tx-form">
            {/* Nombre + icono */}
            <div className="form-row" style={{ display: "flex", gap: 12 }}>
              <div style={{ width: 80 }}>
                <label className="form-label">{lang === "es" ? "Icono" : "Icon"}</label>
                <input
                  type="text"
                  className="input"
                  maxLength={2}
                  value={icon}
                  onChange={(e) => setIcon(e.target.value)}
                  style={{ textAlign: "center", fontSize: 20 }}
                />
              </div>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Nombre" : "Name"}</label>
                <input
                  type="text"
                  className="input"
                  placeholder="Spotify, Netflix…"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                  autoFocus
                />
              </div>
            </div>

            {/* Monto + moneda */}
            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Monto mensual" : "Monthly amount"}</label>
              <div style={{ display: "flex", gap: 8 }}>
                <input
                  type="number"
                  step="0.01"
                  min="0"
                  className="input mono"
                  placeholder="0.00"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  required
                  style={{ flex: 1 }}
                />
                <select className="input" value={currency} onChange={(e) => setCurrency(e.target.value)} style={{ width: 100 }}>
                  <option value="PEN">S/ PEN</option>
                  <option value="USD">$ USD</option>
                </select>
              </div>
            </div>

            {/* Día del mes + activo */}
            <div className="form-row" style={{ display: "flex", gap: 12 }}>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Día del mes" : "Day of month"}</label>
                <input
                  type="number"
                  min="1"
                  max="31"
                  className="input mono"
                  value={dayOfMonth}
                  onChange={(e) => setDayOfMonth(e.target.value)}
                  required
                />
              </div>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Estado" : "Status"}</label>
                <div className="seg" style={{ marginTop: 6 }}>
                  <button type="button"
                    className={"seg-btn " + (active ? "on" : "")}
                    onClick={() => setActive(true)}>
                    {lang === "es" ? "Activa" : "Active"}
                  </button>
                  <button type="button"
                    className={"seg-btn " + (!active ? "on" : "")}
                    onClick={() => setActive(false)}>
                    {lang === "es" ? "Pausada" : "Paused"}
                  </button>
                </div>
              </div>
            </div>

            {/* Notas */}
            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Notas" : "Notes"}</label>
              <input
                type="text"
                className="input"
                placeholder={lang === "es" ? "Plan, observaciones…" : "Plan, details…"}
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
              />
            </div>

            {error && <div className="form-error">{error}</div>}

            {/* Acciones */}
            <div className="form-actions">
              {isEdit && (
                <button type="button" className="btn danger" onClick={onDelete}>
                  {lang === "es" ? "Borrar" : "Delete"}
                </button>
              )}
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <button type="button" className="btn" onClick={onClose}>
                  {lang === "es" ? "Cancelar" : "Cancel"}
                </button>
                <button type="submit" className="btn warm">
                  {isEdit ? (lang === "es" ? "Guardar" : "Save") : (lang === "es" ? "Agregar" : "Add")}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }

  window.SubscriptionList = SubscriptionList;
})();