/**
 * Automira — UI-komponenter
 * --------------------------------------------------------------
 * Atomära komponenter: Sidebar, Topbar, KpiCards, FlowSteps,
 * BookingsTable, ValueSection. Allt exporteras till window i slutet
 * så app.jsx kan använda dem (varje Babel-script har egen scope).
 */

const { useState, useEffect } = React;

/* -------------------------------------------------------------------------- */
/* Tiny icon set — minimalistiska stroke-ikoner, 16x16                         */
/* -------------------------------------------------------------------------- */
function Icon({ name, size = 16 }) {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.6,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "overview":
      return (
        <svg {...props}>
          <rect x="3" y="3" width="7" height="9" rx="1.5" />
          <rect x="14" y="3" width="7" height="5" rx="1.5" />
          <rect x="3" y="16" width="7" height="5" rx="1.5" />
          <rect x="14" y="12" width="7" height="9" rx="1.5" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...props}>
          <rect x="3" y="5" width="18" height="16" rx="2" />
          <path d="M3 9h18M8 3v4M16 3v4" />
        </svg>
      );
    case "mail":
      return (
        <svg {...props}>
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      );
    case "flag":
      return (
        <svg {...props}>
          <path d="M5 21V4" />
          <path d="M5 4h12l-2 4 2 4H5" />
        </svg>
      );
    case "zap":
      return (
        <svg {...props}>
          <path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z" />
        </svg>
      );
    case "users":
      return (
        <svg {...props}>
          <circle cx="9" cy="8" r="3.5" />
          <path d="M3 20c1-3.5 3.5-5 6-5s5 1.5 6 5" />
          <circle cx="17" cy="9" r="2.5" />
          <path d="M15 14c2 0 4 1 5 4" />
        </svg>
      );
    case "chart":
      return (
        <svg {...props}>
          <path d="M4 20V8M10 20v-6M16 20v-9M22 20H2" />
        </svg>
      );
    case "settings":
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="3" />
          <path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4.8a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.4a7 7 0 0 0-2 1.2L5.1 5.8l-2 3.5 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-.8a7 7 0 0 0 2 1.2L10 21h4l.5-2.4a7 7 0 0 0 2-1.2l2.4.8 2-3.5-2-1.5c.1-.4.1-.8.1-1.2z" />
        </svg>
      );
    case "help":
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7v.5" />
          <circle cx="12" cy="17" r="0.7" fill="currentColor" />
        </svg>
      );
    case "refresh":
      return (
        <svg {...props}>
          <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
          <path d="M21 3v5h-5" />
          <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
          <path d="M3 21v-5h5" />
        </svg>
      );
    case "plus":
      return (
        <svg {...props}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case "inbox":
      return (
        <svg {...props}>
          <path d="M3 13l3-8h12l3 8" />
          <path d="M3 13v6a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-6" />
          <path d="M8 13a4 4 0 0 0 8 0" />
        </svg>
      );
    case "sheet":
      return (
        <svg {...props}>
          <rect x="4" y="3" width="16" height="18" rx="1.5" />
          <path d="M4 9h16M4 15h16M10 3v18" />
        </svg>
      );
    case "send":
      return (
        <svg {...props}>
          <path d="M3 11l18-8-8 18-2-8-8-2z" />
        </svg>
      );
    case "bell":
      return (
        <svg {...props}>
          <path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4l2-2z" />
          <path d="M10 20a2 2 0 0 0 4 0" />
        </svg>
      );
    case "repeat":
      return (
        <svg {...props}>
          <path d="M17 1l4 4-4 4" />
          <path d="M3 11V9a4 4 0 0 1 4-4h14" />
          <path d="M7 23l-4-4 4-4" />
          <path d="M21 13v2a4 4 0 0 1-4 4H3" />
        </svg>
      );
    case "alert":
      return (
        <svg {...props}>
          <path d="M12 3L2 21h20L12 3z" />
          <path d="M12 10v5" />
          <circle cx="12" cy="18" r="0.6" fill="currentColor" />
        </svg>
      );
    case "check":
      return (
        <svg {...props}>
          <path d="M5 12l4.5 4.5L19 7" />
        </svg>
      );
    case "clock":
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3 2" />
        </svg>
      );
    case "trending":
      return (
        <svg {...props}>
          <path d="M3 17l6-6 4 4 8-8" />
          <path d="M14 7h7v7" />
        </svg>
      );
    case "heart":
      return (
        <svg {...props}>
          <path d="M12 21s-7-4.5-9.5-9.5C.5 8 3 4 6.5 4 9 4 10.5 5.5 12 7c1.5-1.5 3-3 5.5-3 3.5 0 6 4 4 7.5C19 16.5 12 21 12 21z" />
        </svg>
      );
    default:
      return null;
  }
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                     */
/* -------------------------------------------------------------------------- */
function Sidebar({
  pendingCount = 0,
  activePage = "overview",
  onNavigate = () => {},
}) {
  const owner = window.AutomiraData.getOwner();
  const initials = owner.firstName[0];

  return (
    <aside className="sidebar">
      <div className="brand"> <a href="../">
        <div className="logo">A</div>
        <div className="name">
          Automira
          <small>{owner.businessName}</small> 
        </div>
        </a>
      </div>
      
      <div className="nav-group">
        <div className="nav-label">Huvudmeny</div>

        <div
          className={`nav-item ${activePage === "overview" ? "active" : ""}`}
          onClick={() => onNavigate("overview")}
        >
          <span className="nav-ic">
            <Icon name="overview" />
          </span>
          Översikt
        </div>

        <div
          className={`nav-item ${activePage === "bookings" ? "active" : ""}`}
          onClick={() => onNavigate("bookings")}
        >
          <span className="nav-ic">
            <Icon name="calendar" />
          </span>
          Bokningar
          {pendingCount > 0 && <span className="nav-badge">{pendingCount}</span>}
        </div>

        <div className="nav-item">
          <span className="nav-ic">
            <Icon name="mail" />
          </span>
          Meddelanden
        </div>

        <div className={`nav-item ${activePage === "noshow" ? "active" : ""}`}
            onClick={() => onNavigate("noshow")}
          >
            <span className="nav-ic">
              <Icon name="flag" />
            </span>
            Uteblivna
          </div>

        <div
          className={`nav-item ${activePage === "automations" ? "active" : ""}`}
          onClick={() => onNavigate("automations")}
        >
          <span className="nav-ic">
            <Icon name="zap" />
          </span>
          Automationer
        </div>
      </div>

      <div className="nav-group">
        <div className="nav-label">Företag</div>

        <div className="nav-item">
          <span className="nav-ic">
            <Icon name="users" />
          </span>
          Kunder
        </div>

        <div className="nav-item">
          <span className="nav-ic">
            <Icon name="chart" />
          </span>
          Rapporter
        </div>
      </div>

      <div className="nav-group">
        <div className="nav-label">Konto</div>

        <div className="nav-item">
          <span className="nav-ic">
            <Icon name="settings" />
          </span>
          Inställningar
        </div>

        <div className="nav-item">
          <span className="nav-ic">
            <Icon name="help" />
          </span>
          Hjälp &amp; support
        </div>
      </div>

      <div className="sidebar-foot">
        <div className="avatar">{initials}</div>
        <div>
          {owner.firstName}
          <br />
          <span style={{ color: "var(--ink-3)", fontSize: 11 }}>Ägare</span>
        </div>
      </div>
    </aside>
  );
}
/* -------------------------------------------------------------------------- */
/* Topbar                                                                      */
/* -------------------------------------------------------------------------- */
function Topbar({ onBookingCreated = () => {} }) {
  const owner = window.AutomiraData.getOwner();
  const [refreshing, setRefreshing] = useState(false);
  const [syncedAt, setSyncedAt] = useState(window.AutomiraData.getLastSync());
  const [showAddBooking, setShowAddBooking] = useState(false);

  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 10) return "God morgon";
    if (h < 17) return "God eftermiddag";
    return "God kväll";
  })();

  async function handleRefresh() {
    setRefreshing(true);

    try {
      await onBookingCreated();
      setSyncedAt("nyss");
    } catch (error) {
      console.error("Failed to refresh bookings:", error);
    } finally {
      setRefreshing(false);
    }
}

  return (
    <header className="topbar">
      <div>
        <h1>
          {greeting}, <em>{owner.firstName}</em>.
        </h1>
        <div className="sub">
          <span className="sync-dot" />
          Så här ser din vecka ut · senast synkad {syncedAt}
        </div>
      </div>
      <div className="actions">
        <button
          className={`btn ${refreshing ? "refreshing" : ""}`}
          onClick={handleRefresh}
          disabled={refreshing}
        >
          <span className="btn-ic"><Icon name="refresh" size={14} /></span>
          {refreshing ? "Synkar…" : "Uppdatera"}
        </button>

        <button className="btn primary" onClick={() => setShowAddBooking(true)}>
        <span className="btn-ic">
          <Icon name="plus" size={14} />
        </span>
        Lägg till bokning
      </button>

      {showAddBooking && (
        <AddBookingModal
          onClose={() => setShowAddBooking(false)}
          onBookingCreated={onBookingCreated}
        />
      )}
            </div>
    </header>
  );
}

