/* global React, Icon, Chip, Button, Avatar, api */

const ALERT_DEFAULTS = {
  intervals:    [30, 14, 7],
  channels:     ["mail"],
  notifyAgent:  true,
  notifyLead:   false,
};

function loadAlertConfig() {
  try {
    const raw = localStorage.getItem("crm_alert_config");
    return raw ? Object.assign({}, ALERT_DEFAULTS, JSON.parse(raw)) : ALERT_DEFAULTS;
  } catch (_) { return ALERT_DEFAULTS; }
}

function saveAlertConfig(cfg) {
  localStorage.setItem("crm_alert_config", JSON.stringify(cfg));
}

/* ── Configure Alerts modal ──────────────────────────── */
function ConfigureAlertsModal({ onClose }) {
  const [cfg, setCfg]     = React.useState(loadAlertConfig);
  const [saved, setSaved] = React.useState(false);

  function toggleInterval(day) {
    setCfg(c => ({
      ...c,
      intervals: c.intervals.includes(day) ? c.intervals.filter(d => d !== day) : [...c.intervals, day].sort((a, b) => b - a),
    }));
  }

  function toggleChannel(ch) {
    setCfg(c => {
      const next = c.channels.includes(ch) ? c.channels.filter(x => x !== ch) : [...c.channels, ch];
      return { ...c, channels: next.length ? next : c.channels };
    });
  }

  function handleSave() {
    saveAlertConfig(cfg);
    setSaved(true);
    setTimeout(onClose, 900);
  }

  const INTERVAL_OPTIONS = [
    { day: 30, label: "30 days before expiry" },
    { day: 14, label: "14 days before expiry" },
    { day: 7,  label: "7 days before expiry"  },
    { day: 1,  label: "1 day before expiry"   },
    { day: 0,  label: "On expiry day"         },
  ];

  const sectionStyle = { marginBottom: 24 };
  const headStyle    = { fontSize: 11, fontWeight: 700, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12 };
  const rowStyle     = { display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", borderRadius: 8, cursor: "pointer", fontSize: 13.5, userSelect: "none" };

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true" style={{ maxWidth: 440 }}>
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Renewals</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Configure alerts</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="modal-body">
          {/* Intervals */}
          <div style={sectionStyle}>
            <div style={headStyle}>Send alerts at</div>
            {INTERVAL_OPTIONS.map(({ day, label }) => {
              const on = cfg.intervals.includes(day);
              return (
                <label key={day} style={{ ...rowStyle, background: on ? "var(--plum-50)" : "transparent" }}
                  onMouseEnter={e => { if (!on) e.currentTarget.style.background = "var(--ink-50)"; }}
                  onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}>
                  <input type="checkbox" checked={on} onChange={() => toggleInterval(day)}
                    style={{ width: 16, height: 16, accentColor: "var(--brand-burgundy)", cursor: "pointer" }} />
                  <span style={{ color: on ? "var(--brand-burgundy)" : "var(--fg-1)", fontWeight: on ? 500 : 400 }}>{label}</span>
                </label>
              );
            })}
          </div>

          {/* Channels */}
          <div style={sectionStyle}>
            <div style={headStyle}>Reminder channels</div>
            {[
              { id: "mail",     icon: "mail",           label: "Email",    activeBg: "var(--plum-50)",    activeFg: "var(--brand-burgundy)" },
              { id: "whatsapp", icon: "message-circle", label: "WhatsApp", activeBg: "var(--success-50)", activeFg: "var(--success-700)"    },
            ].map(ch => {
              const on = cfg.channels.includes(ch.id);
              return (
                <label key={ch.id} style={{ ...rowStyle, background: on ? ch.activeBg : "transparent" }}
                  onMouseEnter={e => { if (!on) e.currentTarget.style.background = "var(--ink-50)"; }}
                  onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}>
                  <input type="checkbox" checked={on} onChange={() => toggleChannel(ch.id)}
                    style={{ width: 16, height: 16, accentColor: "var(--brand-burgundy)", cursor: "pointer" }} />
                  <Icon name={ch.icon} size={15} style={{ color: on ? ch.activeFg : "var(--fg-3)" }} />
                  <span style={{ color: on ? ch.activeFg : "var(--fg-1)", fontWeight: on ? 500 : 400 }}>{ch.label}</span>
                </label>
              );
            })}
          </div>

          {/* Recipients */}
          <div style={sectionStyle}>
            <div style={headStyle}>Notify</div>
            {[
              { key: "notifyAgent", label: "Assigned agent" },
              { key: "notifyLead",  label: "Team lead"      },
            ].map(({ key, label }) => {
              const on = cfg[key];
              return (
                <label key={key} style={{ ...rowStyle, background: on ? "var(--plum-50)" : "transparent" }}
                  onMouseEnter={e => { if (!on) e.currentTarget.style.background = "var(--ink-50)"; }}
                  onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}>
                  <input type="checkbox" checked={on} onChange={() => setCfg(c => ({ ...c, [key]: !c[key] }))}
                    style={{ width: 16, height: 16, accentColor: "var(--brand-burgundy)", cursor: "pointer" }} />
                  <span style={{ color: on ? "var(--brand-burgundy)" : "var(--fg-1)", fontWeight: on ? 500 : 400 }}>{label}</span>
                </label>
              );
            })}
          </div>

          {/* Summary preview */}
          <div style={{ background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "12px 14px", fontSize: 12.5, color: "var(--fg-2)", lineHeight: 1.6 }}>
            <Icon name="info" size={13} style={{ marginRight: 6, verticalAlign: "middle" }} />
            Alerts will be sent via{" "}
            <b>{cfg.channels.map(c => c === "mail" ? "email" : "WhatsApp").join(" and ") || "no channel"}</b>
            {cfg.intervals.length > 0 && <> at <b>{cfg.intervals.join(", ")} days</b> before expiry</>}
            {cfg.notifyAgent && " to the assigned agent"}
            {cfg.notifyLead  && (cfg.notifyAgent ? " and the team lead" : " to the team lead")}.
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "14px 20px", borderTop: "1px solid var(--border-subtle)" }}>
          <Button variant="secondary" onClick={onClose}>Cancel</Button>
          <Button icon={saved ? "check" : "bell"} onClick={handleSave}>
            {saved ? "Saved!" : "Save alerts"}
          </Button>
        </div>
      </div>
    </>
  );
}

