/* global React, Icon, getServiceStages */

const ORG_DETAIL_MEMBERS = [
  { name: "Hans Weber",    initials: "HW" },
  { name: "Anna Braun",    initials: "AB" },
  { name: "Klaus Richter", initials: "KR" },
];

function ServiceDetailPage({ service, onBack, user = {} }) {
  const isOrg = user.type === "organisation";
  const s = service || { title: "Investor visa renewal", icon: "plane", stage: 2, total: 3 };
  const activeMember = s.member || null;
  const stageDefs = getServiceStages(s.title);
  const steps = stageDefs.map((sd, i) => ({
    t: sd.t,
    m: sd.desc,
    state: i + 1 < s.stage ? "done" : i + 1 === s.stage ? "current" : "",
  }));
  const activity = [
    { when: "Today · 09:42", what: "Application submitted to GDRFA portal", who: "Smash team" },
    { when: "Yesterday · 16:30", what: "Medical fitness certificate received", who: "You uploaded this" },
    { when: "12 May · 11:18", what: "Down payment received — AED 2,000", who: "Stripe" },
    { when: "10 May · 14:22", what: "Quotation sent — AED 4,750", who: "Smash team" },
    { when: "03 May · 10:08", what: "Engagement opened", who: "Smash team" },
  ];

  return (
    <div className="container" style={{ padding: "32px" }}>
      <button className="btn btn-ghost" onClick={onBack} style={{ marginBottom: 12 }}>
        <Icon name="arrow-left" size={14} />Back to services
      </button>

      {/* Org member bar */}
      {isOrg && (
        <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap", marginBottom: 20 }}>
          <span style={{ fontSize: 12, color: "var(--fg-3)", fontWeight: 600, marginRight: 4 }}>Member:</span>
          {ORG_DETAIL_MEMBERS.map(m => {
            const active = m.name === activeMember;
            return (
              <button key={m.name}
                onClick={() => { if (!active) onBack(); }}
                title={active ? undefined : `Switch to ${m.name}'s services`}
                style={{
                  display: "flex", alignItems: "center", gap: 7,
                  padding: "5px 12px 5px 8px", borderRadius: 6, border: "1px solid", cursor: active ? "default" : "pointer",
                  fontFamily: "inherit",
                  background: active ? "var(--plum-900)" : "#fff",
                  color: active ? "#fff" : "var(--fg-2)",
                  borderColor: active ? "var(--plum-900)" : "var(--border-strong)",
                }}>
                <div style={{
                  width: 20, height: 20, borderRadius: 4, flexShrink: 0,
                  background: active ? "rgba(255,255,255,0.2)" : "var(--plum-100)",
                  color: active ? "#fff" : "var(--plum-700)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 700, fontSize: 9,
                }}>{m.initials}</div>
                <span style={{ fontSize: 12.5, fontWeight: 500 }}>{m.name}</span>
                {active && <Icon name="check" size={12} />}
              </button>
            );
          })}
        </div>
      )}

      <div style={{ display: "flex", gap: 18, alignItems: "flex-start", marginBottom: 22 }}>
        <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <Icon name={s.icon} size={28} />
        </div>
        <div>
          <div className="eyebrow" style={{ color: "var(--brand-burgundy)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600 }}>Engagement · ENG-2026-0214</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em", margin: "4px 0 2px" }}>{s.title}</h1>
          <div style={{ color: "var(--fg-3)", fontSize: 14 }}>Started 02 May 2026 · expected completion 24 May 2026</div>
        </div>
      </div>

      <div className="resp-two-col" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <div className="pcard pcard-pad">
          <h2 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 16px" }}>Progress</h2>
          <div className="steps">
            {steps.map((st, i) => (
              <div key={i} className={"step " + st.state}>
                <div className="node">{st.state === "done" ? "✓" : i + 1}</div>
                <div className="body">
                  <div className="title">{st.t}</div>
                  <div className="meta">{st.m}</div>
                </div>
              </div>
            ))}
          </div>

          <h2 style={{ fontSize: 18, fontWeight: 600, margin: "26px 0 12px" }}>Activity</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {activity.map((a, i) => (
              <div key={i} style={{ display: "flex", gap: 12, padding: "10px 12px", background: "var(--ink-50)", borderRadius: 8 }}>
                <Icon name="circle-dot" size={14} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5 }}>{a.what}</div>
                  <div style={{ fontSize: 11.5, color: "var(--fg-3)", marginTop: 2 }}>{a.when} · {a.who}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="pcard pcard-pad">
            <h3 style={{ fontSize: 14, fontWeight: 600, margin: "0 0 12px" }}>Outstanding payment</h3>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>AED 2,750</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>of AED 4,750 quoted</div>
            <button className="btn btn-primary" style={{ marginTop: 14, width: "100%", justifyContent: "center" }}>Pay now</button>
            <button className="btn btn-secondary" style={{ marginTop: 8, width: "100%", justifyContent: "center" }}>Download quotation</button>
          </div>

          <div className="pcard pcard-pad">
            <h3 style={{ fontSize: 14, fontWeight: 600, margin: "0 0 12px" }}>Your Smash team</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--brand-pink)", color: "var(--plum-900)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12 }}>FA</div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>Fatima A.</div>
                  <div style={{ fontSize: 11.5, color: "var(--fg-3)" }}>Account manager</div>
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--plum-100)", color: "var(--plum-700)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12 }}>HM</div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>Hassan M.</div>
                  <div style={{ fontSize: 11.5, color: "var(--fg-3)" }}>PRO officer</div>
                </div>
              </div>
            </div>
            <button className="btn btn-ghost" style={{ marginTop: 12, padding: 0 }}><Icon name="message-circle" size={14} />Send a message</button>
          </div>

          <div className="pcard pcard-pad">
            <h3 style={{ fontSize: 14, fontWeight: 600, margin: "0 0 12px" }}>Documents</h3>
            {["Passport.pdf", "Previous-visa-stamp.jpg", "Medical-fitness-cert.pdf", "Quotation-ENG-2026-0214.pdf"].map((d, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderTop: i > 0 ? "1px solid var(--border-subtle)" : 0, fontSize: 13 }}>
                <Icon name="file-text" size={14} /><span style={{ flex: 1 }}>{d}</span>
                <Icon name="download" size={14} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServiceDetailPage });