// Profile.jsx — Account → Profile page.
//
// Renée's pointed call-outs from the review:
//   · C-5 "Ascend Governance" string must go — there is no DAO. Issuer reads
//     "Ascend Protocol" everywhere a system-issued claim appears.
//   · C-6 the Profile token list was rendered TWICE in OZ (table + card list).
//     This page renders the token table ONCE. The card view is a layout
//     option, not a redundant render.
//   · C-1 no scaffolding.
//   · C-4 hierarchy: identity block sits at the top with weight; secondary
//     sections (claims, tokens, sessions, preferences) sit below at hairline-
//     card weight.

const ClaimListRow = ({ claim }) => {
  const statusColor = {
    verified: "var(--success)",
    missing:  "var(--danger)",
    pending:  "var(--gold-60)",
  }[claim.status];
  const statusBg = {
    verified: "var(--green-10)",
    missing:  "var(--red-10)",
    pending:  "var(--gold-10)",
  }[claim.status];
  const statusIcon = { verified: "check", missing: "cross", pending: "clock" }[claim.status];

  return (
    <div style={{
      display: "grid", gridTemplateColumns: "auto 1fr auto auto",
      gap: 14, padding: "16px 24px",
      borderTop: "1px solid var(--border)",
      alignItems: "center",
    }}>
      <span style={{
        width: 24, height: 24, borderRadius: 999,
        background: statusBg, color: statusColor,
        display: "grid", placeItems: "center",
      }}>
        <Icon name={statusIcon} size={12} stroke={2.4}/>
      </span>
      <div style={{ minWidth: 0 }}>
        <div style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>
          {claim.label}
        </div>
        <div style={{
          font: '400 12px/16px "Inter", sans-serif',
          color: "var(--fg-subtle)", marginTop: 2,
        }}>
          Issued by <span style={{ color: "var(--fg-muted)", fontWeight: 500 }}>{claim.issuer}</span>
          {claim.expiry && <> · Expires {claim.expiry}</>}
        </div>
      </div>
      <span className={`chip ${claim.classification === "ascend-specific" ? "chip--info" : "chip--neutral"}`}
            style={{ padding: "2px 8px", fontSize: 11 }}>
        {claim.classification === "ascend-specific" ? "Ascend-specific" : "Standard"}
      </span>
      <button className="btn btn--text btn--sm" type="button">
        View <Icon name="arrow" size={11} stroke={1.6}/>
      </button>
    </div>
  );
};

