/* JobDetail — one job's customer snapshot + a timeline stitching the
   contact's e31_activities, e31_appointments and e31_calls (read-only). */

const { Card: DetailCard, Eyebrow: DetailEyebrow } = window.Ds1Threshold_e046d3;

const TL_TONE = {
  note: "var(--color-primary-soft)", stage: "var(--status-info-bg)",
  appointment: "var(--status-pending-bg)", call: "var(--surface-sunken)",
};

function InfoRow({ icon, label, value, mono }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "9px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <span style={{ width: 28, height: 28, flexShrink: 0, borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)" }}><Icon name={icon} size={14} /></span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: "var(--text-2xs)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-faint)" }}>{label}</div>
        <div style={{ fontSize: "var(--text-sm)", color: "var(--text-primary)", fontWeight: 500, marginTop: 2, fontVariantNumeric: mono ? "tabular-nums" : "normal", wordBreak: "break-word" }}>{value || "—"}</div>
      </div>
    </div>
  );
}

function JobDetail({ job, onBack }) {
  const CRM = window.CRM;
  if (!job) return null;
  const timeline = CRM.timelineFor(job);
  const appts = CRM.appointments.filter((a) => a.job_id === job.id);
  const contact = CRM.contacts.find((c) => c.id === job.contact_id);

  return (
    <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
      <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 6, border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", fontWeight: 600, padding: 0, marginBottom: 16 }}>
        <Icon name="ArrowLeft" size={16} />Pipeline
      </button>

      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginBottom: 22, flexWrap: "wrap" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <window.CRMSiloChip silo={job.silo} />
            <window.CRMStatusPill silo={job.silo} status={job.status} />
          </div>
          <h1 style={{ margin: 0, fontSize: "var(--text-2xl)", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{job.full_name}</h1>
          <p style={{ margin: "4px 0 0", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>{job.id} · Next action {CRM.fmtDate(job.action_date)}</p>
        </div>
        <window.CRMSyncIndicator />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 24, alignItems: "start" }}>
        {/* Timeline */}
        <DetailCard padding="md">
          <DetailEyebrow size="2xs" style={{ marginBottom: 16 }}>Activity Timeline</DetailEyebrow>
          <div style={{ position: "relative" }}>
            {timeline.map((ev, i) => (
              <div key={i} style={{ display: "flex", gap: 14, position: "relative", paddingBottom: i === timeline.length - 1 ? 0 : 18 }}>
                {i !== timeline.length - 1 && <div style={{ position: "absolute", left: 17, top: 36, bottom: 0, width: 2, background: "var(--border-subtle)" }} />}
                <span style={{ width: 36, height: 36, flexShrink: 0, borderRadius: "50%", background: TL_TONE[ev.kind] || "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)", zIndex: 1 }}><Icon name={ev.icon} size={16} /></span>
                <div style={{ flex: 1, minWidth: 0, paddingTop: 1 }}>
                  <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
                    <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-primary)" }}>{ev.title}</div>
                    <div style={{ fontSize: "var(--text-2xs)", color: "var(--text-faint)", whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums" }}>{CRM.fmtDate(ev.date)}</div>
                  </div>
                  {ev.sub && <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", marginTop: 2 }}>{ev.sub}</div>}
                </div>
              </div>
            ))}
            {timeline.length === 0 && <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", padding: "8px 0" }}>No activity recorded yet.</div>}
          </div>
        </DetailCard>

        {/* Right rail */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <DetailCard padding="md">
            <DetailEyebrow size="2xs" style={{ marginBottom: 6 }}>Customer</DetailEyebrow>
            <InfoRow icon="Phone" label="Phone" value={job.phone} mono />
            <InfoRow icon="Mail" label="Email" value={job.email} />
            <InfoRow icon="MapPin" label="Address" value={job.full_address} />
            <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
              <a href={`tel:${(job.phone || "").replace(/[^0-9]/g, "")}`} style={{ flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "9px", borderRadius: "var(--radius-md)", background: "var(--color-primary-soft)", color: "var(--color-primary-deep)", textDecoration: "none", fontSize: "var(--text-xs)", fontWeight: 600 }}><Icon name="Phone" size={14} />Call</a>
              <a href={`mailto:${job.email}`} style={{ flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "9px", borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", color: "var(--text-secondary)", textDecoration: "none", fontSize: "var(--text-xs)", fontWeight: 600 }}><Icon name="Mail" size={14} />Email</a>
            </div>
          </DetailCard>

          <DetailCard padding="md">
            <DetailEyebrow size="2xs" style={{ marginBottom: 10 }}>Appointments</DetailEyebrow>
            {appts.length === 0 && <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>No appointments on record.</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {appts.map((a) => (
                <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 10px", borderRadius: "var(--radius-md)", background: "var(--surface-sunken)" }}>
                  <span style={{ width: 30, height: 30, flexShrink: 0, borderRadius: "var(--radius-md)", background: "var(--surface-card)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)" }}><Icon name="CalendarClock" size={15} /></span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--text-primary)" }}>{a.type}</div>
                    <div style={{ fontSize: "var(--text-2xs)", color: "var(--text-muted)", marginTop: 1 }}>{CRM.fmtDay(a.date)} · {a.time} · {a.tech}</div>
                  </div>
                  <span style={{ fontSize: "var(--text-2xs)", fontWeight: 600, color: a.status === "Completed" ? "var(--status-sold-fg)" : "var(--color-primary-deep)" }}>{a.status}</span>
                </div>
              ))}
            </div>
          </DetailCard>

          <DetailCard padding="md">
            <DetailEyebrow size="2xs" style={{ marginBottom: 6 }}>Mirror Record</DetailEyebrow>
            <InfoRow icon="Hash" label="Job ID" value={job.id} mono />
            <InfoRow icon="Contact" label="Contact ID" value={job.contact_id} mono />
            <InfoRow icon="GitBranch" label="Stage · Status" value={`${(CRM.SILO[job.silo] || {}).label} · ${job.status}`} />
            <div style={{ fontSize: "var(--text-2xs)", color: "var(--text-faint)", marginTop: 12, display: "flex", alignItems: "center", gap: 6 }}><Icon name="Lock" size={12} />Read-only — synced from Engine 31</div>
          </DetailCard>
        </div>
      </div>
    </div>
  );
}

window.JobDetail = JobDetail;