/* global React */
const { useState: useStateAttr } = React;

// ====================================================================
// Surface 1 · Attribution — the trust moment
// ====================================================================

function AttributionDetail({ go = () => {} }) {
  const { MScreen, MTopBar, MStickyCTA, Eyebrow, Perf, SagePill, MiniAvatar } = window.M;
  return (
    <MScreen
      footer={
        <MStickyCTA>
          <SagePill fullWidth onClick={() => go("attr-confirm")}>Confirm this connection</SagePill>
          <div style={{ height: 10 }}/>
          <SagePill fullWidth ghost onClick={() => go("attr-decline")}>This isn't accurate</SagePill>
          <div style={{ textAlign: "center", marginTop: 12 }}>
            <button style={{ background: "none", border: "none", color: "var(--text-3)", font: "500 13px var(--sans)", cursor: "pointer" }}>I'll decide later</button>
          </div>
        </MStickyCTA>
      }
    >
      <MTopBar onBack={() => go("notif-main")} right={<span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)" }}>2 MAY · 3:14 PM</span>}/>

      {/* Hero */}
      <div style={{ padding: "8px 24px 22px" }}>
        <Eyebrow>Connection attribution</Eyebrow>
        <h1 style={{ font: "400 32px/1.12 var(--serif)", color: "var(--text)", margin: "12px 0 22px", letterSpacing: "-0.012em" }}>
          Marcus says you <em style={{ color: "var(--accent)", fontStyle: "italic" }}>opened a door</em> for him.
        </h1>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <MiniAvatar initials="MC" size={56}/>
          <div style={{ minWidth: 0 }}>
            <div style={{ font: "600 15px var(--sans)", color: "var(--text)" }}>Marcus Chen</div>
            <div style={{ font: "400 13px/1.4 var(--sans)", color: "var(--text-2)" }}>Commercial property solicitor</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.1em", color: "var(--text-3)", marginTop: 3, textTransform: "uppercase" }}>Chen Legal · Robina, QLD</div>
          </div>
        </div>
      </div>

      <Perf margin="0 24px 22px"/>

      {/* The attribution card */}
      <div style={{ padding: "0 24px" }}>
        <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 14, padding: 22 }}>
          <Eyebrow>What Marcus said</Eyebrow>
          <p style={{ font: "italic 400 18px/1.42 var(--serif)", color: "var(--text)", margin: "12px 0 14px", letterSpacing: "-0.005em" }}>
            "Eliza introduced me to James at Coast Ledger. He's exactly the kind of commercial accountant I've been looking for — we've already booked a meeting."
          </p>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", textTransform: "uppercase" }}>From debrief · 1to1 on 28 April</div>
        </div>
      </div>

      {/* Context */}
      <div style={{ padding: "26px 24px 0" }}>
        <Eyebrow>Your 1to1 with Marcus</Eyebrow>
        <div style={{ marginTop: 12, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text-2)" }}>28 APR · 10:30</div>
            <div style={{ font: "500 13.5px var(--sans)", color: "var(--text)", marginTop: 4 }}>Lune Espresso, Burleigh Heads</div>
            <div style={{ font: "400 12px var(--sans)", color: "var(--text-3)", marginTop: 2 }}>45 minutes · in person</div>
          </div>
          <button style={{ background: "none", border: "none", color: "var(--accent)", font: "500 12.5px var(--sans)", cursor: "pointer" }}>View debrief →</button>
        </div>
      </div>

      {/* Confirmation copy */}
      <div style={{ padding: "26px 24px 22px" }}>
        <p style={{ font: "400 14.5px/1.55 var(--sans)", color: "var(--text-2)", margin: 0 }}>
          If you made this introduction, confirming it counts toward your reputation and this week's Rhythm. If it didn't happen or isn't accurate, decline — no hard feelings.
        </p>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 16, textTransform: "uppercase" }}>Expires in 5 days</div>
      </div>
    </MScreen>
  );
}

