/* ===== Shared components ===== */
const { useState, useEffect, useRef } = React;
const D = window.DATA;

// Animated number (count-up + pop)
function AnimatedNumber({ value, format, duration }) {
  const [n, setN] = useState(0);
  const raf = useRef();
  useEffect(() => {
    const dur = duration || 850; const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setN(value * e);
      if (p < 1) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);
  return <span className="mono">{format ? format(n) : Math.round(n)}</span>;
}

function Delta({ v, suffix }) {
  const up = v >= 0;
  return (
    <span className={"delta " + (up ? "up" : "down")}>
      <Icon name={up ? "arrowUpRight" : "arrowDownRight"} size={14}/>
      {up ? "+" : ""}{v}%{suffix ? <span style={{ color:"var(--text-3)", fontWeight:500 }}> {suffix}</span> : null}
    </span>
  );
}

function Badge({ kind, children }) {
  return <span className={"badge " + (kind||"neutral")}>{children}</span>;
}

function StatusBadge({ status }) {
  const map = {
    matched:        ["pos","Matched"],
    review:         ["warn","Needs review"],
    extracted:      ["info","Extracted"],
    pending:        ["neutral","Pending"],
    uncategorized:  ["warn","Uncategorized"],
    scheduled:      ["info","Scheduled"],
    "needs-approval":["neg","Needs approval"],
  };
  const [k,l] = map[status] || ["neutral", status];
  return <span className={"badge "+k}><span className="bdot"></span>{l}</span>;
}

function Card({ title, sub, action, children, style, className, onClick }) {
  return (
    <div className={"card " + (className||"")} style={style} onClick={onClick}>
      {(title || action) && (
        <div className="card-head">
          <div>
            {title && <div className="card-title">{title}</div>}
            {sub && <div className="card-sub">{sub}</div>}
          </div>
          {action}
        </div>
      )}
      {children}
    </div>
  );
}

function CatDot({ cat }) {
  const c = (D.expenseCats.find(e => e.name === cat) || {}).color || "var(--text-3)";
  return <span style={{ width:8, height:8, borderRadius:3, background:c, display:"inline-block", flex:"0 0 auto" }}></span>;
}

// ---- Sidebar ----
function Sidebar({ view, setView, org, counts, user }) {
  const nav = [
    { id:"dashboard", label:"Dashboard", icon:"dashboard" },
    { id:"transactions", label:"Transactions", icon:"txns", badge: counts.txn },
    { id:"receipts", label:"Receipts", icon:"receipt", badge: counts.receipts },
    { id:"payments", label:"Payments", icon:"payments", badge: counts.payments },
    { id:"reports", label:"Reports", icon:"reports" },
  ];
  const nav2 = [
    { id:"team", label:"Team", icon:"team" },
    { id:"settings", label:"Settings", icon:"settings" },
  ];
  return (
    <aside className="sidebar">
      <div className="brand-row">
        <img className="brand-bull brand-on-dark" src="assets/bull.png" alt="ContaBilè"/>
        <img className="brand-word brand-on-dark" src="assets/wordmark.png" alt="ContaBilè"/>
      </div>
      <div className="biz-switch">
        <div className="biz-logo ph" style={{ borderRadius:8 }}></div>
        <div className="biz-meta">
          <div className="biz-name">{org.name}</div>
          <div className="biz-type">{org.typeLabel}</div>
        </div>
        <Icon name="chevron" size={15} style={{ color:"var(--on-navy-2)", transform:"rotate(90deg)" }}/>
      </div>
      {nav.map(n => (
        <button key={n.id} className={"nav-item " + (view===n.id?"active":"")} onClick={() => setView(n.id)}>
          <Icon name={n.icon}/><span>{n.label}</span>
          {n.badge ? <span className="nav-badge badge-pop">{n.badge}</span> : null}
        </button>
      ))}
      <div className="nav-label">Workspace</div>
      {nav2.map(n => (
        <button key={n.id} className={"nav-item " + (view===n.id?"active":"")} onClick={() => setView(n.id)}>
          <Icon name={n.icon}/><span>{n.label}</span>
        </button>
      ))}
      <div className="sidebar-spacer"></div>
      <div className="side-user">
        <div className="avatar" style={{ width:34, height:34, fontSize:13 }}>
          {(user?.name || 'U').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()}
        </div>
        <div style={{ minWidth:0, flex:1 }}>
          <div style={{ fontSize:13, fontWeight:600, color:"var(--on-navy)" }}>{user?.name || 'User'}</div>
          <div style={{ fontSize:11, color:"var(--on-navy-2)" }}>{user?.role || 'user'} · {user?.plan || org.plan}</div>
        </div>
      </div>
    </aside>
  );
}

// ---- Topbar ----
function Topbar({ title, sub, onAssistant, onTheme, theme, user, onLogout, notifs, onNotifs, showNotifs, onAddReceipt }) {
  const unread = notifs.filter(n => n.unread).length;
  return (
    <header className="topbar">
      <div style={{ flex:"0 0 auto" }}>
        <div className="page-title text-swap" key={title}>{title}</div>
        {sub && <div className="page-sub text-swap" key={sub}>{sub}</div>}
      </div>
      <div style={{ flex:1 }}></div>
      {user && <CreditBadge credits={user.credits} plan={user.plan}/>}
      <div className="search">
        <Icon name="search" size={17}/>
        <input placeholder="Search transactions, receipts…"/>
      </div>
      <button className="btn btn-primary" onClick={onAddReceipt}>
        <Icon name="plus" size={16}/> Add receipt
      </button>
      <div style={{ position:"relative" }}>
        <button className="icon-btn" onClick={onNotifs} title="Notifications">
          <Icon name="bell"/>{unread>0 && <span className="dot badge-pop"></span>}
        </button>
        {showNotifs && <NotifPanel notifs={notifs} onClose={onNotifs}/>}
      </div>
      <button className="icon-btn" onClick={onTheme} title="Toggle theme">
        <IconSwap name={theme==="dark" ? "sun" : "moon"}/>
      </button>
      <button className="btn btn-accent" onClick={onAssistant}>
        <Icon name="spark" size={16}/> Ask ContaBilè
      </button>
      {onLogout && (
        <button className="btn" onClick={onLogout} title="Logout">Esci</button>
      )}
    </header>
  );
}

function NotifPanel({ notifs, onClose }) {
  return (
    <>
      <div style={{ position:"fixed", inset:0, zIndex:20 }} onClick={onClose}></div>
      <div style={{ position:"absolute", top:46, right:0, width:340, background:"var(--surface)", border:"1px solid var(--line)",
        borderRadius:14, boxShadow:"var(--shadow-lg)", zIndex:21, overflow:"hidden" }} className="menu-in">
        <div style={{ padding:"14px 16px", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <span style={{ fontWeight:600, fontSize:14 }}>Notifications</span>
          <span style={{ fontSize:12, color:"var(--accent-ink)", fontWeight:600 }}>Mark all read</span>
        </div>
        <div style={{ maxHeight:380, overflowY:"auto" }}>
          {notifs.map(n => (
            <div key={n.id} style={{ display:"flex", gap:11, padding:"13px 16px", borderBottom:"1px solid var(--line-2)",
              background: n.unread ? "var(--surface-2)" : "transparent" }}>
              <div className="rico" style={{ width:34, height:34, flex:"0 0 34px" }}><Icon name={n.icon} size={16}/></div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:600 }}>{n.title}</div>
                <div style={{ fontSize:12, color:"var(--text-2)", marginTop:1 }}>{n.body}</div>
              </div>
              <div style={{ fontSize:11, color:"var(--text-3)", flex:"0 0 auto" }}>{n.time}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ---- Modal shell ----
function Modal({ title, sub, onClose, children, foot, wide }) {
  useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={wide?{ maxWidth:820 }:null} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:16, fontWeight:600 }}>{title}</div>
            {sub && <div style={{ fontSize:12.5, color:"var(--text-3)", marginTop:2 }}>{sub}</div>}
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close"/></button>
        </div>
        <div className="modal-body">{children}</div>
        {foot && <div className="modal-foot">{foot}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { AnimatedNumber, Delta, Badge, StatusBadge, Card, CatDot, Sidebar, Topbar, NotifPanel, Modal });