/* -------------------------------------------------------------------------- */
/* KPI cards                                                                   */
/* -------------------------------------------------------------------------- */
function KpiCards({ bookings = [] }) {
  const k = window.AutomiraData.getKpis(bookings);

  const cards = [
    {
      icon: "calendar",
      tone: "",
      label: "Bokningar idag",
      value: k.todayBookings.value,
      delta: k.todayBookings.delta,
      deltaTone: k.todayBookings.deltaTone,
    },
    {
      icon: "check",
      tone: "good",
      label: "Bekräftade",
      value: k.confirmed.value,
      delta: k.confirmed.delta,
      deltaTone: k.confirmed.deltaTone,
    },
    {
      icon: "bell",
      tone: "",
      label: "Påminnelser",
      value: k.reminders.value,
      delta: k.reminders.delta,
      deltaTone: k.reminders.deltaTone,
    },
    {
      icon: "repeat",
      tone: "good",
      label: "Follow-ups",
      value: k.followUps.value,
      delta: k.followUps.delta,
      deltaTone: k.followUps.deltaTone,
    },
    {
      icon: "alert",
      tone: "warn",
      label: "No-shows",
      value: k.noShows.value,
      delta: k.noShows.delta,
      deltaTone: k.noShows.deltaTone,
    },
    {
      icon: "zap",
      tone: "",
      label: "Risk just nu",
      value: k.atRisk.value,
      delta: k.atRisk.delta,
      deltaTone: k.atRisk.deltaTone,
    },
  ];

  return (
    <section className="section">
      <div className="kpi-grid">
        {cards.map((c, i) => (
          <div className="kpi" key={i}>
            <div className="kpi-head">
              <div className={`kpi-ic ${c.tone}`}>
                <Icon name={c.icon} size={16} />
              </div>
            </div>
            <div className="kpi-label">{c.label}</div>
            <div className="kpi-value">{c.value}</div>
            <div className={`kpi-delta ${c.deltaTone}`}>
              {c.deltaTone === "up" && "↑ "}
              {c.deltaTone === "down" && "↓ "}
              {c.deltaTone === "warn" && "⚑ "}
              {c.delta}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Flow steps                                                                  */
/* -------------------------------------------------------------------------- */
function FlowSteps( { bookings = [] } ) {
  const steps = window.AutomiraData.getFlowCounts(bookings);
  const stepIcons = {
    received: "inbox",
    crm: "sheet",
    confirmation: "mail",
    reminder: "bell",
    send: "send",
    sheet: "sheet",
    follow_up: "repeat",
    no_show: "alert",
  };

  return (
    <section className="section">
      <div className="section-head">
        <h2>Automationsflöde</h2>
        <div className="section-sub">Senaste 7 dagarna · automatiskt</div>
      </div>
      <div className="flow">
        {steps.map((s, i) => (
          <div className={`step ${s.flagged ? "flagged" : ""}`} key={s.id}>
            <div className="n">{String(i + 1).padStart(2, "0")}</div>
            <div className="bubble">
              <Icon name={stepIcons[s.id]} size={18} />
            </div>
            <div className="lbl">{s.label}</div>
            <div className="count">{s.count} st</div>
            <div className="sub">{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Bookings table                                                              */
/* -------------------------------------------------------------------------- */
function BookingsTable({ bookings = [], isLoading = false }) {
  // Visa de 8 mest aktuella
  const rows = bookings.slice(0, 8);

  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">
        <h2>Senaste bokningar</h2>
        <div className="section-sub">
          {isLoading
            ? "Laddar bokningar..."
            : `${rows.length} av ${bookings.length} visas`}
        </div>
      </div>

      <div className="table-wrap">
        {isLoading ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Hämtar bokningar från n8n + Google Sheet...
          </div>
        ) : rows.length === 0 ? (
          <div style={{ padding: 24, color: "var(--ink-2)" }}>
            Inga bokningar hittades.
          </div>
        ) : (
          <table className="bookings">
            <thead>
              <tr>
                <th>Tid</th>
                <th>Kund</th>
                <th>Tjänst</th>
                <th>Kanal</th>
                <th>Status</th>
                <th style={{ textAlign: "right" }}>Åtgärd</th>
              </tr>
            </thead>
            <tbody>
              {rows.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.contact || "-"}</div>
                  </td>
                  <td>{b.service || "-"}</td>
                  <td style={{ color: "var(--ink-2)" }}>
                    {b.channel || "n8n + Google Sheet"}
                  </td>
                  <td>
                    <span className={`badge ${toneClass(b.statusTone)}`}>
                      {b.statusLabel || b.status || "Okänd"}
                    </span>
                  </td>
                  <td className="cell-action">{action(b.status)} →</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Business value                                                              */
/* -------------------------------------------------------------------------- */
function ValueSection() {
  const v = window.AutomiraData.getBusinessValue();
  const cards = [
    { icon: "clock",    data: v.timeSaved },
    { icon: "trending", data: v.missedBookings },
    { icon: "heart",    data: v.followUp },
  ];

  return (
    <section className="section">
      <div className="section-head">
        <h2>Affärsvärde denna vecka</h2>
        <div className="section-sub">Vad automationen gett dig</div>
      </div>
      <div className="value-grid">
        {cards.map((c, i) => (
          <div className="value-card" key={i}>
            <div className="tag" style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name={c.icon} size={12} />
              {c.data.label}
            </div>
            <div className="v"><em>{c.data.value}</em></div>
            <div className="d">{c.data.description}</div>
          </div>
        ))}
      </div>
    </section>
  );
}/* -------------------------------------------------------------------------- */
/* Add Booking Modal                                                                  */
/* -------------------------------------------------------------------------- */
function AddBookingModal({ onClose, onBookingCreated = () => {} }) {
  const ADD_BOOKING_URL = "http://localhost:5678/webhook/add-booking";

  const [formData, setFormData] = useState({
    customer_name: "",
    phone: "",
    email: "",
    service: "Färgning",
    appointment_date: "",
    appointment_time: "",
    channel: "Website",
    status: "Confirmation Sent",
  });

  const [isSaving, setIsSaving] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  function updateField(field, value) {
    setFormData((current) => ({
      ...current,
      [field]: value,
    }));
  }

  async function handleSubmit(event) {
    event.preventDefault();
    setErrorMessage("");

    if (
      !formData.customer_name ||
      !formData.phone ||
      !formData.email ||
      !formData.service ||
      !formData.appointment_date ||
      !formData.appointment_time
    ) {
      setErrorMessage("Fyll i alla obligatoriska fält.");
      return;
    }

    try {
      setIsSaving(true);

      const response = await fetch(ADD_BOOKING_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error("Could not create booking");
      }

      await response.json();

      await onBookingCreated();
      onClose();
    } catch (error) {
      console.error("Failed to create booking:", error);
      setErrorMessage("Kunde inte spara bokningen. Kontrollera n8n workflow.");
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <div className="modal-backdrop">
      <form className="booking-modal" onSubmit={handleSubmit}>
        <div className="modal-head">
          <div>
            <h2>Lägg till bokning</h2>
            <p>Skapa en ny bokning manuellt i Automira dashboard.</p>
          </div>

          <button type="button" className="modal-close" onClick={onClose}>
            ×
          </button>
        </div>

        <div className="modal-grid">
          <label>
            Kundnamn
            <input
              type="text"
              placeholder="Ex. Lisa Bergström"
              value={formData.customer_name}
              onChange={(e) => updateField("customer_name", e.target.value)}
            />
          </label>

          <label>
            Telefon
            <input
              type="text"
              placeholder="Ex. 070-123 45 67"
              value={formData.phone}
              onChange={(e) => updateField("phone", e.target.value)}
            />
          </label>

          <label>
            Email
            <input
              type="email"
              placeholder="kund@email.se"
              value={formData.email}
              onChange={(e) => updateField("email", e.target.value)}
            />
          </label>

          <label>
            Tjänst
            <select
              value={formData.service}
              onChange={(e) => updateField("service", e.target.value)}
            >
              <option>Färgning</option>
              <option>Lash Lift</option>
              <option>Facial Treatment</option>
              <option>Hudbehandling</option>
            </select>
          </label>

          <label>
            Datum
            <input
              type="date"
              value={formData.appointment_date}
              onChange={(e) => updateField("appointment_date", e.target.value)}
            />
          </label>

          <label>
            Tid
            <input
              type="time"
              value={formData.appointment_time}
              onChange={(e) => updateField("appointment_time", e.target.value)}
            />
          </label>

          <label>
            Kanal
            <select
              value={formData.channel}
              onChange={(e) => updateField("channel", e.target.value)}
            >
              <option>Website</option>
              <option>SMS</option>
              <option>Instagram DM</option>
              <option>BokaDirekt</option>
            </select>
          </label>

          <label>
            Status
            <select
              value={formData.status}
              onChange={(e) => updateField("status", e.target.value)}
            >
              <option>Confirmation Sent</option>
              <option>Pending</option>
              <option>Reminder Sent</option>
            </select>
          </label>
        </div>

        {errorMessage && (
          <div className="modal-error">
            {errorMessage}
          </div>
        )}

        <div className="modal-note">
          När du sparar skickas bokningen till n8n, läggs till i Google Sheet och visas sedan i dashboarden.
        </div>

        <div className="modal-actions">
          <button type="button" className="btn" onClick={onClose}>
            Avbryt
          </button>

          <button type="submit" className="btn primary" disabled={isSaving}>
            {isSaving ? "Sparar..." : "Spara bokning"}
          </button>
        </div>
      </form>
    </div>
  );
}
/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */
function Footer() {
  return (
    <footer className="foot">
      <span>Automira Dashboard</span>
      <span>Live workflow · n8n & Google Sheet · Sweden Demo 2026</span>
    </footer>
  );
}

/* Exportera till window för app.jsx */
Object.assign(window, {
  Sidebar,
  Topbar,
  KpiCards,
  FlowSteps,
  BookingsTable,
  ValueSection,
  Footer,
  Icon,
  AddBookingModal,
});