function BookingsPage({ bookings = [], isLoading = false }) {
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [channelFilter, setChannelFilter] = React.useState("all");
  const [searchTerm, setSearchTerm] = React.useState("");

  const statusOptions = [
    { value: "all", label: "Alla statusar" },
    { value: "confirmation_sent", label: "Bekräftelse skickad" },
    { value: "reminder_sent", label: "Påminnelse skickad" },
    { value: "pending", label: "Inväntar" },
    { value: "no_show", label: "No-show" },
  ];

  const channelOptions = [
    "all",
    ...Array.from(new Set(bookings.map((b) => b.channel).filter(Boolean))),
  ];

  const filteredBookings = bookings.filter((b) => {
    const matchesStatus = statusFilter === "all" || b.status === statusFilter;
    const matchesChannel = channelFilter === "all" || b.channel === channelFilter;

    const search = searchTerm.toLowerCase().trim();

    const matchesSearch =
      search === "" ||
      String(b.customer || "").toLowerCase().includes(search) ||
      String(b.phone || "").toLowerCase().includes(search) ||
      String(b.email || "").toLowerCase().includes(search) ||
      String(b.service || "").toLowerCase().includes(search);

    return matchesStatus && matchesChannel && matchesSearch;
  });

  const toneClass = (t) =>
    t === "green" ? "green" :
    t === "amber" ? "amber" :
    t === "red" ? "red" :
    t === "blue" ? "blue" : "";

  const action = (status) => {
    if (status === "no_show") return "Återboka";
    if (status === "pending") return "Påminn";
    return "Visa";
  };

  return (
        <section className="section">
             <div className="section-head booking-page-head">
        <div>
             <h2>Bokningar</h2>
        <div className="section-sub">
        Alla bokningar från n8n + Google Sheet
        </div>
        </div>

        <div className="booking-count">
        {isLoading
        ? "Laddar..."
        : `${filteredBookings.length} av ${bookings.length} bokningar`}
         </div>
         </div>

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

        <select
          className="booking-select"
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
        >
          {statusOptions.map((s) => (
            <option key={s.value} value={s.value}>
              {s.label}
            </option>
          ))}
        </select>

        <select
          className="booking-select"
          value={channelFilter}
          onChange={(e) => setChannelFilter(e.target.value)}
        >
          {channelOptions.map((channel) => (
            <option key={channel} value={channel}>
              {channel === "all" ? "Alla kanaler" : channel}
            </option>
          ))}
        </select>
      </div>

      <div className="table-wrap">
        {isLoading ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Hämtar bokningar...
          </div>
        ) : filteredBookings.length === 0 ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Inga bokningar matchar filtret.
          </div>
        ) : (
          <table className="bookings">
            <thead>
              <tr>
                <th>Tid</th>
                <th>Kund</th>
                <th>Tjänst</th>
                <th>Kanal</th>
                <th>Status</th>
                <th>Efter besök</th>
                <th style={{ textAlign: "right" }}>Åtgärd</th>
              </tr>
            </thead>

            <tbody>
              {filteredBookings.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>
                    <span className={`badge ${toneClass(b.statusTone)}`}>
                      {b.statusLabel || b.status || "Okänd"}
                    </span>
                  </td>

                  <td>
                    {b.followUpSent && (
                      <span className="mini-status good">Follow-up</span>
                    )}

                    {b.noShowSent && (
                      <span className="mini-status warn">No-show</span>
                    )}

                    {!b.followUpSent && !b.noShowSent && (
                      <span className="mini-status muted">Ej hanterad</span>
                    )}
                  </td>

                  <td className="cell-action">{action(b.status)} →</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}

window.BookingsPage = BookingsPage;