// MyAccount — 設定 → 我的帳號。信箱（唯讀）＋ 底部置中的「刪除帳號」底線文字連結。
// Pushed from the Settings 我的帳號 tile.

function MyAccount({ navigate, email = 'andywu.england@gmail.com', onDeleteAccount }) {
  const t = window.flutterTokens;
  const [confirm, setConfirm] = React.useState(false);

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 60, background: t.surfaceAlt,
      display: 'flex', flexDirection: 'column',
      animation: 'pushIn 240ms cubic-bezier(.2,.7,.2,1)',
    }}>
      {/* App bar */}
      <div style={{
        padding: '60px 16px 12px', background: t.surface, flexShrink: 0,
        borderBottom: `1px solid ${t.hairline}`,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <button onClick={() => navigate({ screen: 'list' })} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: 6, marginLeft: -6, color: t.ink, display: 'flex',
        }}>
          <window.Icon name="back" size={22}/>
        </button>
        <div style={{
          flex: 1, minWidth: 0, textAlign: 'center',
          fontFamily: '"Plus Jakarta Sans", "Noto Sans TC", sans-serif',
          fontSize: 18, fontWeight: 700, color: t.ink, letterSpacing: -0.4,
        }}>我的帳號</div>
        <div style={{ width: 34 }}/>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{
          padding: '20px 22px 10px',
          fontFamily: '"Plus Jakarta Sans", "Noto Sans TC", sans-serif',
          fontSize: 12, fontWeight: 700, color: t.ink3, letterSpacing: 1,
        }}>信箱</div>

        <div style={{
          margin: '0 14px',
          background: t.surface,
          border: `1px solid ${t.hairline}`,
          borderRadius: 14,
          padding: '16px 18px 16px 20px',
          display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <span style={{ flexShrink: 0, width: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name="mail" size={24} color={t.ink} strokeWidth={1.7}/>
          </span>
          <div style={{ fontSize: 17, fontWeight: 500, color: t.ink, letterSpacing: -0.2, lineHeight: 1.3 }}>{email}</div>
        </div>

        {/* Bottom: centered underlined delete link */}
        <div style={{ marginTop: 'auto', padding: '32px 24px 40px', textAlign: 'center' }}>
          <button
            onClick={() => setConfirm(true)}
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
              color: t.coralDk, textDecoration: 'underline', textUnderlineOffset: 4,
              padding: 8,
            }}
          >刪除帳號</button>
        </div>
      </div>

      {confirm && (
        <window.ConfirmDialog
          title="刪除帳號"
          message="刪除後將無法復原，所有資料與提醒都會被移除。確定要繼續嗎？"
          confirmLabel="刪除"
          cancelLabel="取消"
          danger
          onCancel={() => setConfirm(false)}
          onConfirm={() => { setConfirm(false); onDeleteAccount && onDeleteAccount(); }}
        />
      )}
    </div>
  );
}

Object.assign(window, { MyAccount });