// Confinement Flow — Live dashboard preview component (animated)

function DashboardPreview() {
  const [tab, setTab] = React.useState("overview");
  const [tick, setTick] = React.useState(0);

  // Slow animation tick for chart
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="dash-frame">
      <div className="dash-frame-head">
        <div className="dots"><span></span><span></span><span></span></div>
        <div className="crumb">app.confinementflow.my / dashboard</div>
        <div className="dash-tabs">
          {[
            { id: "overview", label: "Overview" },
            { id: "babies", label: "Baby logs" },
            { id: "rooms", label: "Rooms" },
            { id: "schedule", label: "Today" },
          ].map(t => (
            <div
              key={t.id}
              className={"dash-tab" + (tab === t.id ? " active" : "")}
              onClick={() => setTab(t.id)}
            >{t.label}</div>
          ))}
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }}>
          <Icon.Bell />
          <div className="t-author-pic" style={{ width: 28, height: 28, fontSize: 11 }}>SY</div>
        </div>
      </div>
      <div className="dash-body">
        <aside className="dash-sidebar">
          <div className="dash-sidebar-section">
            <h4>Centre</h4>
            <div className="dash-nav-item active"><span className="nav-dot"></span> Overview</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Mothers</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Babies</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Rooms</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Bookings</div>
          </div>
          <div className="dash-sidebar-section">
            <h4>Care</h4>
            <div className="dash-nav-item"><span className="nav-dot"></span> Feeding logs</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Sleep & poo</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Reminders</div>
          </div>
          <div className="dash-sidebar-section">
            <h4>Reports</h4>
            <div className="dash-nav-item"><span className="nav-dot"></span> Daily summary</div>
            <div className="dash-nav-item"><span className="nav-dot"></span> Mother reports</div>
          </div>
        </aside>

        <main className="dash-content">
          {tab === "overview" && <OverviewTab tick={tick} />}
          {tab === "babies" && <BabiesTab />}
          {tab === "rooms" && <RoomsTab />}
          {tab === "schedule" && <ScheduleTab />}
        </main>
      </div>
    </div>
  );
}