const Profile = ({ identity, tokens, sessions, preferences, state = "live", onRetry }) => {
  if (state === "loading") return <PageSkeleton shape="profile" />;
  if (state === "error")   return <PageError title="Couldn't load your profile" body="Wallet and identity data is fetched per-session; this might be a connection blip." onRetry={onRetry} />;
  return (
  <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
    {/* Page header */}
    <div data-annot-note="C-5 sentence case">
      <Eyebrow>Account</Eyebrow>
      <h1 style={{
        margin: "6px 0 6px",
        font: '700 32px/36px "Figtree", sans-serif',
        letterSpacing: "-0.015em", color: "var(--fg)",
      }}>Profile</h1>
      <div style={{
        font: '400 14px/22px "Inter", sans-serif', color: "var(--fg-subtle)",
      }}>
        Your wallet, identity, and account preferences.
      </div>
    </div>

    {/* Identity block — hero */}
    <section className="card" style={{ padding: 28 }} data-annot-note="C-4 identity-led">
      <div className="hero-3col" style={{
        display: "grid", gridTemplateColumns: "auto 1fr auto",
        gap: 24, alignItems: "center",
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 999,
          background: "var(--black-100)", color: "var(--white-100)",
          display: "grid", placeItems: "center",
          font: '500 18px/1 "Inter", sans-serif',
        }}>MR</div>
        <div style={{ minWidth: 0 }}>
          <div style={{
            font: '700 22px/28px "Figtree", sans-serif',
            letterSpacing: "-0.012em", color: "var(--fg)",
          }}>{identity.displayName}</div>
          <div style={{
            font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)",
            marginTop: 4,
          }}>
            {identity.role} · Connected via {identity.walletProvider}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn--secondary" type="button">
            <Icon name="copy" size={13} stroke={1.6}/>
            Copy address
          </button>
          <button className="btn btn--secondary" type="button">
            Disconnect
          </button>
        </div>
      </div>

      <div className="info-3col" style={{
        marginTop: 24,
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
        background: "var(--border)", borderRadius: 8, overflow: "hidden",
      }}>
        <div style={{ background: "var(--bg-alt)", padding: "14px 16px" }}>
          <div className="stat-label" style={{ fontSize: 11 }}>Wallet address</div>
          <div style={{ marginTop: 4 }}>
            <MonoAddr full={identity.walletAddress} />
          </div>
        </div>
        <div style={{ background: "var(--bg-alt)", padding: "14px 16px" }}>
          <div className="stat-label" style={{ fontSize: 11 }}>OnchainID</div>
          <div style={{ marginTop: 4 }}>
            <MonoAddr full={identity.onchainId} />
          </div>
        </div>
        <div style={{ background: "var(--bg-alt)", padding: "14px 16px" }}>
          <div className="stat-label" style={{ fontSize: 11 }}>Network</div>
          <div style={{
            marginTop: 4,
            font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)",
            display: "flex", alignItems: "center", gap: 6,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--gold-60)" }} />
            {identity.network}
          </div>
        </div>
      </div>
    </section>

    {/* Claims */}
    <section className="card" style={{ padding: 0 }} data-annot-note="C-5 'Ascend Governance' \u2192 'Ascend Protocol'">
      <div style={{
        padding: "20px 24px 16px",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        gap: 12, flexWrap: "wrap",
      }}>
        <div>
          <Eyebrow>Identity</Eyebrow>
          <h2 className="section-heading" style={{ marginTop: 6 }}>
            Claims attached to your OnchainID
            <span style={{
              display: "inline-block", marginLeft: 12,
              font: '500 14px/20px "Inter", sans-serif',
              color: "var(--fg-subtle)", verticalAlign: "middle",
            }}>{identity.claims.length}</span>
          </h2>
        </div>
        <button className="btn btn--secondary btn--sm" type="button">
          <Icon name="plus" size={12} stroke={1.8}/>
          Request claim
        </button>
      </div>
      {identity.claims.map((c, i) => (
        <ClaimListRow key={i} claim={c} />
      ))}
    </section>

    {/* Tokens table — rendered ONCE (C-6) */}
    <section className="card" style={{ padding: 0 }} data-annot-note="C-6 single render">
      <div style={{
        padding: "20px 24px 16px",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        gap: 12, flexWrap: "wrap",
      }}>
        <div>
          <Eyebrow>Wallet</Eyebrow>
          <h2 className="section-heading" style={{ marginTop: 6 }}>
            Tokens
            <span style={{
              display: "inline-block", marginLeft: 12,
              font: '500 14px/20px "Inter", sans-serif',
              color: "var(--fg-subtle)", verticalAlign: "middle",
            }}>{tokens.length}</span>
          </h2>
        </div>
      </div>

      <div className="tok-scroll">
      <div className="tok-head" style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr auto",
        padding: "8px 24px",
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        background: "var(--bg-alt)",
        font: '500 11px/16px "Inter", sans-serif',
        letterSpacing: "0.04em", textTransform: "uppercase",
        color: "var(--fg-subtle)", gap: 12,
      }}>
        <span>Token</span>
        <span style={{ textAlign: "right" }}>Balance</span>
        <span style={{ textAlign: "right" }}>USD value</span>
        <span></span>
      </div>

      {tokens.map((t, i) => (
        <div key={i} className="tok-row" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr auto",
          padding: "14px 24px",
          borderTop: i === 0 ? "none" : "1px solid var(--border)",
          gap: 12, alignItems: "center",
        }}>
          <div>
            <div style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>
              {t.ticker}
            </div>
            <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
              {t.name}
            </div>
          </div>
          <div className="tnum" style={{
            font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)", textAlign: "right",
          }}>
            {t.balance}
          </div>
          <div className="tnum" style={{
            font: '500 14px/20px "Inter", sans-serif', color: "var(--fg-muted)", textAlign: "right",
          }}>
            {t.usd}
          </div>
          <button className="btn btn--text btn--sm" type="button">
            Send <Icon name="arrow" size={11} stroke={1.6}/>
          </button>
        </div>
      ))}
      </div>
    </section>

    {/* Sessions */}
    <section className="card" style={{ padding: 0 }}>
      <div style={{ padding: "20px 24px 16px" }}>
        <Eyebrow>Security</Eyebrow>
        <h2 className="section-heading" style={{ marginTop: 6 }}>Active sessions</h2>
      </div>
      {sessions.map((s, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "auto 1fr auto auto",
          gap: 14, padding: "14px 24px",
          borderTop: "1px solid var(--border)",
          alignItems: "center",
        }}>
          <span style={{
            width: 32, height: 32, borderRadius: 8,
            background: "var(--bg-alt)", color: "var(--fg-muted)",
            display: "grid", placeItems: "center",
          }}>
            <Icon name="grid" size={14} stroke={1.5}/>
          </span>
          <div>
            <div style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>
              {s.device}
            </div>
            <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 2 }}>
              {s.location} · Last active {s.lastActive}
            </div>
          </div>
          {s.current && <StatusPill variant="eligible">This device</StatusPill>}
          {!s.current && (
            <button className="btn btn--text btn--sm" type="button" style={{ color: "var(--danger)" }}>
              Revoke
            </button>
          )}
        </div>
      ))}
    </section>

    {/* Preferences */}
    <section className="card" style={{ padding: 0 }}>
      <div style={{ padding: "20px 24px 16px" }}>
        <Eyebrow>Preferences</Eyebrow>
        <h2 className="section-heading" style={{ marginTop: 6 }}>Account preferences</h2>
      </div>
      {preferences.map((p, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1fr auto",
          gap: 16, padding: "14px 24px",
          borderTop: "1px solid var(--border)",
          alignItems: "center",
        }}>
          <div>
            <div style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>
              {p.label}
            </div>
            <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 2 }}>
              {p.description}
            </div>
          </div>
          <button className="btn btn--secondary btn--sm" type="button">{p.value}</button>
        </div>
      ))}
    </section>
  </div>
  );
};

Object.assign(window, { Profile, ClaimListRow });