// misc.jsx — publish notices + contact / operating hours
const { useState: useStateM } = React;

/* ---------------- Notices ---------------- */
function Notices({ notices, onPublish }) {
  const [title, setTitle] = useStateM("");
  const [body, setBody] = useStateM("");
  const [channel, setChannel] = useStateM("Banner + Email");
  const [audience, setAudience] = useStateM("All customers");
  const [sent, setSent] = useStateM(false);

  function publish() {
    if (!title || !body) return;
    onPublish({ id: "n" + Date.now(), title, body, channel, audience, date: window.FX.todayISO(), status: "Published", pinned: false });
    setTitle(""); setBody(""); setSent(true);
    setTimeout(() => setSent(false), 2600);
  }

  return (
    <div className="fade-up">
      <PageHeader eyebrow="Customer notices" title="Publish a notice" sub="Broadcast service updates, holiday hours or disruptions to all of your customers." />
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.1fr)", gap: 24, alignItems: "start" }}>
        {/* composer */}
        <Card pad={26}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Field label="Notice title"><TextInput value={title} onChange={setTitle} placeholder="e.g. Public holiday hours" /></Field>
            <Field label="Message">
              <textarea value={body} onChange={e => setBody(e.target.value)} placeholder="Write the message your customers will see…" rows={4}
                style={{ ...window.inputStyle, resize: "vertical", lineHeight: 1.5 }} />
            </Field>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Field label="Delivery channel"><Select value={channel} onChange={setChannel} options={["Banner", "Email", "SMS", "Banner + Email"]} /></Field>
              <Field label="Audience"><Select value={audience} onChange={setAudience} options={["All customers", "Active customers", "Western Sydney", "CBD & inner"]} /></Field>
            </div>
            {/* preview */}
            <div>
              <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.8px", textTransform: "uppercase", color: "var(--fg-mute)", marginBottom: 8 }}>Preview</div>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: 16, borderRadius: "var(--r-md)", background: "var(--brand)", color: "#fff" }}>
                <Icon name="megaphone" size={20} style={{ marginTop: 2, flex: "none" }} />
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{title || "Notice title appears here"}</div>
                  <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4, lineHeight: 1.5 }}>{body || "Your message preview will show here as customers will see it."}</div>
                </div>
              </div>
            </div>
            <Button variant="primary" size="lg" icon={sent ? "check" : "megaphone"} full onClick={publish} disabled={!title || !body}>
              {sent ? "Notice published" : "Publish to " + audience.toLowerCase()}
            </Button>
          </div>
        </Card>

        {/* published list */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: "var(--fg-strong)" }}>Published notices</span>
            <Badge tone="neutral">{notices.length}</Badge>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {notices.map(n => (
              <Card key={n.id} pad={18}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 8 }}>
                  {n.pinned && <Icon name="star" size={14} color="var(--accent)" />}
                  <span style={{ fontWeight: 700, fontSize: 15, color: "var(--fg-strong)", flex: 1 }}>{n.title}</span>
                  <Badge tone="success"><StatusDot color="#22b86e" /> Live</Badge>
                </div>
                <div style={{ fontSize: 13.5, color: "var(--fg-body)", lineHeight: 1.5, marginBottom: 12 }}>{n.body}</div>
                <div style={{ display: "flex", gap: 14, alignItems: "center", fontSize: 12, color: "var(--fg-mute)", fontFamily: "var(--font-mono)" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="megaphone" size={13} /> {n.channel}</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="user" size={13} /> {n.audience}</span>
                  <span style={{ marginLeft: "auto" }}>{window.FX.fmtDate(n.date)}</span>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Contact / Operating hours ---------------- */
const HOURS = [
  { d: "Monday – Sunday", h: "Open 24 hours", open: true },
  { d: "Public holidays", h: "Open 24 hours", open: true },
  { d: "Core service hours", h: "6:00 AM – 6:00 PM", open: true },
];
function isOpenNow() { return true; }  // 24 / 7 / 365

function Contact({ onLodgeInquiry }) {
  const open = isOpenNow();
  const [inqOpen, setInqOpen] = useStateM(false);
  const [lodged, setLodged] = useStateM(null);
  return (
    <div className="fade-up">
      <PageHeader eyebrow="Help & support" title="Contact us" sub="Talk to the Fedex same-day team — we're here whenever you're moving." />
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 24, alignItems: "start" }}>
        {/* phone card (dark) */}
        <Card pad={0} style={{ overflow: "hidden", border: "none" }}>
          <div style={{ background: "var(--brand)", color: "#fff", padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(255,255,255,0.14)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="headset" size={22} /></span>
              <Badge style={{ background: open ? "rgba(34,184,110,0.2)" : "rgba(255,255,255,0.14)", color: "#fff" }}><StatusDot color={open ? "#3ee68f" : "var(--warn)"} pulse={open} /> {open ? "Open now" : "Currently closed"}</Badge>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "1.4px", opacity: 0.7, textTransform: "uppercase" }}>Customer service line</div>
            <a href="tel:1300131150" style={{ display: "block", fontSize: 40, fontWeight: 900, letterSpacing: "-1px", margin: "8px 0 4px", color: "#fff", textDecoration: "none" }}>1300 131 150</a>
            <div style={{ fontSize: 13.5, opacity: 0.7 }}>Avg. wait under 2 minutes · 7 days a week</div>
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <a href="tel:1300131150" style={{ textDecoration: "none", flex: 1 }}><Button variant="primary" full icon="phone">Call now</Button></a>
              <Button variant="secondary" icon="message-square" style={{ background: "rgba(255,255,255,0.12)", borderColor: "rgba(255,255,255,0.2)", color: "#fff" }} onClick={() => setInqOpen(true)}>Lodge inquiry</Button>
            </div>
          </div>
          <div style={{ padding: 22 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", background: "var(--bg-mist)", borderRadius: "var(--r-md)" }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--brand-soft)", color: "var(--brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="message-square" size={17} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--fg-strong)" }}>Have a question about a delivery?</div>
                <div style={{ fontSize: 12.5, color: "var(--fg-mute)" }}>Lodge an inquiry and we'll email you back with a reference number.</div>
              </div>
              <Button variant="secondary" size="sm" icon="message-square" onClick={() => setInqOpen(true)}>Lodge inquiry</Button>
            </div>
          </div>
        </Card>

        {/* hours */}
        <Card pad={26}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 18 }}>
            <Icon name="clock" size={19} color="var(--brand)" />
            <span style={{ fontWeight: 700, fontSize: 17, color: "var(--fg-strong)" }}>Operating hours</span>
          </div>
          {HOURS.map((r, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderTop: i ? "1px solid var(--border)" : "none" }}>
              <span style={{ fontSize: 14.5, color: "var(--fg-strong)", fontWeight: 500 }}>{r.d}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, color: "var(--fg-body)" }}>{r.h}</span>
            </div>
          ))}
          <div style={{ marginTop: 18, padding: 14, background: "var(--accent-soft)", borderRadius: "var(--r-md)", display: "flex", gap: 11, alignItems: "flex-start" }}>
            <Icon name="info" size={17} color="var(--accent-700)" style={{ marginTop: 1, flex: "none" }} />
            <div style={{ fontSize: 13, color: "var(--accent-700)", lineHeight: 1.5 }}>
              <strong>After-hours pickups</strong> are available for Priority bookings placed before 6:00 PM. Surcharge applies outside standard hours.
            </div>
          </div>
        </Card>
      </div>
      <LodgeInquiryModal open={inqOpen} onClose={() => setInqOpen(false)} shipment={null} onLodge={(p) => { const inq = onLodgeInquiry && onLodgeInquiry(p); setInqOpen(false); setLodged(inq); }} />
      <Modal open={!!lodged} onClose={() => setLodged(null)} title="Inquiry lodged" width={420}>
        {lodged && (
          <div style={{ textAlign: "center" }}>
            <div style={{ width: 52, height: 52, borderRadius: "50%", background: "var(--success-soft, #e7f6ee)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 12px" }}><Icon name="check-circle" size={26} color="var(--success, #1f8a5b)" /></div>
            <div style={{ fontSize: 16, fontWeight: 700, color: "var(--fg-strong)" }}>Thanks — we're on it</div>
            <div style={{ fontSize: 13.5, color: "var(--fg-mute)", marginTop: 6, lineHeight: 1.5 }}>Your inquiry reference is <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--brand)" }}>{lodged.ref}</span>. We've emailed Customer Service and will email you each update.</div>
            <Button variant="primary" icon="check" onClick={() => setLodged(null)} style={{ marginTop: 18 }}>Done</Button>
          </div>
        )}
      </Modal>
    </div>
  );
}
function ContactRow({ icon, label, value }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
      <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--brand-soft)", color: "var(--brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={icon} size={17} /></span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 11.5, color: "var(--fg-mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.6px", textTransform: "uppercase" }}>{label}</div>
        <div style={{ fontSize: 13.5, color: "var(--fg-strong)", fontWeight: 500, marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{value}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Notices, Contact, isOpenNow, HOURS });