// 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: "clients",   label: "Clients",   icon: "users" },

  { section: "Schedule" },
  { id: "events",       label: "Event Types",  icon: "tag" },
  { id: "availability", label: "Availability", icon: "clock" },
  { id: "teams",        label: "Teams",        icon: "users" },
  { id: "locations",    label: "Locations",    icon: "location" },
  { id: "resources",    label: "Resources",    icon: "grid" },

  { section: "Revenue" },
  { id: "coupons",     label: "Discount codes", icon: "tag" },
  { id: "vouchers",    label: "Gift vouchers",  icon: "card" },
  { id: "packages",    label: "Packages",       icon: "layers" },
  { id: "memberships", label: "Memberships",    icon: "users" },

  { section: "Growth" },
  { id: "reviews",   label: "Reviews",   icon: "star" },
  { id: "referrals", label: "Referrals", icon: "star" },
  { id: "analytics", label: "Analytics", icon: "rev" },

  { section: "Account" },
  { id: "integrations", label: "Integrations", icon: "layers" },
  { id: "billing",      label: "Billing",      icon: "card" },
  { id: "settings",     label: "Settings",     icon: "cog" },
  { id: "setup",        label: "Setup Guide",  icon: "bolt" },
];

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">
        {(profile.whiteLabel && profile.logoUrl) ? (
          <>
            <div className="sb-mark">
              <img src={profile.logoUrl} alt="" style={{width:"100%", height:"100%", objectFit:"contain"}}/>
            </div>
            <div className="sb-brand-name">{profile.brandName}</div>
          </>
        ) : (
          <img src="logo/nexus-bookings-logo-dark.png" alt="Nexus Booking" style={{width:"90%", height:"auto", display:"block"}}/>
        )}
      </div>
      <nav className="sb-nav">
        {NAV.map((n, i) => {
          if (n.section) {
            return (
              <div key={"sec-" + i} className="sb-section-label">{n.section}</div>
            );
          }
          return (
            <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-user">
        <div className="avatar" style={{padding:0, overflow:"hidden"}}>
          {(profile.whiteLabel && profile.logoUrl)
            ? <img src={profile.logoUrl} alt="" style={{width:"100%", height:"100%", objectFit:"cover", borderRadius:"inherit"}}/>
            : <img src="icon/nexus-bookings-icon.png" alt="" style={{width:"100%", height:"100%", objectFit:"cover", borderRadius:"inherit"}}/>
          }
        </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, onSignOut, onNav }) {
  const [showUserMenu, setShowUserMenu] = React.useState(false);
  const [showNotifs,   setShowNotifs]   = React.useState(false);
  const userRef  = React.useRef(null);
  const bellRef  = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => {
      if (userRef.current && !userRef.current.contains(e.target))  setShowUserMenu(false);
      if (bellRef.current && !bellRef.current.contains(e.target))  setShowNotifs(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const DD_STYLE = {
    position:"absolute", top:"calc(100% + 8px)", right:0,
    background:"var(--surface)", border:"1px solid var(--border)",
    borderRadius:10, boxShadow:"0 8px 24px rgba(0,0,0,.14)",
    zIndex:300, overflow:"hidden",
  };
  const MENU_BTN = {
    display:"flex", alignItems:"center", gap:10,
    width:"100%", padding:"10px 16px",
    background:"none", border:0, cursor:"pointer",
    fontSize:13, textAlign:"left", color:"inherit",
  };

  return (
    <div className="topbar">
      <div>
        <h1>Welcome back, {(profile.name || profile.brandName || "there").split(" ")[0]}</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>

        {/* ── Notification bell ── */}
        <div ref={bellRef} style={{position:"relative"}}>
          <button className="icon-btn" title="Notifications"
            onClick={() => { setShowNotifs(v => !v); setShowUserMenu(false); }}>
            <I.bell size={16}/>
          </button>
          {showNotifs && (
            <div style={{...DD_STYLE, width:280}}>
              <div style={{padding:"12px 16px", borderBottom:"1px solid var(--border)", fontWeight:600, fontSize:13}}>Notifications</div>
              <div style={{padding:"28px 16px", textAlign:"center", color:"var(--text-muted)", fontSize:13}}>
                <I.bell size={24} style={{opacity:0.35, marginBottom:8}}/>
                No new notifications
              </div>
            </div>
          )}
        </div>

        {/* ── User pill ── */}
        <div ref={userRef} style={{position:"relative"}}>
          <span className="user-pill" style={{cursor:"pointer"}}
            onClick={() => { setShowUserMenu(v => !v); setShowNotifs(false); }}>
            <span className="avatar" style={{width:26, height:26, fontSize:10.5, position:"relative"}}>
              {profile.photoUrl
                ? <img src={profile.photoUrl} alt="" style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",display:"block"}}/>
                : (profile.initials || (profile.name||"").split(" ").map(w=>w[0]).join("").slice(0,2).toUpperCase() || "?")}
            </span>
            {profile.name}
            <I.chevDn size={14} className="chev"/>
          </span>
          {showUserMenu && (
            <div style={{...DD_STYLE, width:210}}>
              <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border)"}}>
                <div style={{fontWeight:600, fontSize:13}}>{profile.name}</div>
                <div style={{fontSize:12, color:"var(--text-muted)", marginTop:2}}>{profile.email}</div>
              </div>
              <button style={MENU_BTN}
                onClick={() => { onNav && onNav("settings"); setShowUserMenu(false); }}>
                <I.cog size={14}/> Settings
              </button>
              <div style={{height:1, background:"var(--border)"}}/>
              <button style={{...MENU_BTN, color:"var(--danger)"}}
                onClick={() => { onSignOut && onSignOut(); setShowUserMenu(false); }}>
                <I.arrow size={14} style={{transform:"rotate(180deg)"}}/> Sign out
              </button>
            </div>
          )}
        </div>
      </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: Bl.gcal,     bg: "linear-gradient(135deg,#4285F4,#34A853)" },
    { name: "Stripe",          logo: Bl.stripe,   bg: "#635BFF" },
    { name: "PayPal",          logo: Bl.paypal,   bg: "#0070BA" },
    { name: "Apple Calendar",  logo: Bl.apple,    bg: "#1c1c1e" },
    { name: "WhatsApp",        logo: Bl.whatsapp, bg: "#25D366" },
    { name: "Square",          logo: Bl.square,   bg: "#000" },
    { name: "Twilio",          logo: Bl.twilio,   bg: "#f22f46" },
  ];
  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}}>{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: <I.info size={14}/>,  color: "#7aa7ff" },
    warning: { bg: "rgba(239,164,3,0.12)",   border: "rgba(239,164,3,0.35)",   icon: <I.warn size={14}/>,  color: "var(--accent)" },
    success: { bg: "rgba(110,231,163,0.12)", border: "rgba(110,231,163,0.35)", icon: <I.check size={14}/>, 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])}><I.x size={12}/></button>
          </div>
        );
      })}
    </div>
  );
}

