// dashboard.jsx — internal Overview view (sidebar + main)

const NAV = [
  { id: "overview",     label: "Overview",     icon: "grid" },
  { id: "calendar",     label: "Calendar",     icon: "cal" },
  { id: "bookings",     label: "Bookings",     icon: "bookings" },
  { id: "events",       label: "Event Types",  icon: "tag" },
  { id: "availability", label: "Availability", icon: "clock" },
  { id: "teams",        label: "Teams",        icon: "users" },
  { id: "integrations", label: "Integrations", icon: "layers" },
  { id: "analytics",    label: "Analytics",    icon: "rev" },
  { id: "billing",      label: "Billing",      icon: "card" },
  { id: "settings",     label: "Settings",     icon: "cog" },
];

function Sidebar({ active, onNav, onOpenBooking, onOpenAdmin, profile, copied, onCopy, onSignOut }) {
  const displayInitials = profile.initials || getLogoText(profile);
  const displayName     = profile.name || profile.brandName || "";
  const displayEmail    = profile.email || "";
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-mark">{profile.logoUrl ? <img src={profile.logoUrl} alt=""/> : getLogoText(profile)}</div>
        <div className="sb-brand-name">{profile.brandName}</div>
      </div>
      <nav className="sb-nav">
        {NAV.map(n => (
          <button key={n.id}
            className={"sb-nav-item " + (active === n.id ? "is-active" : "")}
            onClick={() => onNav(n.id)}>
            {React.createElement(I[n.icon], { className: "sb-icon" })}
            <span>{n.label}</span>
          </button>
        ))}
        {profile.isSuperAdmin && (
          <button
            className={"sb-nav-item sb-nav-platform " + (active === "platform" ? "is-active" : "")}
            onClick={() => onNav("platform")}>
            <I.layers className="sb-icon"/>
            <span>Platform</span>
            <span className="sb-admin-badge">Admin</span>
          </button>
        )}
      </nav>
      <div className="sb-admin">
        <button className="sb-copy" onClick={onOpenAdmin}>
          <I.layers size={14}/>
          <span>Platform backend</span>
        </button>
      </div>
      <div className="sb-quick">
        <h4>Quick booking link</h4>
        <p>Share your link to let people book with you.</p>
        <span className="link">{profile.bookingUrl}</span>
        <button className="sb-copy" onClick={onCopy}>
          {copied ? <I.check size={14}/> : <I.copy size={14}/>}
          <span>{copied ? "Copied!" : "Copy link"}</span>
        </button>
      </div>
      <div className="sb-user">
        <div className="avatar">{displayInitials}</div>
        <div className="sb-user-info">
          <div className="name">{displayName}</div>
          <div className="email">{displayEmail}</div>
        </div>
        <button className="sb-user-more" onClick={onSignOut} title="Sign out">
          <I.arrow size={16} style={{transform:"rotate(180deg)"}}/>
        </button>
      </div>
    </aside>
  );
}

function Topbar({ profile }) {
  return (
    <div className="topbar">
      <div>
        <h1>Welcome back, {(profile.name || profile.brandName || "there").split(" ")[0]} <span className="wave">👋</span></h1>
        <div className="sub">Here's what's happening with your schedule today.</div>
      </div>
      <div className="topbar-right">
        <span className="date-pill">
          <I.cal size={14}/> May 12 – May 18, 2026
        </span>
        <button className="icon-btn" title="Notifications">
          <I.bell size={16}/>
          <span className="dot"/>
        </button>
        <span className="user-pill">
          <span className="avatar" style={{width:26, height:26, fontSize:10.5}}>{profile.initials}</span>
          {profile.name}
          <I.chevDn size={14} className="chev"/>
        </span>
      </div>
    </div>
  );
}

function Kpi({ icon, label, value, delta, deltaText }) {
  return (
    <div className="kpi">
      <div className="kpi-h">
        <span className="kpi-label">{label}</span>
        <span className="kpi-icon">{icon}</span>
      </div>
      <div className="kpi-value">{value}</div>
      <div className="kpi-delta">
        <I.arrowUp size={11}/>
        <strong>{delta}</strong>
        <span>{deltaText}</span>
      </div>
    </div>
  );
}

