function AutomationPage({ bookings = [], isLoading = false }) {
  const totalBookings = bookings.length;

  const confirmationsSent = bookings.filter((b) => b.confirmationSent).length;
  const remindersSent = bookings.filter((b) => b.reminderSent).length;
  const followUpsSent = bookings.filter((b) => b.followUpSent).length;
  const noShowsSent = bookings.filter((b) => b.noShowSent).length;

  const todayOrTomorrow = bookings.filter((b) => {
    return b.when?.day === "Idag" || b.when?.day === "Imorgon";
  });

  const needsReminder = todayOrTomorrow.filter((b) => !b.reminderSent).length;

  const automations = [
    {
      title: "Booking Confirmation Flow",
      description:
        "Skickar automatiska bokningsbekräftelser och uppdaterar CRM när en kund bokar tid.",
      status: "Active",
      icon: "mail",
      count: confirmationsSent,
      metricLabel: "bekräftelser skickade",
      tone: "good",
      steps: [
        "Booking received",
        "CRM updated",
        "Confirmation email sent",
        "Status saved in Google Sheet",
      ],
    },
    {
      title: "Reminder Flow",
      description:
        "Kontrollerar kommande bokningar och skickar påminnelser innan besöket.",
      status: needsReminder > 0 ? "Needs attention" : "Active",
      icon: "bell",
      count: remindersSent,
      metricLabel: "påminnelser skickade",
      tone: needsReminder > 0 ? "warn" : "good",
      steps: [
        "Read CRM bookings",
        "Check appointment time",
        "Create reminder message",
        "Send reminder email",
      ],
    },
    {
      title: "Follow-Up Flow",
      description:
        "Skickar ett automatiskt uppföljningsmejl efter genomfört besök.",
      status: "Active",
      icon: "repeat",
      count: followUpsSent,
      metricLabel: "follow-ups skickade",
      tone: "good",
      steps: [
        "Check completed visits",
        "Create follow-up message",
        "Send follow-up email",
        "Update CRM",
      ],
    },
    {
      title: "No-Show Flow",
      description:
        "Identifierar uteblivna besök och skickar ett separat no-show-meddelande.",
      status: noShowsSent > 0 ? "Handled" : "Active",
      icon: "alert",
      count: noShowsSent,
      metricLabel: "no-shows hanterade",
      tone: noShowsSent > 0 ? "warn" : "good",
      steps: [
        "Detect no-show",
        "Create no-show message",
        "Send email",
        "Update CRM status",
      ],
    },
  ];

  const statusClass = (tone) => {
    if (tone === "good") return "automation-status good";
    if (tone === "warn") return "automation-status warn";
    return "automation-status";
  };

  return (
    <section className="section">
      <div className="section-head">
        <div>
          <h2>Automationer</h2>
          <div className="section-sub">
            Live översikt över Automira workflow-system
          </div>
        </div>

        <div className="section-sub">
          {isLoading
            ? "Laddar automationer..."
            : `${automations.length} aktiva workflow · ${totalBookings} bokningar`}
        </div>
      </div>

      <div className="automation-grid">
        {automations.map((flow) => (
          <div className="automation-card" key={flow.title}>
            <div className="automation-card-head">
              <div className={`automation-icon ${flow.tone}`}>
                <Icon name={flow.icon} size={18} />
              </div>

              <span className={statusClass(flow.tone)}>
                {flow.status}
              </span>
            </div>

            <h3>{flow.title}</h3>
            <p>{flow.description}</p>

            <div className="automation-metric">
              <strong>{flow.count}</strong>
              <span>{flow.metricLabel}</span>
            </div>

            <div className="automation-steps">
              {flow.steps.map((step, index) => (
                <div className="automation-step" key={step}>
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  {step}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.AutomationPage = AutomationPage;