function QuickBookingCard({ profile, copied, onCopy }) {
  const bookingUrl = profile.bookingUrl || "";
  const fullUrl    = bookingUrl ? getBookingUrl(bookingUrl) : "";
  return (
    <div className="card" style={{display:"flex", flexDirection:"column"}}>
      <div className="card-h">
        <h3>Quick booking link</h3>
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:12, padding:"16px 20px 20px"}}>
        <p style={{margin:0, fontSize:13, color:"var(--text-muted)", lineHeight:1.5}}>
          Share this link to let clients book directly with you.
        </p>
        {bookingUrl && (
          <div style={{background:"var(--surface-2)", borderRadius:8, padding:"8px 12px", fontSize:12, fontFamily:"monospace", color:"var(--text-muted)", wordBreak:"break-all"}}>
            {fullUrl}
          </div>
        )}
        <button className="sb-copy" style={{width:"100%", justifyContent:"center", borderRadius:8, padding:"10px 0", fontWeight:600}} onClick={onCopy}>
          {copied ? <><I.check size={14}/> Copied!</> : <><I.copy size={14}/> Copy link</>}
        </button>
      </div>
    </div>
  );
}

function Dashboard({ active, industry, data, actions, onOpenBooking, onViewAccount, onSignOut, onNav, copied, onCopy }) {
  if (active !== "overview") return <InternalView active={active} industry={industry} data={data} actions={actions} onOpenBooking={onOpenBooking} onViewAccount={onViewAccount}/>;
  return (
    <>
      <Topbar profile={data.profile} onSignOut={onSignOut} onNav={onNav}/>
      <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>
      <div className="dash-grid">
        <Integrations data={data}/>
        <QuickBookingCard profile={data.profile} copied={copied} onCopy={onCopy}/>
      </div>
    </>
  );
}

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