/* ── Main page ───────────────────────────────────────── */
function RenewalsPage({ onOpenEngagement }) {
  const [rows, setRows]             = React.useState([]);
  const [stats, setStats]           = React.useState({ critical: 0, warning: 0, upcoming: 0, total: 0 });
  const [loading, setLoading]       = React.useState(true);
  const [error, setError]           = React.useState(null);
  const [showAlerts, setShowAlerts] = React.useState(false);
  const [isSuperAdmin, setIsSuperAdmin] = React.useState(null);

  React.useEffect(() => {
    setLoading(true);
    api.get("/renewals")
      .then(res => {
        setRows((res.data || []).map(api.map.renewal));
        setStats(res.stats || { critical: 0, warning: 0, upcoming: 0, total: 0 });
        if (res.isSuperAdmin !== undefined) setIsSuperAdmin(res.isSuperAdmin);
      })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <div className="page">
      {showAlerts && <ConfigureAlertsModal onClose={() => setShowAlerts(false)} />}

      <div className="page-head">
        <div>
          <div className="eyebrow">Renewal radar</div>
          <h1 className="page-title">Renewals</h1>
          <div className="page-sub">
            {isSuperAdmin === false
              ? "Showing renewals for engagements assigned to you. Alerts go out 30, 14, and 7 days before expiry."
              : "Every visa, license, and Emirates ID we've ever touched. Alerts go out 30, 14, and 7 days before expiry."}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="secondary" icon="calendar">View calendar</Button>
          <Button icon="bell" onClick={() => setShowAlerts(true)}>Configure alerts</Button>
        </div>
      </div>

      {/* Summary strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 18 }}>
        <SummaryStrip color="danger"  count={stats.critical} label="Overdue or under 7 days" />
        <SummaryStrip color="warning" count={stats.warning}  label="Within 30 days" />
        <SummaryStrip color="info"    count={stats.upcoming} label="Within 90 days" />
        <SummaryStrip color="brand"   count={stats.total}    label="Tracked total" />
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div className="card-head">
          <h3 className="card-title">{isSuperAdmin === false ? "My upcoming" : "All upcoming"} · sorted by expiry</h3>
          <div style={{ display: "flex", gap: 8 }}>
            <Button variant="secondary" size="sm" icon="filter">Filter</Button>
            <Button variant="secondary" size="sm" icon="download">Export</Button>
          </div>
        </div>

        {loading ? (
          <div style={{ padding: 48, textAlign: "center", color: "var(--fg-3)", fontSize: 14 }}>Loading renewals…</div>
        ) : error ? (
          <div style={{ padding: 48, textAlign: "center", color: "var(--danger-600)", fontSize: 14 }}>{error}</div>
        ) : rows.length === 0 ? (
          <div style={{ padding: 48, textAlign: "center", color: "var(--fg-3)", fontSize: 14 }}>
            No active engagements with a due date set.
          </div>
        ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th>Customer</th>
                <th>Document</th>
                <th>ID number</th>
                <th>Agent</th>
                <th>Reminder channel</th>
                <th style={{ textAlign: "right" }}>Expires</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.id || i}>
                  <td><div className="av-row"><Avatar name={r.name} /><div className="nm">{r.name}</div></div></td>
                  <td>{r.type}</td>
                  <td className="cell-mono cell-muted">{r.idNumber}</td>
                  <td>{r.agent}</td>
                  <td>
                    <div style={{ display: "flex", gap: 6 }}>
                      {r.reminderChannels.includes("mail") && (
                        <span title="Email" style={{ width: 22, height: 22, borderRadius: 4, background: "var(--ink-100)", color: "var(--fg-2)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                          <Icon name="mail" size={12} />
                        </span>
                      )}
                      {r.reminderChannels.includes("whatsapp") && (
                        <span title="WhatsApp" style={{ width: 22, height: 22, borderRadius: 4, background: "var(--success-50)", color: "var(--success-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                          <Icon name="message-circle" size={12} />
                        </span>
                      )}
                    </div>
                  </td>
                  <td style={{ textAlign: "right" }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 2 }}>
                      <Chip kind={r.urgency} dot={true}>
                        {r.daysRemaining <= 0 ? "Overdue" : r.daysRemaining + " days"}
                      </Chip>
                      <span style={{ fontSize: 11.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{r.expires}</span>
                    </div>
                  </td>
                  <td style={{ textAlign: "right", width: 130 }}>
                    <Button size="sm" variant="secondary"
                      onClick={() => onOpenEngagement && onOpenEngagement({ _id: r.id, id: r.id, service: r.type, serviceIcon: "calendar-clock", customer: r.name, started: "—", due: r.expires, stage: 1, totalStages: 1 })}>
                      Start renewal
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function SummaryStrip({ color, count, label }) {
  const map = {
    danger:  { bg: "var(--danger-50)",  fg: "var(--danger-700)",  border: "var(--danger-500)"  },
    warning: { bg: "var(--warning-50)", fg: "var(--warning-700)", border: "var(--warning-500)" },
    info:    { bg: "var(--info-50)",    fg: "var(--info-700)",    border: "var(--info-500)"    },
    brand:   { bg: "var(--plum-50)",    fg: "var(--brand-burgundy)", border: "var(--brand-burgundy)" },
  }[color];
  return (
    <div style={{ background: map.bg, border: "1px solid " + map.border + "33", borderLeft: "3px solid " + map.border, padding: "12px 14px", borderRadius: 10 }}>
      <div style={{ fontSize: 28, fontWeight: 600, color: map.fg, letterSpacing: "-0.02em", lineHeight: 1 }}>{count}</div>
      <div style={{ fontSize: 12, color: map.fg, marginTop: 4 }}>{label}</div>
    </div>
  );
}

Object.assign(window, { RenewalsPage });