function OverviewTab({ tick }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 16 }}>
        <div>
          <div className="eyebrow no-rule" style={{ marginBottom: 6 }}>Today, Selangor branch</div>
          <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.02em" }}>Selamat pagi, Sarah</div>
        </div>
        <div className="btn btn-pink" style={{ padding: "8px 14px", fontSize: 13 }}>
          <Icon.Plus size={12} /> New booking
        </div>
      </div>

      <div className="mini-stat-row">
        <div className="mini-stat">
          <div className="lbl">Mothers in care</div>
          <div className="num">14<span className="delta">+2</span></div>
        </div>
        <div className="mini-stat">
          <div className="lbl">Babies</div>
          <div className="num">15<span className="delta">+2</span></div>
        </div>
        <div className="mini-stat">
          <div className="lbl">Occupancy</div>
          <div className="num">87%<span className="delta">+4</span></div>
        </div>
        <div className="mini-stat">
          <div className="lbl">Pending alerts</div>
          <div className="num">3<span className="delta dn">!</span></div>
        </div>
      </div>

      <div className="dash-row">
        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Feedings today</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>Updated just now</div>
          </div>
          <div className="chart">
            <FeedingChart tick={tick} />
          </div>
        </div>
        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Reminders</div>
            <div className="todo-tag">3 due</div>
          </div>
          <div>
            <div className="todo-row">
              <div className="todo-check"></div>
              <span className="todo-text">Baby Aiman — feed</span>
              <span className="todo-time">10:30</span>
            </div>
            <div className="todo-row done">
              <div className="todo-check"></div>
              <span className="todo-text">Mei Lin — herbal bath</span>
              <span className="todo-time">09:00</span>
            </div>
            <div className="todo-row">
              <div className="todo-check"></div>
              <span className="todo-text">Baby Sofea — jaundice check</span>
              <span className="todo-time">11:00</span>
            </div>
            <div className="todo-row">
              <div className="todo-check"></div>
              <span className="todo-text">Send daily summary to mothers</span>
              <span className="todo-time">19:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FeedingChart({ tick }) {
  // Generate gentle wave that subtly shifts with tick
  const points = React.useMemo(() => {
    const base = [22, 38, 28, 48, 64, 52, 72, 60, 82, 68, 92, 74];
    return base.map((v, i) => v + Math.sin((i + tick) * 0.5) * 4);
  }, [tick]);

  const w = 560, h = 140, pad = 12;
  const stepX = (w - pad * 2) / (points.length - 1);
  const max = 100;
  const yFor = (v) => h - pad - (v / max) * (h - pad * 2);
  const xFor = (i) => pad + i * stepX;

  let d = `M ${xFor(0)} ${yFor(points[0])}`;
  for (let i = 1; i < points.length; i++) {
    const xPrev = xFor(i - 1), yPrev = yFor(points[i - 1]);
    const x = xFor(i), y = yFor(points[i]);
    const cx = (xPrev + x) / 2;
    d += ` C ${cx} ${yPrev}, ${cx} ${y}, ${x} ${y}`;
  }
  const fill = `${d} L ${xFor(points.length - 1)} ${h - pad} L ${xFor(0)} ${h - pad} Z`;

  const labels = ["6a","8a","10a","12p","2p","4p","6p","8p","10p","12a","2a","4a"];

  return (
    <svg viewBox={`0 0 ${w} ${h + 18}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="ff-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#f9b9bd" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#f9b9bd" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={fill} fill="url(#ff-fill)" style={{ transition: "all 800ms ease" }} />
      <path d={d} fill="none" stroke="#394541" strokeWidth="1.8" strokeLinecap="round" style={{ transition: "all 800ms ease" }} />
      {points.map((v, i) => (
        <circle key={i} cx={xFor(i)} cy={yFor(v)} r="2.6" fill="#fff" stroke="#394541" strokeWidth="1.4"
          style={{ transition: "all 800ms ease" }} />
      ))}
      {labels.map((l, i) => (
        <text key={i} x={xFor(i)} y={h + 12} fontSize="9" textAnchor="middle" fill="#8a9591" fontFamily="monospace">{l}</text>
      ))}
    </svg>
  );
}

function BabiesTab() {
  const babies = [
    { name: "Baby Aiman", room: "Suite 04", age: "6d", lastFeed: "08:42", state: "ok", note: "Feeding well" },
    { name: "Baby Sofea", room: "Suite 07", age: "12d", lastFeed: "09:10", state: "watch", note: "Mild jaundice — check 11:00" },
    { name: "Baby Hui Ying", room: "Suite 02", age: "3d", lastFeed: "09:30", state: "ok", note: "Latched well, 14ml" },
    { name: "Baby Daniel", room: "Suite 09", age: "21d", lastFeed: "07:55", state: "alert", note: "Missed 09:30 — alert sent" },
    { name: "Baby Mei Yi", room: "Suite 11", age: "9d", lastFeed: "09:15", state: "ok", note: "Sleeping" },
  ];
  const dot = (s) => ({
    ok: "#7a9a8b", watch: "#d9a04a", alert: "#c47a4a"
  }[s]);
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <div className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em" }}>Baby logs</div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>15 babies • last sync 2 sec ago</div>
        </div>
        <div className="btn btn-outline" style={{ padding: "8px 14px", fontSize: 13 }}>Filter</div>
      </div>
      <div style={{ border: "1px solid var(--line-soft)", borderRadius: 14, overflow: "hidden" }}>
        {babies.map((b, i) => (
          <div key={b.name} style={{
            display: "grid",
            gridTemplateColumns: "200px 80px 80px 100px 1fr 80px",
            gap: 14,
            padding: "14px 18px",
            borderBottom: i < babies.length - 1 ? "1px solid var(--line-soft)" : "none",
            alignItems: "center",
            fontSize: 13.5,
            background: i % 2 ? "var(--paper)" : "#fff",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: dot(b.state) }}></span>
              <span style={{ fontWeight: 500 }}>{b.name}</span>
            </div>
            <div style={{ color: "var(--ink-soft)" }}>{b.room}</div>
            <div style={{ color: "var(--ink-soft)", fontFamily: "var(--mono)", fontSize: 12 }}>{b.age}</div>
            <div style={{ color: "var(--ink-soft)", fontFamily: "var(--mono)", fontSize: 12 }}>{b.lastFeed}</div>
            <div style={{ color: "var(--ink-soft)" }}>{b.note}</div>
            <div style={{ textAlign: "right" }}>
              <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 12 }}>Open</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RoomsTab() {
  const rooms = Array.from({ length: 12 }).map((_, i) => {
    const states = ["occupied","occupied","occupied","occupied","cleaning","occupied","reserved","occupied","occupied","empty","occupied","occupied"];
    return { num: String(i + 1).padStart(2, "0"), state: states[i] };
  });
  const color = (s) => ({
    occupied: { bg: "var(--pink-soft)", border: "var(--pink)", label: "Occupied" },
    cleaning: { bg: "var(--cream-deep)", border: "#c19a7b", label: "Cleaning" },
    reserved: { bg: "var(--cream)", border: "var(--line)", label: "Reserved" },
    empty: { bg: "#fff", border: "var(--line)", label: "Available" },
  }[s]);
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <div className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em" }}>Rooms</div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>12 suites • 87% occupancy</div>
        </div>
        <div style={{ display: "flex", gap: 12, fontSize: 12, color: "var(--ink-soft)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--pink-soft)", border: "1px solid var(--pink)" }}></span>Occupied</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--cream-deep)" }}></span>Cleaning</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "#fff", border: "1px solid var(--line)" }}></span>Available</div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
        {rooms.map(r => {
          const c = color(r.state);
          return (
            <div key={r.num} style={{
              background: c.bg,
              border: "1px solid " + c.border,
              borderRadius: 12,
              padding: "16px 14px",
              minHeight: 92,
              display: "flex",
              flexDirection: "column",
              gap: 4,
              cursor: "pointer",
              transition: "transform 160ms ease",
            }} onMouseOver={e => e.currentTarget.style.transform = "translateY(-2px)"}
               onMouseOut={e => e.currentTarget.style.transform = "none"}>
              <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.02em" }}>{r.num}</div>
              <div style={{ fontSize: 11, color: "var(--ink-soft)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{c.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ScheduleTab() {
  const blocks = [
    { time: "08:00", text: "Morning herbal bath — Suite 04, 07, 09", alt: false },
    { time: "09:00", text: "Breakfast service", alt: true },
    { time: "09:30", text: "Feeding round (handover)", alt: false },
    { time: "10:30", text: "Postpartum massage — Mei Lin", alt: false },
    { time: "11:00", text: "Jaundice check — Baby Sofea", alt: true },
    { time: "12:30", text: "Lunch service", alt: false },
    { time: "14:00", text: "Lactation consult — Suite 11", alt: false },
    { time: "16:00", text: "Visiting hours begin", alt: true },
    { time: "19:00", text: "Daily summary — auto-send to mothers", alt: false },
  ];
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
        <div>
          <div className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em" }}>Today's schedule</div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>Tuesday, 28 April · Selangor branch</div>
        </div>
      </div>
      <div className="timeline">
        {blocks.map(b => (
          <div key={b.time} className="tl-block">
            <div className="tl-time">{b.time}</div>
            <div className={"tl-bar" + (b.alt ? " alt" : "")}>
              <span>{b.text}</span>
              <span style={{ color: "var(--ink-mute)", fontSize: 11 }}>3 staff</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPreview });