/* global React, Ic, Chip, KPI, Panel, AiBand, ScoreBar */

function Appointments() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Dock Appointments</div>
          <div className="page-sub">42 scheduled · 8 reschedules today · Dock Intelligence (network) tracks 2,148 receivers</div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> AGENT BOOKING</span>
          <div className="toggle-row"><button className="on">DAY</button><button>WEEK</button><button>MONTH</button></div>
          <button className="btn primary"><Ic.plus style={{ width: 12, height: 12 }} /> Book slot</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="Today's Apps" value="42" delta="8 reschedules" />
        <KPI label="Avg Wait Time" value="38min" delta="12min" deltaKind="down" />
        <KPI label="Auto-Booked" value="76%" delta="vs portal" />
        <KPI label="At-Risk Apps" value="3" delta="HOS or weather" />
      </div>

      <AiBand
        confidence={94}
        text={<>Driver C. Mendez (KW-48217) is running 2h late. Keelway found <b>05/26 20:30 slot</b> at Walmart Memphis DC and pushed the appointment.</>}
        actions={<>
          <button className="btn ghost sm">View slot</button>
          <button className="btn primary sm">Confirm push</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", minHeight: 600 }}>
        {/* Calendar view */}
        <div style={{ overflowY: "auto", padding: 16 }}>
          <Panel title="MONDAY 05/26 · DOCK SCHEDULE">
            <DockSchedule />
          </Panel>
        </div>

        {/* Receiver intelligence */}
        <aside className="inspector">
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">DOCK INTELLIGENCE</div>
            <div style={{ marginTop: 8, fontSize: 11, color: "var(--text-mid)" }}>Cross-broker receiver performance · 2,148 receivers tracked across the Keelway network.</div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Walmart DC #7034 · Memphis</div>
            <div className="mono dim" style={{ fontSize: 11 }}>4490 Old Lamar Ave · 16 dock doors</div>
            <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <Stat4 label="AVG DETENTION" v="48 min" warn />
              <Stat4 label="ON-TIME RELEASE" v="78%" warn />
              <Stat4 label="BUSIEST DOORS" v="3, 7, 12" />
              <Stat4 label="LIVE QUEUE" v="4 trucks" />
            </div>
            <div style={{ marginTop: 12, padding: 10, background: "var(--warn-bg)", borderLeft: "2px solid var(--warn)", fontSize: 11, borderRadius: 2 }}>
              <span className="warn" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.12em", color: "var(--warn)" }}>AI WARNING:</span><br/>
              This DC has held drivers an average of <b>48 minutes</b> past appointment in the last 30 days. Suggest <b>$120 detention buffer</b> in any quote here.
            </div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">PEAK PATTERN · LAST 30D</div>
            <DetentionHeatmap />
          </div>

          <div style={{ padding: 14 }}>
            <div className="h-rule">TOP DETAINING RECEIVERS</div>
            <div style={{ marginTop: 8, fontSize: 12, display: "flex", flexDirection: "column", gap: 6 }}>
              <DetentionRow name="Raley's Modesto"        avg="2h12m" loads={48} />
              <DetentionRow name="Costco Issaquah HQ"     avg="1h54m" loads={32} />
              <DetentionRow name="Sprouts Phoenix DC"     avg="1h42m" loads={28} />
              <DetentionRow name="Walmart Memphis #7034"  avg="48m"   loads={142} active />
              <DetentionRow name="Target Newark #2204"    avg="22m"   loads={84} />
              <DetentionRow name="Home Depot Atlanta DC"  avg="14m"   loads={124} ok />
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function DockSchedule() {
  // Stylized dock calendar — 16 doors x time slots
  const hours = ["06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
  const apps = [
    { door: 3,  start: 0, span: 2, load: "KW-48217", who: "Hidalgo",  kind: "warn" },
    { door: 7,  start: 1, span: 1, load: "KW-48191", who: "Gulf Trans", kind: "ok" },
    { door: 12, start: 2, span: 3, load: "KW-48214", who: "Western",   kind: "info" },
    { door: 4,  start: 4, span: 2, load: "KW-48220", who: "SwiftCo",   kind: "ok" },
    { door: 9,  start: 5, span: 2, load: "KW-48198", who: "BluePeak",  kind: "info" },
    { door: 1,  start: 6, span: 1, load: "KW-48184", who: "Heartland", kind: "ok" },
    { door: 11, start: 8, span: 4, load: "KW-48222", who: "SunRoute",  kind: "info" },
    { door: 7,  start: 9, span: 2, load: "KW-48205", who: "Apex",      kind: "warn" },
    { door: 3,  start: 11, span: 3, load: "KW-48217 (NEW)", who: "Hidalgo · PUSHED", kind: "accent" },
  ];
  return (
    <div style={{ overflowX: "auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: `60px repeat(${hours.length}, minmax(50px, 1fr))`, gap: 1, minWidth: 800 }}>
        <div></div>
        {hours.map(h => <div key={h} className="mono dim" style={{ fontSize: 10, textAlign: "center", padding: "4px 0", letterSpacing: "0.1em" }}>{h}:00</div>)}
        {Array.from({ length: 16 }, (_, di) => {
          const door = di + 1;
          return (
            <React.Fragment key={door}>
              <div className="mono dim" style={{ fontSize: 10, padding: "8px 6px", textAlign: "right", borderRight: "1px solid var(--line)" }}>DOOR {String(door).padStart(2, "0")}</div>
              {hours.map((h, hi) => <div key={h} style={{ background: hi % 2 === 0 ? "var(--bg-1)" : "var(--bg-2)", minHeight: 28, position: "relative" }} />)}
              {apps.filter(a => a.door === door).map((a, ai) => (
                <div key={ai} style={{
                  gridColumn: `${a.start + 2} / span ${a.span}`,
                  gridRow: di + 2,
                  background: a.kind === "ok" ? "var(--ok-bg)" : a.kind === "warn" ? "var(--warn-bg)" : a.kind === "accent" ? "var(--accent-bg)" : "var(--blue-bg)",
                  border: `1px solid ${a.kind === "ok" ? "var(--ok)" : a.kind === "warn" ? "var(--warn)" : a.kind === "accent" ? "var(--accent)" : "var(--blue)"}`,
                  borderRadius: 2,
                  padding: "2px 6px",
                  fontSize: 10,
                  margin: 1,
                  fontFamily: "var(--font-mono)",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignSelf: "center",
                  zIndex: 1,
                }}>
                  <span>{a.load}</span>
                  <span style={{ opacity: 0.7, fontSize: 9 }}>{a.who}</span>
                </div>
              ))}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function Stat4({ label, v, warn }) {
  return (
    <div>
      <div className="kpi-label">{label}</div>
      <div className="mono" style={{ fontSize: 16, color: warn ? "var(--warn)" : "var(--text)" }}>{v}</div>
    </div>
  );
}

function DetentionRow({ name, avg, loads, ok, active }) {
  const min = parseInt(avg);
  const pct = Math.min(100, (min * 60 + (avg.includes("h") ? min * 60 : 0)) / 130 * 100);
  return (
    <div style={{ background: active ? "var(--bg-sel)" : "transparent", padding: 6, borderRadius: 2, borderLeft: active ? "2px solid var(--accent)" : "2px solid transparent" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, marginBottom: 3 }}>
        <span>{name}</span>
        <span className="mono" style={{ color: ok ? "var(--ok)" : "var(--warn)" }}>{avg}</span>
      </div>
      <div style={{ height: 3, background: "var(--bg-3)", borderRadius: 1 }}>
        <div style={{ width: `${pct}%`, height: "100%", background: ok ? "var(--ok)" : "var(--warn)", borderRadius: 1 }} />
      </div>
      <div className="mono dim" style={{ fontSize: 9, marginTop: 2 }}>{loads} loads · 30d</div>
    </div>
  );
}

function DetentionHeatmap() {
  const days = ["M", "T", "W", "T", "F", "S", "S"];
  const hours = ["6", "9", "12", "15", "18"];
  return (
    <div style={{ marginTop: 10 }}>
      <div style={{ display: "grid", gridTemplateColumns: "20px repeat(7, 1fr)", gap: 2, fontFamily: "var(--font-mono)", fontSize: 9 }}>
        <span></span>
        {days.map((d, i) => <span key={i} style={{ textAlign: "center", color: "var(--text-dim)" }}>{d}</span>)}
        {hours.map((h) => (
          <React.Fragment key={h}>
            <span style={{ color: "var(--text-dim)", textAlign: "right" }}>{h}</span>
            {days.map((d, di) => {
              const v = ((parseInt(h) + di) * 13) % 100;
              return <div key={di} style={{ height: 18, background: `rgba(251, 191, 36, ${v / 120 + 0.05})`, borderRadius: 1 }} />;
            })}
          </React.Fragment>
        ))}
      </div>
      <div className="dim" style={{ fontSize: 10, marginTop: 6, fontFamily: "var(--font-mono)" }}>Darker = longer detention · Thursdays after 15:00 worst</div>
    </div>
  );
}

window.Appointments = Appointments;