// ----- 1b: confirmation success -----
function AttributionConfirmed() {
  const { Eyebrow } = window.M;
  return (
    <div style={{ width: "100%", height: "100%", background: "var(--bg)", color: "var(--text)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "48px 32px", textAlign: "center" }}>
      {/* Sage check animation — restrained */}
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" style={{ marginBottom: 28 }}>
        <circle cx="28" cy="28" r="26" stroke="var(--accent)" strokeWidth="1.2" opacity="0.4"/>
        <circle cx="28" cy="28" r="20" stroke="var(--accent)" strokeWidth="1.2" opacity="0.7"/>
        <path d="M19 28.5l6 6 12-13" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <Eyebrow accent>Confirmed</Eyebrow>
      <h1 style={{ font: "400 36px/1.1 var(--serif)", color: "var(--text)", margin: "14px 0 18px", letterSpacing: "-0.012em" }}>
        Connection <em style={{ color: "var(--accent)", fontStyle: "italic" }}>attributed.</em>
      </h1>
      <p style={{ font: "400 15px/1.55 var(--sans)", color: "var(--text-2)", margin: 0, maxWidth: 280 }}>
        This counts toward your reputation. Marcus can see it's confirmed.
      </p>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", marginTop: 36, textTransform: "uppercase" }}>Returning to inbox…</div>
    </div>
  );
}

// ----- 1c: decline sheet -----
function AttributionDeclineSheet() {
  const [sel, setSel] = useStateAttr("I didn't make this introduction");
  const { Eyebrow, SagePill } = window.M;
  const opts = [
    "I didn't make this introduction",
    "The details are wrong",
    "Other",
  ];
  return (
    <div style={{ width: "100%", height: "100%", background: "rgba(0,0,0,0.55)", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
      <div style={{ background: "var(--surface)", borderTopLeftRadius: 22, borderTopRightRadius: 22, padding: "20px 24px 28px", borderTop: "1px solid var(--border)" }}>
        {/* drag handle */}
        <div style={{ width: 36, height: 4, borderRadius: 2, background: "var(--border)", margin: "0 auto 18px" }}/>

        <Eyebrow>Decline attribution</Eyebrow>
        <h2 style={{ font: "400 24px/1.18 var(--serif)", color: "var(--text)", margin: "10px 0 22px", letterSpacing: "-0.005em" }}>
          Why isn't this <em style={{ color: "var(--accent)", fontStyle: "italic" }}>accurate?</em>
        </h2>

        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {opts.map((o, i) => {
            const active = sel === o;
            return (
              <button key={o} onClick={() => setSel(o)} style={{
                display: "flex", alignItems: "center", gap: 14,
                padding: "16px 4px",
                borderTop: i === 0 ? "1px solid var(--border-soft)" : "none",
                borderBottom: "1px solid var(--border-soft)",
                background: "transparent", textAlign: "left", cursor: "pointer",
              }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 9,
                  border: "1.5px solid " + (active ? "var(--accent)" : "var(--border)"),
                  display: "grid", placeItems: "center", flex: "0 0 18px",
                }}>
                  {active && <span style={{ width: 8, height: 8, borderRadius: 4, background: "var(--accent)" }}/>}
                </span>
                <span style={{ font: "400 15px var(--sans)", color: active ? "var(--text)" : "var(--text-2)" }}>{o}</span>
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: 18 }}>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginBottom: 8 }}>Add context (optional)</div>
          <textarea placeholder="Only visible to you" style={{
            width: "100%", height: 64, resize: "none",
            background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 10,
            padding: 12, color: "var(--text)", font: "400 13.5px/1.5 var(--sans)",
            outline: "none",
          }}/>
        </div>

        <p style={{ font: "400 12.5px/1.5 var(--sans)", color: "var(--text-3)", margin: "14px 0 18px" }}>
          Marcus won't see your reason. The attribution will simply not count.
        </p>

        <SagePill fullWidth>Submit</SagePill>
        <div style={{ textAlign: "center", marginTop: 12 }}>
          <button style={{ background: "none", border: "none", color: "var(--text-3)", font: "500 13px var(--sans)", cursor: "pointer" }}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

window.AttributionDetail = AttributionDetail;
window.AttributionConfirmed = AttributionConfirmed;
window.AttributionDeclineSheet = AttributionDeclineSheet;
