function NoShowPage({ bookings = [], isLoading = false }) {
  const [searchTerm, setSearchTerm] = React.useState("");

  const noShowBookings = bookings.filter((b) => {
    const visitStatus = String(b.visitStatus || "").toLowerCase();
    return visitStatus === "no_show" || b.noShowSent === true;
  });

  const filteredNoShows = noShowBookings.filter((b) => {
    const search = searchTerm.toLowerCase().trim();

    if (search === "") return true;

    return (
      String(b.customer || "").toLowerCase().includes(search) ||
      String(b.phone || "").toLowerCase().includes(search) ||
      String(b.email || "").toLowerCase().includes(search) ||
      String(b.service || "").toLowerCase().includes(search) ||
      String(b.channel || "").toLowerCase().includes(search)
    );
  });

  const handledCount = noShowBookings.filter((b) => b.noShowSent).length;
  const pendingCount = noShowBookings.filter((b) => !b.noShowSent).length;

  return (
    <section className="section">
      <div className="section-head">
        <div>
          <h2>Uteblivna besök</h2>
          <div className="section-sub">
            No-shows som upptäckts och hanterats av Automira
          </div>
        </div>

        <div className="section-sub">
          {isLoading
            ? "Laddar..."
            : `${filteredNoShows.length} av ${noShowBookings.length} uteblivna`}
        </div>
      </div>

      <div className="noshow-summary">
        <div className="noshow-card">
          <div className="noshow-label">Totalt uteblivna</div>
          <div className="noshow-value">{noShowBookings.length}</div>
          <div className="noshow-sub">markerade i CRM</div>
        </div>

        <div className="noshow-card">
          <div className="noshow-label">No-show mejl skickade</div>
          <div className="noshow-value">{handledCount}</div>
          <div className="noshow-sub">automatiskt via n8n</div>
        </div>

        <div className="noshow-card">
          <div className="noshow-label">Kvar att hantera</div>
          <div className="noshow-value">{pendingCount}</div>
          <div className="noshow-sub">behöver uppföljning</div>
        </div>
      </div>

      <div className="booking-toolbar noshow-toolbar">
        <input
          className="booking-search"
          type="text"
          placeholder="Sök kund, telefon, email, tjänst eller kanal..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className="table-wrap">
        {isLoading ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Hämtar no-show data...
          </div>
        ) : filteredNoShows.length === 0 ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Inga uteblivna besök hittades.
          </div>
        ) : (
          <table className="bookings">
            <thead>
              <tr>
                <th>Tid</th>
                <th>Kund</th>
                <th>Tjänst</th>
                <th>Kanal</th>
                <th>No-show status</th>
                <th>Skickat</th>
                <th style={{ textAlign: "right" }}>Åtgärd</th>
              </tr>
            </thead>

            <tbody>
              {filteredNoShows.map((b) => (
                <tr key={b.id}>
                  <td className="cell-time">
                    <div className="day">{b.when?.day || "-"}</div>
                    <div className="hh">{b.when?.time || "-"}</div>
                  </td>

                  <td className="cell-customer">
                    <div className="name">{b.customer || "Okänd kund"}</div>
                    <div className="contact">
                      {b.phone && b.phone !== "-" ? b.phone : b.contact || "-"}
                    </div>
                  </td>

                  <td>{b.service || "-"}</td>

                  <td style={{ color: "var(--ink-2)" }}>
                    {b.channel || "Website"}
                  </td>

                  <td>
                    {b.noShowSent ? (
                      <span className="mini-status warn">No-show hanterad</span>
                    ) : (
                      <span className="mini-status muted">Ej skickad</span>
                    )}
                  </td>

                  <td style={{ color: "var(--ink-2)" }}>
                    {b.noShowSentAt && b.noShowSentAt !== "-"
                      ? b.noShowSentAt
                      : "-"}
                  </td>

                  <td className="cell-action">
                    {b.noShowSent ? "Visa →" : "Skicka →"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}

window.NoShowPage = NoShowPage;