function KpiRow({ industry, data }) {
  const activeBookings = data.bookings.filter((b) => b.status !== "Cancelled");
  const showRate = activeBookings.length ? Math.round((data.bookings.filter((b) => b.status === "Confirmed").length / activeBookings.length) * 100) : 100;
  const revenue = data.bookings
    .filter((b) => b.status === "Confirmed")
    .reduce((sum, b) => {
      const event = data.events.find((e) => e.id === b.eventId || e.name === b.eventName);
      return sum + Number(event?.price || 0);
    }, 0);
  const connectedCount = Object.values(data.integrations).filter((i) => i.connected).length;
  return (
    <div className="kpi-grid">
      <Kpi icon={<I.bookings size={14}/>} label="Bookings"          value={String(data.bookings.length)} delta="Live" deltaText="saved locally"/>
      <Kpi icon={<I.show size={14}/>}     label="Show Rate"         value={`${showRate}%`} delta="Auto"  deltaText="from statuses"/>
      <Kpi icon={<I.rev size={14}/>}      label={industry.revenueLabel} value={formatMoney(revenue, data.profile.currency)} delta="Paid" deltaText="confirmed bookings"/>
      <Kpi icon={<I.cal size={14}/>}      label="Connected Apps" value={String(connectedCount)} delta="" deltaText={<span style={{color:"#6ee7a3"}}>● Active</span>}/>
    </div>
  );
}

