/* global React, UI */
const { Avatar, TopBar, IconBell, IconChevron, IconCalendar, IconArrow, IconCheck, IconClose, IconMic, IconLock, IconPin, IconSparkle, IconBack } = window.UI;

// ====================================================================
// HOME
// ====================================================================
function HomeScreen({ go }) {
  return (
    <div className="screen page-in">
      <TopBar />
      <div className="screen-pad">
        <div style={{ marginTop: 8, marginBottom: 28 }}>
          <div className="eyebrow">Tuesday · 5 May</div>
          <div className="serif" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 10, letterSpacing: "-0.015em" }}>
            Good morning,<br/>
            <span className="serif-i" style={{ color: "var(--accent)" }}>Marcus.</span>
          </div>
        </div>

        {/* TODAY */}
        <div className="eyebrow" style={{ marginBottom: 10 }}>Today</div>
        <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 28, cursor: "pointer" }} onClick={() => go("brief")}>
          <div style={{ padding: "20px 22px 16px", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)", textTransform: "uppercase" }}>10:30 — 11:15 · IN PERSON</div>
              <div className="serif" style={{ fontSize: 24, marginTop: 8, letterSpacing: "-0.01em" }}>Priya Anand</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Commercial mortgage broker · Stride Finance</div>
            </div>
            <Avatar seed={3} size={56} name="Priya Anand" />
          </div>
          <div className="perf" style={{ margin: "4px 22px" }}></div>
          <div style={{ padding: "12px 22px 18px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div className="mono" style={{ fontSize: 12, color: "var(--accent)" }}>Brief ready · in 2h 14m</div>
            <div style={{ color: "var(--accent)", display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
              Open brief <IconChevron size={14} />
            </div>
          </div>
        </div>

        {/* THIS WEEK */}
        <div className="eyebrow" style={{ marginBottom: 6 }}>This week</div>
        <div style={{ marginBottom: 28 }}>
          <WeekRow date="THU 7" time="08:00" name="James Whitford" role="Accountant · Coast Ledger" type="In-person · The Pantry" />
          <WeekRow date="FRI 8" time="14:30" name="Sienna Kovač" role="Architect · Hartwell Studio" type="Video" />
          <WeekRow date="MON 11" time="11:00" name="Devon Park" role="Commercial agent · Ray White" type="In-person · Robina office" />
        </div>

        {/* REPUTATION STRIP */}
        <div className="eyebrow" style={{ marginBottom: 10 }}>Your reputation</div>
        <div className="card" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", padding: "20px 6px" }}>
          <Stat n="47" l="1to1s" />
          <Stat n="38" l="Reach" hairline />
          <Stat n="14" l="Connections" hairline />
          <Stat n="4.8" l="Quality" hairline />
        </div>

        {/* SUGGESTED */}
        <div className="eyebrow" style={{ margin: "32px 0 10px" }}>Suggested for you</div>
        <SuggestCard onOpen={() => go("meetsheet")} name="Eliza Hart" role="Brand strategist · Salt &amp; Sail" why="You both serve owner-operators on the Gold Coast. She's looking to meet commercial solicitors." seed={2} stats={["62", "55", "23"]} />
        <SuggestCard name="Hugo Lambert" role="Insolvency specialist · Lambert &amp; Co" why="Complementary to your practice. Mutual: 3 group members." seed={4} stats={["29", "27", "8"]} />

        <div style={{ height: 80 }} />
      </div>
    </div>
  );
}

function WeekRow({ date, time, name, role, type }) {
  return (
    <div className="row" style={{ alignItems: "flex-start" }}>
      <div style={{ width: 56, flex: "0 0 56px" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", color: "var(--text-3)" }}>{date}</div>
        <div className="mono" style={{ fontSize: 14, marginTop: 2 }}>{time}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 500, fontSize: 15 }}>{name}</div>
        <div className="muted" style={{ fontSize: 13, marginTop: 1 }}>{role}</div>
        <div className="muted-2" style={{ fontSize: 12, marginTop: 4 }}>{type}</div>
      </div>
      <IconChevron size={16} stroke="var(--text-3)" />
    </div>
  );
}

function Stat({ n, l, hairline }) {
  return (
    <div style={{ textAlign: "center", padding: "0 8px", borderLeft: hairline ? "1px solid var(--border)" : "none" }}>
      <div className="stat-num">{n}</div>
      <div className="stat-label">{l}</div>
    </div>
  );
}

function SuggestCard({ name, role, why, seed, stats, onOpen }) {
  return (
    <div className="card" style={{ marginBottom: 12, cursor: "pointer" }} onClick={onOpen}>
      <div style={{ display: "flex", gap: 14 }}>
        <Avatar seed={seed} size={56} name={name} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 500, fontSize: 15 }} dangerouslySetInnerHTML={{__html:name}} />
          <div className="muted" style={{ fontSize: 13, marginTop: 1 }} dangerouslySetInnerHTML={{__html:role}} />
        </div>
      </div>
      <div className="serif-i" style={{ color: "var(--accent)", fontSize: 14, marginTop: 14, lineHeight: 1.4 }}>
        “{why}”
      </div>
      <div style={{ display: "flex", gap: 18, marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border-soft)" }}>
        <MiniStat n={stats[0]} l="1to1s"/>
        <MiniStat n={stats[1]} l="Reach"/>
        <MiniStat n={stats[2]} l="Connections"/>
      </div>
    </div>
  );
}
const MiniStat = ({n,l}) => (
  <div style={{ display:"flex", alignItems:"baseline", gap:6 }}>
    <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>{n}</span>
    <span className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-3)" }}>{l}</span>
  </div>
);

window.HomeScreen = HomeScreen;