/* Calendar — upcoming e31_appointments grouped by day (read-only mirror). */

const { Card: CalCard, Eyebrow: CalEyebrow } = window.Ds1Threshold_e046d3;

function Calendar() {
  const CRM = window.CRM;
  const nameFor = (a) => { const j = CRM.jobs.find((x) => x.id === a.job_id); return j ? j.full_name : (a.contact_id || ""); };
  const siloFor = (a) => { const j = CRM.jobs.find((x) => x.id === a.job_id); return j ? j.silo : null; };

  // Group by date, soonest first.
  const groups = {};
  [...CRM.appointments].sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0)).forEach((a) => {
    (groups[a.date] = groups[a.date] || []).push(a);
  });
  const days = Object.keys(groups).sort();
  const today = "2026-06-19";

  return (
    <div style={{ maxWidth: 900, margin: "0 auto" }}>
      <div style={{ marginBottom: 22, display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: "var(--text-2xl)", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>Calendar</h1>
          <p style={{ margin: "4px 0 0", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>Consultations, 3D measures &amp; installs from the Engine 31 mirror</p>
        </div>
        <window.CRMSyncIndicator />
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {days.map((d) => {
          const isToday = d === today;
          const isPast = d < today;
          return (
            <div key={d}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                <span style={{ display: "inline-flex", alignItems: "baseline", gap: 7 }}>
                  <span style={{ fontSize: "var(--text-2xs)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-faint)" }}>{CRM.weekday(d)}</span>
                  <span style={{ fontSize: "var(--text-base)", fontWeight: 700, color: "var(--text-primary)" }}>{CRM.fmtDate(d)}</span>
                </span>
                {isToday && <span style={{ fontSize: "var(--text-2xs)", fontWeight: 700, color: "#fff", background: "var(--color-primary)", borderRadius: "var(--radius-full)", padding: "2px 9px", textTransform: "uppercase", letterSpacing: "0.06em" }}>Today</span>}
                <span style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
                <span style={{ fontSize: "var(--text-2xs)", color: "var(--text-faint)", fontVariantNumeric: "tabular-nums" }}>{groups[d].length} appt{groups[d].length > 1 ? "s" : ""}</span>
              </div>
              <CalCard padding="none" style={{ overflow: "hidden", opacity: isPast ? 0.7 : 1 }}>
                {groups[d].map((a, i) => (
                  <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 18px", borderBottom: i === groups[d].length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
                    <div style={{ width: 64, flexShrink: 0, fontSize: "var(--text-sm)", fontWeight: 700, color: "var(--text-primary)", fontVariantNumeric: "tabular-nums" }}>{a.time}</div>
                    <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: "var(--radius-md)", background: "var(--color-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)" }}><Icon name={(a.type || "").includes("Install") ? "Truck" : (a.type || "").includes("Measure") ? "Ruler" : "Home"} size={16} /></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-primary)" }}>{a.type}</div>
                      <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", marginTop: 1 }}>{nameFor(a)} · {a.tech}</div>
                    </div>
                    {siloFor(a) && <window.CRMSiloChip silo={siloFor(a)} />}
                    <span style={{ fontSize: "var(--text-2xs)", fontWeight: 600, color: a.status === "Completed" ? "var(--status-sold-fg)" : "var(--color-primary-deep)", whiteSpace: "nowrap" }}>{a.status}</span>
                  </div>
                ))}
              </CalCard>
            </div>
          );
        })}
        {days.length === 0 && <div style={{ padding: 32, textAlign: "center", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No appointments on the calendar.</div>}
      </div>
    </div>
  );
}

window.Calendar = Calendar;