function BookingsTable({ industry, data, actions }) {
  const rows = data.bookings.slice(0, 6);
  return (
    <div className="card">
      <div className="card-h">
        <h3>Upcoming Bookings</h3>
        <button className="card-link">View all</button>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th>Date & Time</th>
            <th>{industry.serviceLabel}</th>
            <th>Guest</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td>
                <span className="cell-date">
                  <I.cal size={13}/>
                  {bookingDateTimeLabel(r)}
                </span>
              </td>
              <td>{r.eventName}</td>
              <td>{r.guestName}</td>
              <td><span className={"pill " + r.status.toLowerCase()}>{r.status}</span></td>
              <td style={{textAlign:"right"}}>
                <button className="row-actions" title="Mark cancelled" onClick={() => actions.updateBookingStatus(r.id, r.status === "Cancelled" ? "Confirmed" : "Cancelled")}><I.more size={16}/></button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function ActiveEventTypes({ industry, data }) {
  return (
    <div className="card">
      <div className="card-h">
        <h3>Active {industry.serviceLabel}s</h3>
        <button className="card-link">Manage</button>
      </div>
      <div className="evt-list">
        {data.events.filter((e) => e.enabled).map((e) => (
          <div className="evt-row" key={e.id}>
            <div className="evt-name">
              <span className="swatch" style={{background: e.color}}/>
              {e.name}
            </div>
            <div className="evt-meta">{e.duration} min</div>
          </div>
        ))}
      </div>
    </div>
  );
}

const AVAIL = [
  { d: "Mon", h: "9:00 AM – 5:00 PM" },
  { d: "Tue", h: "9:00 AM – 5:00 PM" },
  { d: "Wed", h: "9:00 AM – 5:00 PM" },
  { d: "Thu", h: "9:00 AM – 5:00 PM" },
  { d: "Fri", h: "9:00 AM – 3:00 PM" },
  { d: "Sat", h: "Unavailable", off: true },
  { d: "Sun", h: "Unavailable", off: true },
];
function Availability({ data }) {
  const customEvents = data.events.filter((event) => event.enabled && event.useCustomAvailability);
  const hasGlobalHours = data.availability.some((day) => day.on);
  return (
    <div className="card">
      <div className="card-h">
        <h3>Availability <span className="sub">(This Week)</span></h3>
        <button className="card-link">Edit</button>
      </div>
      <div className="avail">
        {!hasGlobalHours && customEvents.length > 0 ? customEvents.slice(0, 4).map((event) => {
          const days = (event.customAvailability || []).filter((day) => day.on);
          const label = days.length ? days.map((day) => day.name.slice(0, 3)).join(", ") : "No hours set";
          return (
            <div key={event.id} className="avail-row">
              <div className="day" style={{width:74}}>{event.name.split(" ").slice(0, 2).join(" ")}</div>
              <div className="hours">{label}</div>
            </div>
          );
        }) : data.availability.map((a, i) => (
          <div key={i} className={"avail-row " + (!a.on ? "off" : "")}>
            <div className="day">{a.name.slice(0, 3)}</div>
            <div className="hours">{a.on ? `${a.start} – ${a.end}` : "Unavailable"}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Integrations({ data }) {
  const items = [
    { name: "Google Calendar", logo: "G", bg: "linear-gradient(135deg,#4285F4,#34A853)" },
    { name: "Stripe",          logo: "S", bg: "#635BFF" },
    { name: "PayPal",          logo: "P", bg: "#0070BA" },
    { name: "Apple Calendar",  logo: "🍎", bg: "var(--surface-2)" },
    { name: "WhatsApp",        logo: "W", bg: "#25D366" },
    { name: "Square",          logo: "□", bg: "#000" },
  ];
  return (
    <div className="card">
      <div className="card-h">
        <h3>Integrations</h3>
        <button className="card-link">Manage</button>
      </div>
      <div className="intg-list">
        {items.filter((it) => data.integrations[it.name]?.connected).map((it, i) => (
          <div className="intg-row" key={i}>
            <div className="intg-logo" style={{background: it.bg, color: it.color || "#fff"}}>{it.logo}</div>
            <div className="intg-info">
              <div className="name">{it.name}</div>
              <div className="email">{data.integrations[it.name]?.account}</div>
            </div>
            <span className="intg-status">Connected <I.check size={12}/></span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PlaceholderView({ tab }) {
  const map = {
    bookings:     { icon: <I.bookings size={20}/>, h: "All Bookings", p: "Filter, export, and manage every booking from one place." },
    events:       { icon: <I.tag size={20}/>,      h: "Event Types",  p: "Create and configure the services you offer." },
    availability: { icon: <I.clock size={20}/>,    h: "Availability", p: "Set the hours you're available across each calendar." },
    teams:        { icon: <I.users size={20}/>,    h: "Teams",        p: "Invite teammates and route bookings between them." },
    integrations: { icon: <I.layers size={20}/>,   h: "Integrations", p: "Connect calendars, payments, video, and CRM tools." },
    billing:      { icon: <I.card size={20}/>,     h: "Billing",      p: "Manage your subscription, invoices, and payment methods." },
    settings:     { icon: <I.cog size={20}/>,      h: "Settings",     p: "Profile, branding, notifications, and account preferences." },
  };
  const m = map[tab] || map.settings;
  return (
    <div className="placeholder">
      <div className="placeholder-inner">
        <div className="placeholder-icon">{m.icon}</div>
        <h3>{m.h}</h3>
        <p>{m.p}</p>
      </div>
    </div>
  );
}

function AnnouncementBanner() {
  const [banners, setBanners] = React.useState([]);
  const [dismissed, setDismissed] = React.useState([]);

  React.useEffect(() => {
    fetchActiveAnnouncements().then(setBanners).catch(() => {});
  }, []);

  const visible = banners.filter(b => !dismissed.includes(b.id));
  if (!visible.length) return null;

  const TYPE_STYLES = {
    info:    { bg: "rgba(122,167,255,0.12)", border: "rgba(122,167,255,0.35)", icon: "ℹ", color: "#7aa7ff" },
    warning: { bg: "rgba(239,164,3,0.12)",   border: "rgba(239,164,3,0.35)",   icon: "⚠", color: "var(--accent)" },
    success: { bg: "rgba(110,231,163,0.12)", border: "rgba(110,231,163,0.35)", icon: "✓", color: "#6ee7a3" },
  };

  return (
    <div style={{display:"flex",flexDirection:"column",gap:8,marginBottom:16}}>
      {visible.map(b => {
        const s = TYPE_STYLES[b.type] || TYPE_STYLES.info;
        return (
          <div key={b.id} className="announcement-banner" style={{background:s.bg, borderColor:s.border}}>
            <span className="announcement-icon" style={{color:s.color}}>{s.icon}</span>
            <div className="announcement-body">
              <strong>{b.title}</strong>
              {b.message && <span> — {b.message}</span>}
            </div>
            <button className="announcement-dismiss" onClick={() => setDismissed(d => [...d, b.id])}>✕</button>
          </div>
        );
      })}
    </div>
  );
}

function Dashboard({ active, industry, data, actions, onOpenBooking, onViewAccount }) {
  if (active !== "overview") return <InternalView active={active} industry={industry} data={data} actions={actions} onOpenBooking={onOpenBooking} onViewAccount={onViewAccount}/>;
  return (
    <>
      <Topbar profile={data.profile}/>
      <AnnouncementBanner/>
      <KpiRow industry={industry} data={data}/>
      <div className="dash-grid">
        <BookingsTable industry={industry} data={data} actions={actions}/>
        <div style={{display:"flex", flexDirection:"column", gap:20}}>
          <ActiveEventTypes industry={industry} data={data}/>
          <Availability data={data}/>
        </div>
      </div>
      <Integrations data={data}/>
    </>
  );
}

window.Sidebar = Sidebar;
window.Dashboard = Dashboard;